You can use the Contact Form Element to collect website visitors' data.

contact-form.png

You can watch the video lesson about the Contact Form Element.

Add Contact Form Element

Add a new Contact Form from the Add Elements list in the Top Menu.

form-add.png

Horizontal Form Type

You can use the Horizontal Preset for the Contact Form Element.

contact-form-horizontal.png

Add Fields To Contact Form

Add fields to the Contact Form from the Add Panel. You can add a new field to any position in the Contact Form Element. You can also add Elements to the Contact Form from the Options Menu of the Context Toolbar.

form-add-field.png

Learn more about the Field Types, which you can add to the Contact Form.

form-fields.png

Change Field Type

You can also change the Field Type in the Contact Form in the Property Panel for the selected Field.

change-field-type.png

Contact Form Properties

After selecting the Contact Form or Field, you can specify various properties in the Property Panel.

Contact Form Submit To

You can specify the Sumit To options to send Contact Form submissions.

Please read more about Contact Form Submit To Options.

form-submit-to-options.png

If you incorrectly set the Submit To options, you will see a warning about the problem during the Publishing.

form-submit-warning.png

Field Labels

You can enable the Labels on the Contact Form Element in the Property Panel. To switch all Labels, uncheck the Label checkbox for the selected Field.

form-labels.png

Label Position

In the Property Panel, you can show Labels to the left of the Inputs and switch the layout at any time.

contact-form-label-layout-position.gif

Label Spacing

When you place your Contact Form Labels to the left, you can modify the Spacing from Labels to Inputs and change the width of the Label Column.

contact-form-label-spacing.png

Default Label Values

You can see the default values for Contact Form Fields, which are mainly required for some layouts with labels.

contact-form-default-labels.png

Contact Form Styling

You can set the Fill and Border for the Contact Form Element.

fill-border-contact-form.png

You can also modify the Radius and Shadow properties. Please note that the Radius property is available only if you have Background or Border enabled for your Contact Form.

form-radius-shadow.png

Input Styles On Context Toolbar

You can style the Contact Form quickly by selecting properties on the Context Toolbar.

style-form-fields-toolbar.png

Input Height

You can also change the Height of the Input Field.

form-input-height.png

Input Radius

You can use the Radius property for the Contact Form input Fields.

radius-form-inputs.png

Spacing Between Fields

You can now set the Spacing between the Contact Form Fields in the Property Panel.

contact-form-field-margins.png

Field Style Links

You can find the links to styling Properties near the corresponding properties in the Property Panel.

contact-form-improved.png

Submit Button

You can change the positions of the Submit Button by dragging it left, center, or right.

drag-button.png

You can use the Shadow property on the Contact Form's Button.

shadow-form-button.png

Submit Button Left Alignment

For the Contact Form layouts with the Labels, the Submit Button Alignment is by the Inputs to the left.

submit-button-left-alignment.png

Contact Form Button Resize

You can also resize the Contact Form Button in the Editor by dragging the markers on the Button.

contact-form-button-resize.gif

Wide Form Button

Contact forms are often present in Modal Popups. Moreover, many users stretch the Submit Button to 100% of its width. We have added such an option, especially for the Submit Button.

release-wide-form-submit-button.png

Contact Form Responsive Modes

You can modify the size and position of the Contact Form in each Mobile View.

form-responsive.png

The Horizontal Layout Labels automatically move over the Fields in the Responsive Modes for smaller screens.

labels-top-responsive.png

Related

You can use the Contact Form Element to collect website visitors' data. !contact-form.png! You can watch the video lesson about the Contact Form Element. ### <iframe style="width: 96.5%; aspect-ratio: 16 / 9;" src="https://www.youtube.com/embed/Vybeorb3Aeo" title="Nicepage Lessons: Contact Form Element" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> ### ## Add Contact Form Element Add a new Contact Form from the Add Elements list in the Top Menu. !form-add.png! ### Horizontal Form Type You can use the Horizontal Preset for the Contact Form Element. !contact-form-horizontal.png! ## Add Fields To Contact Form Add fields to the Contact Form from the Add Panel. You can add a new field to any position in the Contact Form Element. You can also add Elements to the Contact Form from the Options Menu of the Context Toolbar. !form-add-field.png! Learn more about the [Field Types](page:333311), which you can add to the Contact Form. !form-fields.png! ## Change Field Type You can also change the Field Type in the Contact Form in the Property Panel for the selected Field. !change-field-type.png! ## Contact Form Properties After selecting the Contact Form or Field, you can specify various properties in the Property Panel. ### Contact Form Submit To You can specify the Sumit To options to send Contact Form submissions. Please read more about [Contact Form Submit To Options](page:541255). !form-submit-to-options.png! If you incorrectly set the Submit To options, you will see a warning about the problem during the Publishing. !form-submit-warning.png! ### Field Labels You can enable the Labels on the Contact Form Element in the Property Panel. To switch all Labels, uncheck the Label checkbox for the selected Field. !form-labels.png! ### Label Position In the Property Panel, you can show Labels to the left of the Inputs and switch the layout at any time. !contact-form-label-layout-position.gif! ### Label Spacing When you place your Contact Form Labels to the left, you can modify the Spacing from Labels to Inputs and change the width of the Label Column. !contact-form-label-spacing.png! ## Default Label Values You can see the default values for Contact Form Fields, which are mainly required for some layouts with labels. !contact-form-default-labels.png! ## Contact Form Styling You can set the Fill and Border for the Contact Form Element. !fill-border-contact-form.png! You can also modify the Radius and Shadow properties. Please note that the Radius property is available only if you have Background or Border enabled for your Contact Form. !form-radius-shadow.png! ### Input Styles On Context Toolbar You can style the Contact Form quickly by selecting properties on the Context Toolbar. !style-form-fields-toolbar.png! ### Input Height You can also change the Height of the Input Field. !form-input-height.png! ### Input Radius You can use the Radius property for the Contact Form input Fields. !radius-form-inputs.png! ### Spacing Between Fields You can now set the Spacing between the Contact Form Fields in the Property Panel. !contact-form-field-margins.png! ## Field Style Links You can find the links to styling Properties near the corresponding properties in the Property Panel. !contact-form-improved.png! ## Submit Button You can change the positions of the Submit Button by dragging it left, center, or right. !drag-button.png! You can use the Shadow property on the Contact Form's Button. !shadow-form-button.png! ### Submit Button Left Alignment For the Contact Form layouts with the Labels, the Submit Button Alignment is by the Inputs to the left. !submit-button-left-alignment.png! ### Contact Form Button Resize You can also resize the Contact Form Button in the Editor by dragging the markers on the Button. !contact-form-button-resize.gif! ### Wide Form Button Contact forms are often present in Modal Popups. Moreover, many users stretch the Submit Button to 100% of its width. We have added such an option, especially for the Submit Button. !release-wide-form-submit-button.png! ## Contact Form Responsive Modes You can modify the size and position of the Contact Form in each Mobile View. !form-responsive.png! The Horizontal Layout Labels automatically move over the Fields in the Responsive Modes for smaller screens. !labels-top-responsive.png! ## Related - [Contact Form Field Types](page:333311) - [Contact Form Calculation Field](page:333764) - [Contact Form Conditions](page:340748) - [Contact Form File Upload](page:279718) - [Multi-Step Contact Form](page:364596) - [Contact Form Step Progress](page:395984) - [Put two from fields in a row](page:540306) ##