VD Website Builder | Set Up a Contact Form on Your Website

This article will walk you through how to add and customise a contact form on your website. By the end of this guide, you'll have a fully working contact form that lets visitors reach you directly — without exposing your email address.

On this page

• Add a Contact Form element to your page
• Edit and configure the Contact Form
• Customize the Submit button design
• Preview and publish your contact form

Add a Contact Form element to your page

1. Open your Website Editor.
2. From the side menu, click Add Element. This will open the Element panel.
3. Find the Contact Form element, then drag and drop it into your preferred area on the page.

Once added, the form will appear on your page and is ready for customisation.

Edit and configure the Contact Form

You can personalize your contact form and make sure submissions reach you. Follow the steps below:

1. Click anywhere inside the Contact Form area.
2. Click the Edit (pencil) icon in the top-right corner.
3. Configure the following tabs and fields to suit your needs:

• LAYOUT — This is where you update the form fields
  • The default fields include Full Name, Phone, Email, Select Service, and Subject. Click Add Form Field to include additional fields like checkboxes, links, text areas, etc.
     
• SETTINGS — This is where you set up submission details
  • Form Name – Enter a name for this form (useful for internal tracking purposes).
  • Send Form To – Type the email address where you'd like form submissions delivered, then press Enter. Make sure the address is valid and checked regularly.
     
• ADVANCED — This is where you adjust the form's behavior 
  • Form Layout – Choose between a vertical, horizontal, or two-column layout.
  • Placeholders – Toggle on or off to show sample text inside the form fields.
  • On Submit – Set what visitors see after submitting the form, such as a thank-you message or a confirmation note.

Customize the Submit button design

You can change the appearance of your form's Submit or Send Message button.

1. Double-click on the Submit button to open customization options.
2. Click Settings (gear icon).
3. Adjust the button's appearance that is consistent with your site’s overall look and feel:

• Background – Change the button color to match your site's theme 
• Type – Choose between a solid or outlined button style. 
• Hover Effects – Add an animation that appears when visitors hover over the button. 
• Full Width – Enable this option to stretch the button across the full width of the form.

Preview and publish your contact form

Before making your form live:

1. Click Preview to see how it looks on your site.
2. Test the form by sending a sample message to yourself to make sure submissions are coming through.
3. Once you're happy with everything, click Publish to make the form available to your visitors.

From this point on, any inquiries or messages sent through the form will land directly in your inbox.

You're all set!

Your contact form is now ready to use. Visitors can start sending enquiries, feedback, or requests directly through your website. Keep an eye on your inbox for submissions and update your form anytime to better match your business needs.