After you’ve created your contact form, formulated the right questions the next step is to customize your contact form. When you embed the contact form in your website, customising it makes sure it matches the aesthetic of your brand and website.
In this help article
- Page specific
- Embed the customized form in your website
Every user is able to add page specifics such as an introduction, button text and a success page with an image. You can find the page specifics on the right side of ‘Customize your form’.
Customers on the Pro/Business plan have the option to personalize the form by adding their own logo, using their brand's colors, and matching it to their brand’s style. All of this can be set up on the left side of the screen below "General."
In the left section called General, you will find a set of customizable elements. In the right section, you can immediately see your changes in the preview screen.
First option on the left side is adding images like your logo and favicon. You can add your logo by clicking on ‘Upload logo’ and choosing an image (supported type: JPG or PNG).
Note: if you have already uploaded a logo in the team's customization settings, you will see the notification like the example below. You can change the uploaded logo by clicking on the team settings which will redirect you to the correct location. Change the logo or Favicon by uploading a new image.
In the general section, you can also adjust the font for both the title and the text. You can pick different styles, sizes, and colors for the font.
- There are different font types in the dropdown menu. You can either choose a type from the list or type to search the desired font. e.g. Pixelify Sans doesn't show in the list, when I type 'Pix' it will appear.
- You have two options for choosing the text color:
- Use a hex code: simply enter the hex code for your chosen color. For example #000000 is black.
- Click the colored square: select a color directly from the palette. If you want to match a color on your website precisely, use the eyedropper tool (pin) to pick that exact color.
Note: The chosen font, size, and color will also apply to the success page. You can preview this by clicking on 'Success Page' on the right side instead of 'Form Page'.
You have the option to choose colors for both the page and the form itself.
- The example below illustrates that both the form and the page have the same color.
- Choosing a color works the same as with the text color. Fill out the hex code, choose a color from the palette or use the pin. For example, here the hex code #e1e1c7 is used which is a neutral beige.
The last element in the general column is the button color where you can change both the button color as well as the button text color.
- For example, a black button with white text.
This is what the customisation of your form could look like:
In the right-hand column, you will find elements related to the page specifics. Beneath the heading 'Page Specific,' you have the option to choose between the 'Form Page' and the 'Success Page.
- You’re able to personalize the introduction and the text that appears on the button in the right side corner.
- Additionally, you can preview your contact form. By clicking the 'Enlarge' icon, you can view the entire form.
Note: In the full preview, you'll also have visibility of the reCAPTCHA checkbox, which is not visible in the standard preview.
- Customize the title text as wanted. For example you can change it to 'Great succes'.
- Add a personalized success message, such as ''Thank you for filling in the contact form, we will be in contact shortly.'
- Optionally, insert a success image by clicking on 'Upload image'. The supported types are JPG or PNG.
Note: Don't forget to preview the page to ensure it aligns with your requirements.
After checking the preview of your contact form, you need to save it by pressing the button in the bottom right-hand corner. You will then get a pop-up screen where you either Share your form or go to the overview of your contact forms.
Embed the customized form in your website
You can embed this customized form in your website so it looks like it’s a fixed part of the website. Copy the embedded HTML from the Contact forms overview page. In the example below you can see the contact form created above as example embedded in a website.
To learn more on how to embed the contact form in your website, follow the steps in this article.
Vectera is looking forward to your feedback so we can offer you the best scheduling and customer meeting experience. Set up your next customer meeting right away by logging into your account or sign-up for a free, fully-featured trial of Vectera!