Contact Form

Updated 2 months ago

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

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
Math Captcha
reCAPTCHA

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

Work with Google reCAPTCHA #

Impreza supports using the Google reCAPTCHA v3 in built-in contact forms.

To use it in Impreza contact forms, go to Theme Options > Advanced > Global Values and specify the "reCAPTCHA Site Key" and "reCAPTCHA Secret Key." Get reCAPTCHA keys.

Once both keys are specified, you need to add the "reCAPTCHA" field to desired Contact Form. If you see the relevant badge in the right bottom corner, then the submission of this form will be checked using reCAPTCHA scoring.

Forms without "reCAPTCHA" field will work as usual.

You can hide that badge by activating the "Hide reCAPTCHA badge" switch at Theme Options > Advanced > Global Values. You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow (source). So, if you enable the switch the predefined text will be added to every contact form with the reCAPTCHA field. You can edit that text in the relevant field below the switch.

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.