Contact Form

Updated 3 months ago

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

How to Add Input Fields #

Open the Contact Form settings. In the Fields tab, click "Add" or "+" and fill in the relevant settings. To reorder and remove input fields, use the relevant icons when hovering over them.

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

Input Field Title, Placeholder, and Description #

Specify the title, placeholder, and description to add relevant elements to the input field. These are sub-settings; you can use all or none as you like.

List of Values for Dropdowns, Checkboxes, and Radio Buttons #

When editing the fields with the types Dropdown, Checkboxes, and Radio Buttons, use the Values field to specify pre-defined values to choose from. Each new value should start on a new line.

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

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.

Vertical Layout Example

Horizontal Layout Example

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 #

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 to 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 to translate notification messages for required fields? #

You can use the Loco Translate plugin to adjust relevant translations.