Contact Form

Updated 2 weeks ago

The Contact Form element allows you to design custom contact forms with various field types and layouts.

Check the Contact Form examples

Supported Input Field Types #

Contact Form element supports the listed input field types:

• Text (single line)
• Text (multiple lines)
• Email
• Date
• Dropdown
• Checkboxes
• Radio buttons
• Upload File
• Text block
• Agreement checkbox
• Captcha

Fields Design and Layout #

Field Width #

By default, each new field takes the full available width of the form. Adjust the Width setting to show several fields in a single line.

Field Icon #

To add the icon to the input field, use the relevant Icon control inside its settings

Fields Layout and Gap #

Fields layout defines the default position for the added input fields and submit button:

• Vertical. New fields and the submit button appear below.
  

  

• Horizontal. New fields and the submit button appear on the side.

Specify the needed Fields Layout and Gap between fields between fields in the More Options settings. 

Fields Colors #

Set up the colors for the input fields at Theme Options > Fields Style. For more information, read the relevant article. 

Submit Button Design #

Use the Button settings to specify the label, style, size, alignment, and icon for the submit button.

The submit button uses the global button styles from Theme Options > Button Styles. For more details on global styles, read the relevant article.

Data Sending #

When site visitors submit a contact form, the data is sent to the email address(es) specified in the element's settings. The submitted data is not stored anywhere on the site. So make sure that emails are delivered to the address(es) provided.

In the More Options settings, you can specify the recipient email, blind copy email, email subject, and the message after sending.

The email message is not editable and forms automatically based on the specified data and settings. It contains the URL of the page with the submitted form and the list of submitted fields. 

If you leave the Email Subject empty, it will form automatically using the template: "Message from <post title>". 

When you use an Agreement checkbox type field, it will add extra data on the consent to the message:

• Agreement text
• Agreement date and time
• IP address

Frequently Asked Questions #

How to mark fields as required? #

Activate the Required switch when editing the field, and the form will not send data until it is filled in.

You can mark the following field types as required:

• Text (single line)
• Text (multiple lines)
• Email
• Date
• Checkboxes
• Upload File

How to change a keyboard type for mobiles? #

For the Text (single line) field type there is the Input mode option. It allows to change the keyboard type on mobile phones to improve the experience for visitors when typing in a field. What types of keyboards are possible, see the corresponding article.

Input mode does not validate values: the visitor can still enter any value.

My form is not sending data. How to fix it? #

This commonly happens due to SMTP settings. Contact your hosting provider regarding this issue or set up the SMTP using third-party plugins.

How do I stretch the submit button to the full available width? #

Open the Button settings tab and specify the Button Alignment: stretch to the full width.

How do I translate notification messages for required fields? #

Check the Localization article.