Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Contact Form Module with the Website Page Designer

Contact Form Module with the Website Page Designer

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.

Define contents

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.

Text

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.

Email

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

Elements

You can enable or disable captcha here.

Integrations

Enable a webhook that will redirect users to the URL you specify after successful form submission.

Redirect

Enable a redirect URL that will redirect users to the URL you specify after form submission.

Link

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.

Background

Add a background color, gradient, image or video to your module.

Admin label

You can modify the module’s label for easier identification.

Customize the design

With these settings, you can customize your design.

Text

Control how your text is displayed in terms of alignment and shadow.

Title Text

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.

Button

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.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color and width for your module.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

Include animation to the module.

Advanced settings

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.

Use Case

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!

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?