The Contact Form module allows your users to send you a message from your website and captures their name and email address in your form data.


Before we begin: Have you checked out the Focus feature? Focus provides you with a set of 20 beautiful and functional web page sections designed in the style of your template that you can add with a single click, including a Contact Us focus!

The Contact Us Focus attractively lays out your contact form with a background, title, text boxes and spacing in the style of your template. It’s all customizable, so you can tweak it to your liking.

To check out Focus, click the Focus tab in the left sidebar, and then click Add Focus and scroll through the options.


If you just want to add a simple contact form, without the added elements of the Contact Us Focus, follow these steps to add a contact form to your page:


Step 1: Open the target page 

In the website builder, open the page that you want to add the contact form to.


Step 2: Open the Modules tab

In the left sidebar menu, click on Modules:


Step 3: Locate the contact form module icon

In the Modules sidebar, you will see the Contact Form module icon near the bottom.


Step 4: Click and drag the contact form module icon onto your page

Point your mouse at the contact form module, click and drag it onto your page to where you want the contact form to be located. Then drop it.

As you drag it around the page, you will see black lines appear, indicating the edges of the existing elements on the page. Use these lines as guides help you drop your contact form module in the right place. You can add spacers or other elements later to adjust its position if desired.

For this example, we will add a contact form to the Bio page in the Nathan Clark template, beneath the template’s sample content.

Below you can see the contact form module before it was dropped, hovering over the page. The black line indicates the top edge of the spacer that separates the content elements sample text box from the social media buttons. When the contact form module is dropped now, it will insert between the text box and the spacer.


Step 5: Choose your options

Your new contact form module is added to your page. The default settings provide fields for name, email, subject, and message.


Tip: To move the module around, including removing it to the trash can, click the thick black grab bar in the center-top and drag it.



To open the options bar, click anywhere on the contact form. Then click the Options icon:

The default options are: Name, Email, Subject, and Message. You can also add Website and Phone fields to your contact form. Click Submit to save changes to your form options.



Step 6: Saving the changes

Once you have finished with your contact form, remember to click the Save button at the bottom center of the modules sidebar to save and protect your changes.


This concludes our guide How to add a contact form module.


Did this answer your question?