Summary

  • Overview
  • Adding Contact Form
  • Submit Options
    • URL
    • Send Email with PHP Script
    • Contact Form 7
    • Joomla Form
    • Mailchimp
    • Email
    • reCAPTCHA
  • Fields
    • Adding Form Fields
    • Change Field Type
    • Field styling
  • Text
  • Text Area
  • Custom Text
  • Checkbox
  • Select
  • Radio Button
  • Phone and Mask
  • Submit Button
  • Contact Form Styling
  • Contact Form in Mobile Views

Contact Form Overview

Use the Contact Form Element to collect visitor's data on your website.

contact-form.png

Adding Contact Form

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

form-add.png

Submit 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-options.png

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

submit-form-with-custom-url.png

Send Emails with PHP Script

The PHP Script allows sending emails without using 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

send-emails-with-php-script.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 are using Nicepage Plugin for WordPress, Nicepage will create the CF7 form automatically. Learn more

send-emails-with-contact-form-7.png

Joomla Form

For Joomla, select the Joomla Form option to send emails using Joomla built-in send mail functionality. Learn more

configure-joomla-mail-settings-for-sending-emails.png

MailChimp List

You can fill in a MailChimp List using the Nicepage Contact Form. Learn more

submit-form-to-fill-mailchimp-list-and-send-emails.png

reCAPTCHA

Use Google's reCAPTCHA technology with your Contact Form to prevent it from submitting by bots. The Nicepage Form control uses Google reCAPTCHA v3.

recaptcha.png

Fields

Adding Form Fields

You can 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

Change Field Type

You can change the Field Type in the Contact Form.

filed-type.png

Field Styling

You can use the Property Panel's options to stylize the Contact From inputs. For example, the following example shows how to add underline styling to the Contact Form's fields.

input-underline.png

Text

Use the Text Type to collect Text data.

form-input.png

Text Area

Use the Text Area Field Type to support the entering of long texts of several lines. Your visitors can press the Enter key while typing text.

text-area.png

Use the Rows property to specify the number of rows for the Text Area Field. It is four by default.

text-area-rows.png

Checkbox

Use the Checkbox Field Type to allow visitors to check in the Contact Form Element.

checkbox.png

Select

Use the Select Type for the Contact Form Field. You can also choose between the Drop-Down or List Views.

form-select-field-type.png

Radio Button

Use the Radio Button Field Type in the Contact Form Element to preset the options.

radio-button.png

Phone Mask

Use the Phone formats for the Phone Field Type. You can also specify the custom pattern.

form-phone.png

Submit Button

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

drag-button.png

Wide Form Button

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

release-wide-form-submit-button.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

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 - Adding Contact Form - Submit Options - URL - Send Email with PHP Script - Contact Form 7 - Joomla Form - Mailchimp - Email - reCAPTCHA - Fields - Adding Form Fields - Change Field Type - Field styling - Text - Text Area - Custom Text - Checkbox - Select - Radio Button - Phone and Mask - Submit Button - Contact Form Styling - Contact Form in Mobile Views ## Contact Form Overview Use the Contact Form Element to collect visitor's data on your website. !contact-form.png! ## Adding Contact Form Add a new Contact Form from the Add Elements list in the Top Menu. !form-add.png! ## Submit 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-options.png! ### [URL](page:66444) 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! ### [Send Emails with PHP Script](page:62334) The [PHP Script](page:62334) allows sending emails without using 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! ### [Contact Form 7](page:66439) 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 are using Nicepage Plugin for WordPress, Nicepage will create the CF7 form automatically. [Learn more](page:66439) !send-emails-with-contact-form-7.png! ### [Joomla Form](page:66443) For Joomla, select the [Joomla Form](page:66443) option to send emails using Joomla built-in send mail functionality. [Learn more](page:66443) !configure-joomla-mail-settings-for-sending-emails.png! ### [MailChimp List](page:2468) 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! ### [reCAPTCHA](page:61415) Use Google's [reCAPTCHA](page:61415) technology with your Contact Form to prevent it from submitting by bots. The Nicepage Form control uses Google reCAPTCHA v3. !recaptcha.png! ## Fields ### Adding Form Fields You can 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! ### Change Field Type You can change the Field Type in the Contact Form. !filed-type.png! ### Field Styling You can use the Property Panel's options to stylize the Contact From inputs. For example, the following example shows how to add underline styling to the Contact Form's fields. !input-underline.png! ## Text Use the Text Type to collect Text data. !form-input.png! ## Text Area Use the Text Area Field Type to support the entering of long texts of several lines. Your visitors can press the Enter key while typing text. !text-area.png! Use the Rows property to specify the number of rows for the Text Area Field. It is four by default. !text-area-rows.png! ## Checkbox Use the Checkbox Field Type to allow visitors to check in the Contact Form Element. !checkbox.png! ## Select Use the Select Type for the Contact Form Field. You can also choose between the Drop-Down or List Views. !form-select-field-type.png! ## Radio Button Use the Radio Button Field Type in the Contact Form Element to preset the options. !radio-button.png! ## Phone Mask Use the Phone formats for the Phone Field Type. You can also specify the custom pattern. !form-phone.png! ## Submit Button You can change the positions of the Submit Button by dragging it left, center, or right. !drag-button.png! ### Wide Form Button Quite often, there are Contact Forms in Modal Popups. Moreover, many users stretch the Submit Button to the 100% width of the Contact Form. We have added such an option, especially for the Submit Button. !release-wide-form-submit-button.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! ## Contact Form in Responsive Modes You can modify the size and position of the Contact Form in each Mobile View. !form-responsive.png! ##