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

What

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."


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. 


Images

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.


Font

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'.


Background

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. 


Button

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: 



Page specific

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.


Form 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.


Success page

  • 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.
  • Add a downloadable file or add a link where people can download a file (see below)


Add a downloadable file


In some cases you want to share a file with leads provided that they submit data first (e.g. a name and an email address). You can do this with a contact form that has a downloadable file. This has 2 options:

  1. Add a link (e.g. of your own website) where they can download the file
  2. Add a file that can be downloaded after submitting the contact form (max. 10MB)


You can also customize the button text to make it more clear, as in the example above. The preview could look like this:



Save and share your contact form

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!