You can use the Contact Form Element to collect website visitors' data.
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.
Horizontal Form Type
You can use the Horizontal Preset for the Contact Form Element.
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.
Learn more about the Field Types, which you can add to the Contact Form.
Change Field Type
You can also change the Field Type in the Contact Form in the Property Panel for the selected Field.
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.
If you incorrectly set the Submit To options, you will see a warning about the problem during the Publishing.
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.
Label Position
In the Property Panel, you can show Labels to the left of the Inputs and switch the layout at any time.
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.
Default Label Values
You can see the default values for Contact Form Fields, which are mainly required for some layouts with labels.
Contact Form Styling
You can set the Fill and Border for the Contact Form Element.
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.
Input Styles On Context Toolbar
You can style the Contact Form quickly by selecting properties on the Context Toolbar.
Input Height
You can also change the Height of the Input Field.
Input Radius
You can use the Radius property for the Contact Form input Fields.
Spacing Between Fields
You can now set the Spacing between the Contact Form Fields in the Property Panel.
Field Style Links
You can find the links to styling Properties near the corresponding properties in the Property Panel.
Submit Button
You can change the positions of the Submit Button by dragging it left, center, or right.
You can use the Shadow property on the Contact Form's Button.
Submit Button Left Alignment
For the Contact Form layouts with the Labels, the Submit Button Alignment is by the Inputs to the left.
Contact Form Button Resize
You can also resize the Contact Form Button in the Editor by dragging the markers on the Button.
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.
Contact Form Responsive Modes
You can modify the size and position of the Contact Form in each Mobile View.
The Horizontal Layout Labels automatically move over the Fields in the Responsive Modes for smaller screens.
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)
##
