Summary
- Overview
- Add Contact Form Element
- Move Contact Form
- Add Fields To Contact Form
- Contact Form Field Types
- Change Element Type
- Submit To Options
- Field Labels
- Submit Button
- Contact Form Styling
- Field Style Links
- Contact Form Submit Warning
- Contact Form Success Message
- Automatic Google Recaptcha
- Required Google Recaptcha Keys
- Contact Form in Responsive Modes
Overview
Use the Contact Form Element to collect visitors' data on your website.
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.
Move Contact Form
Select and drag the whole form by clicking on the Contact Form for the first time.
Add Fields To Contact Form
Add new fields to the Contact Form in the Add Elements -> Contact Form section.
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.
Contact Form Field Types
You can build your Contact Form by adding Fields of different Contact Form Field Types.
Change Element Type
You can change the Field Type in the Contact Form.
Change Element Style
You can use the Property Panel's options to stylize the Contact From inputs. For example, the following example shows how to add underlined styling to the Contact Form's fields.
Submit To Options
Use the Submit options to specify how to send data. You can find those options in the Property Panel for the selected Contact Form.
Several Submission Options
For Contact Forms, you can now set several Submission Services.
- Single-Use services, which include URL, PHP Script, Contact Form 7, Joomla Form, MailChimp, and
- Multiple Use Services to submit data to several Emails and Google Sheets, for example.
Please note that the free Starter and Personal Licenses are limited to one Submission Service plus Leads.
Submit To Leads
The Contact Form Element sends data to Leads and Email by default.
The resulting Submit To panel may look like the following.
Submit To Email
By default, the Contact Form Element works out of the box and sends user submissions to your Account Email. You can change the Email if needed. Read more.
You can click on the Submission option of the Contact Form's Submit To property, for example, the Email, to open this option selected on the Panel. It is convenient since you can have multiple submission services and several emails to submit your Contact Form results.
Submit to Google Sheets
You can submit your form input to Google Sheets. And you can edit the Spreadsheet Name in the Property Panel.
Send Emails With PHP Script
The PHP Script allows sending emails without external resources. Please note that sending emails is performed on the server side. Therefore, you need to have a server configured to send emails. This method also works for the WordPress Plugin and Joomla Extension. Learn more
Submit To URL
The URL Submit property allows submitting the form to any server. If you don't have the exact URL, use some third-party services like formspree.com. It allows collecting form submissions on their server. Learn more
Contact Form 7
Contact Form 7 is a popular plugin for WordPress. Nicepage allows you to submit a form with the CF7 plugin and collect data directly in the WordPress admin area. It also allows you to send emails. If you use Nicepage Plugin for WordPress, Nicepage will create the CF7 form automatically. Learn more
Joomla Form
For Joomla, select the Joomla Form option to send emails using Joomla's built-in send mail functionality. Learn more
MailChimp List
You can fill in a MailChimp List using the Nicepage Contact Form. Learn more
Field Labels
You can enable the Labels on the Contact Form Element in the Property Panel.
You can switch all Labels by unchecking the Label checkbox for the selected Field.
Label Position
You can show Labels to the left of the Inputs and switch the layout at any time in the Property Panel.
The Horizontal Layout Labels automatically move over the Fields in the Responsive Modes for smaller screens.
Label Spacing
When you place your Contact Form Labels to the left, you can modify the Spacing from Labels to Inputs. You can also change the width of the Label Column.
Default Label Values
You can see the default values for Contact Form Fields, 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.
CSS Class For Submit Button
You can access the Contact Form Button with Javascript by setting the CSS Class.
Example code:
<script>
document.addEventListener("DOMContentLoaded", function () {
const btn = document.querySelector('.name1');
btn.addEventListener('click', function (event) {
const answer = prompt('Are you sure?', 'Yes');
if (answer !== 'Yes') {
event.stopImmediatePropagation();
}
});
});
</script>
Wide Form Button
Quite often, there are Contact Forms in Modal Popups. Moreover, many users stretch the Submit Button to 100% of the width of the Contact Form. We have added such an option, especially for the Submit Button.
Contact Form Submit Warning
If you set the Submit option incorrectly for any Contact Form, you will see a warning about the problem.
Contact Form Success Message
You can click the Close icon to close the Success message for the Contact Form on the published website.
Automatic Google Recaptcha
You get Google ReCaptcha automatically while publishing sites from the Desktop Applications and Online Editor. It is enabled if you publish a site having at least one Contact Form.
The automatic ReCaptcha is also used on sites with custom domains published on the Nicepage Network to protect from spam, phishing, and fraudulent activities.
Required Google Recaptcha Keys
While publishing sites with at least one Contact Form with the Email or Google Sheet Submissions, you will see a warning about the required ReCaptcha Keys.
Contact Form in Responsive Modes
You can modify the size and position of the Contact Form in each Mobile View.
![form-responsive.png]()
## Summary
- Overview
- Add Contact Form Element
- Horizontal Form Type
- Move Contact Form
- Add Fields To Contact Form
- Contact Form Field Types
- Change Element Type
- Submit To Options
- Form Submission Options
- Field Labels
- Submit Button
- Contact Form Styling
- Field Style Links
- Contact Form Submit Warning
- Contact Form Success Message
- Automatic Google Recaptcha
- Required Google Recaptcha Keys
- Contact Form in Responsive Modes
## Overview
Use the Contact Form Element to collect visitors' data on your website.
!contact-form.png!
## 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!
## Move Contact Form
Select and drag the whole form by clicking on the Contact Form for the first time.
!contact-form-dragging.gif!
## Add Fields To Contact Form
Add new fields to the Contact Form in the Add Elements -> Contact Form section.
!form-add-fields.png!
You can add a new field to any position in the Contact Form Element.
!form-add-field.png!
You can also add Elements to the Contact Form from the Options Menu of the Context Toolbar.
!add-elements-form-context-toolbar.png!
### Contact Form Field Types
You can build your Contact Form by adding Fields of different [Contact Form Field Types](page:333311).
### Change Element Type
You can change the Field Type in the Contact Form.
!filed-type.png!
### Change Element Style
You can use the Property Panel's options to stylize the Contact From inputs. For example, the following example shows how to add underlined styling to the Contact Form's fields.
!input-underline.png!
## Submit To Options
Use the Submit options to specify how to send data. You can find those options in the Property Panel for the selected Contact Form.
!form-submit-option-indication.png!
### Several Submission Options
For Contact Forms, you can now set several Submission Services.
- **Single-Use** services, which include URL, PHP Script, Contact Form 7, Joomla Form, MailChimp, and
- **Multiple Use** Services to submit data to several Emails and Google Sheets, for example.
Please note that the free Starter and Personal Licenses are limited to one Submission Service plus Leads.
!contact-form-add-provider.png!
### Submit To Leads
The Contact Form Element sends data to Leads and Email by default.
!leads-provider.png!
The resulting Submit To panel may look like the following.
!contact-form-several-providers.png!
### Submit To Email
By default, the Contact Form Element works out of the box and sends user submissions to your Account Email. You can change the Email if needed. [Read more](page:303115).
You can click on the Submission option of the Contact Form's Submit To property, for example, the Email, to open this option selected on the Panel. It is convenient since you can have multiple submission services and several emails to submit your Contact Form results.
!click-email-submit-to.gif!
### Submit to Google Sheets
You can submit your form input to [Google Sheets](page:259344). And you can edit the Spreadsheet Name in the Property Panel.
!edit-spreadsheet-name.png!
### Send Emails With PHP Script
The [PHP Script](page:62334) allows sending emails without external resources. Please note that sending emails is performed on the server side. Therefore, you need to have a server configured to send emails. This method also works for the WordPress Plugin and Joomla Extension. [Learn more](page:62334)
!send-emails-with-php-script.png!
### Submit To URL
The URL Submit property allows submitting the form to any server. If you don't have the exact URL, use some third-party services like formspree.com. It allows collecting form submissions on their server. [Learn more](page:66444)
!submit-form-with-custom-url.png!
### Contact Form 7
Contact Form 7 is a popular plugin for WordPress. Nicepage allows you to submit a form with the CF7 plugin and collect data directly in the WordPress admin area. It also allows you to send emails. If you use Nicepage Plugin for WordPress, Nicepage will create the CF7 form automatically. [Learn more](page:66439)
!send-emails-with-contact-form-7.png!
### Joomla Form
For Joomla, select the [Joomla Form](page:66443) option to send emails using Joomla's built-in send mail functionality. [Learn more](page:66443)
!configure-joomla-mail-settings-for-sending-emails.png!
### MailChimp List
You can fill in a [MailChimp List](page:2468) using the Nicepage Contact Form. [Learn more](page:2468)
!submit-form-to-fill-mailchimp-list-and-send-emails.png!
## Field Labels
You can enable the Labels on the Contact Form Element in the Property Panel.
!contact-form-field-label.gif!
You can switch all Labels by unchecking the Label checkbox for the selected Field.
!show-labels.png!
### Label Position
You can show Labels to the left of the Inputs and switch the layout at any time in the Property Panel.
!contact-form-label-layout-position.gif!
The Horizontal Layout Labels automatically move over the Fields in the Responsive Modes for smaller screens.
!labels-top-responsive.png!
### Label Spacing
When you place your Contact Form Labels to the left, you can modify the Spacing from Labels to Inputs. You can also 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, 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!
### CSS Class For Submit Button
You can access the Contact Form Button with Javascript by setting the CSS Class.
!css-class-form-button.png!
Example code:
<pre style="padding: 10px 20px; background: #f0f0f0; font-family: Courier; border-radius: 4px;">
<script>
document.addEventListener("DOMContentLoaded", function () {
const btn = document.querySelector('.name1');
btn.addEventListener('click', function (event) {
const answer = prompt('Are you sure?', 'Yes');
if (answer !== 'Yes') {
event.stopImmediatePropagation();
}
});
});
</script>
</pre>
### Wide Form Button
Quite often, there are Contact Forms in Modal Popups. Moreover, many users stretch the Submit Button to 100% of the width of the Contact Form. We have added such an option, especially for the Submit Button.
!release-wide-form-submit-button.png!
## Contact Form Submit Warning
If you set the Submit option incorrectly for any Contact Form, you will see a warning about the problem.
!form-submit-warning.png!
## Contact Form Success Message
You can click the Close icon to close the Success message for the Contact Form on the published website.
!close-success-message.png!
## Automatic Google Recaptcha
You get Google ReCaptcha automatically while publishing sites from the Desktop Applications and Online Editor. It is enabled if you publish a site having at least one Contact Form.
!automatic-google-recaptcha.png!
The automatic ReCaptcha is also used on sites with **custom domains** published on the Nicepage Network to protect from spam, phishing, and fraudulent activities.
!recaptcha-custom-domain.png!
## Required Google Recaptcha Keys
While publishing sites with at least one Contact Form with the Email or Google Sheet Submissions, you will see a warning about the required ReCaptcha Keys.
!recaptcha-warning.png!
## Contact Form in Responsive Modes
You can modify the size and position of the Contact Form in each Mobile View.
!form-responsive.png!
##
