There are many reasons to include a contact form on your page: it makes yourself reachable, it gets you more leads, it’s convenient and easy to use for your users in case they need to contact you, and it allows you to get to know your audience and their needs.
In order to make it easy to manage, all submitted forms are sent to the website admin. You can find them listed on your left menu under Forms-> All Entries. It is possible to view or delete each individually.
Create a Contact Form module with the page designer easily by following the steps described here.
Go to the page designer, and add a new module by clicking on the gray plus sign. Choose the contact module from the list. If you prefer to find the module automatically, it’s also possible to type it in the search bar on top.
The contents tab includes the following options:
You can customize the fields that appear already as default (name, email, message), delete them and add new ones. If you customize one field and you want to keep the majority of the settings for other ones, just duplicate it and adjust the individual options for each.
When you go to the settings of a field, you can customize the following content options:
- Field ID: you can type an ID for this field.
- Title: define the title of the field.
- Type of field: select between one the following types – input field, email, text area, checkboxes, radio buttons, select dropdown.
For the input field you can define the following settings:
- Minimum length: insert the minimum number of characters for the field or leave at 0 for no restriction.
- Maximum length: insert the maximum number of characters for the field or leave at 0 for no restriction.
- Allowed symbols: allow all symbols, letters only, numbers only or alphanumeric only.
For the checkboxes, radio buttons and select dropdown, you will need to create the options.
- Required field: define whether filling the field is mandatory.
- Conditional logic: you can enable conditional logic, that will make the field only visible if the rules are fulfilled.
- Relation: decide if any or all of the rules need to be fulfilled.
- Rules: create conditions for showing or hiding the field.
- Link: insert a module link URL.
- Background color: define the background color for this field.
For the individual field design settings you can adjust:
- Make fullwidth: if you enable this option the field will span the entire width, otherwise just half.
- Text orientation: define how the text is aligned.
- Field text: customize the design settings of the field text.
- Sizing: adjust the width of the field.
- Spacing: define margins and padding.
- Border: customize the field’s borders.
- Box Shadow: define box shadow.
- Filters: define tonality filters.
You can also apply custom CSS and control transitions for the individual field, using its advanced tab.
Here you can type a title for the contact form, type a success message that will appear when the form is submitted, and the text of the submit button.
Insert the email to where the messages will be sent. You can also define a message pattern for the email message, in which fields are specified as %%field_id%%. So, if you have fields named “message” and “email”, it could look something like this: This is the %%message%% from this %%email%%.
You can enable or disable captcha here.
Enable a webhook that will redirect users to the URL you specify after successful form submission.
Enable a redirect URL that will redirect users to the URL you specify after form submission.
If you want that the module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.
Add a background color, gradient, image or video to your module.
You can modify the module’s label for easier identification.
Customize the design
With these settings, you can customize your design.
Control how your text is displayed in terms of alignment and shadow.
Define the font, color, alignment, line height, and other settings for the title.
Form Field Text
Customize the font, color, alignment, line height, and other settings for the form field text.
Define the button alignment. If you want to enable button custom styles, you can adjust the button’s text size, text color, background color, border width, border color, border radius, letter spacing, font settings, icon settings, text shadow, and box shadow.
Adjust the width of the module.
Customize margins and padding sizes.
Define the border’s corner, style, color and width for your module.
Here you can enable box shadow.
Adjust the hue of the module as a whole.
Include animation to the module.
Using this tab you are able to insert CSS code, visibility settings, and manage transitions. Check this guide to know more about how to use these settings.
We can now check how we can add a simple contact form very easily.
We are using the following general settings for the module:
Title: Contact Us!
Text Orientation: left
Title Font Size: 50px
Title Text Color: #0895aa
Form Field Textt Size: 18px
Form Field Text Color: #4f4f4f
Border Color: #d4d4d4
Use Custom Styles for Button: YES
Button Text Size: 16
Button Text Color: #ffffff
Button Background Color: #0895aa
Button Border Width: 6
Button Border Color: #ffffff
Button Border Radius: 6
Inputs Border Color: #4f4f4f
It looks like this!