Summary

• Overview
• Input
• Text Area
• Checkbox
• Dropdown
• List
• Checks
• Radios
• URL
• Country
• Address
• Signature
• Text
• First And Last Names
• Phone
• Date
• Time
• Number & Range
• Image
• Line
• Rating
• Image Gallery
• Recaptcha

Overview

You can use the Contact Form Fields of different types to build the Contact Form on a website.

Input

Use the Input Type to collect Text data.

Text Area

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

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

Checkbox

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

Dropdown & List

The Contact Form Selection can be of two types. You can also choose between the Dropdown or List in the Add Panel.

You can set the Default Item for the Dropdown and List.

Checks

Use the Checks Element to add the Checkbox List to the Contact Form.

Checks Layout

Make the Checkboxes horizontal for the Checks Element of a Contact Form.

Checks Default

You can set the Default Checkbox List Item.

Checkbox Style Panel

Open the Checkbox Style Panel to style the Contact Form Element's Checks and Image Gallery Checks Field properties. You can stylize the Checkbox separately from the Labels.

Radios

Use the Radios Type in the Contact Form Element to preset the options.

Radios Layout

You can place the Radio Buttons horizontally by changing the Layout property in the Property Panel.

Radios Default

You can specify the Default Item for the selected Radios Element in the Property Panel.

Radios Style Panel

Similarly, you can open and stylize the Radios Field on the Radios Style Panel. You can also modify the Style of the Radios Items separately from the Labels.

URL

You can use the URL Field in your Contact Forms to collect the user URL.

Country

You can specify the Country Field for the Contact Form Element.

You can choose the default country.

Address

Use the Multi-Line Address preset to add the Address Fields faster.

Signature

Add the Signature Field, allowing you to request that the visitors sign the provided data. A visitor signs a Contact Form, and his signature will be attached to the submission email.

Text

You can add various texts and headings with Text Element.

First And Last Names

Use the First and last Name Fields for the Contact Form Element to work with the Names more conveniently.

Phone

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

Country Flag For Phone

For the Phone Field of the Contact Form Element, you can now use the Country Code shown as a Flag Icon in the Phone input.

You can set the Default Country property.

Switch Phone Layout

You can switch the Layout to show the Country Code Flag icons in the Property Panel for the selected Phone Field.

Preview Country Flag In Form

Publish or preview the Contact Form with the Phone Field to see the actual work of the Country Code selector.

Date

Select the Date Format for the Contact Form Element Date Field.

Date Calendar

Clicking the Date opens the Calendar on the published site or preview beside the Phone Modes.

Time

You can also add the Time Field to the Contact Form Element.

Current Time

You can also set the Current Time for the Time Field of the Contact Form Element.

Number & Range

You can get the input from your site's visitors as the Number, allowing you to enter the value and fine-tune it by clicking the arrows near it.

You can also add the Contact Form Range Slider, allowing users to provide the numeric input by dragging the Range Slider marker.

Number & Range Layout

If you want to offer your visitors the Range Slider and Number combination, you can switch the Layout in the Property Panel.

Number & Range Properties

You can stylize the Number and Tange Fields by setting the Property Panel properties.

Click on the Groups links in the Property Panel to edit the corresponding Field properties.

Range Step

We have added the Step Property for the Range Field of the Contact Form Element.

Image

Images and illustrations are popular additions to any modern Contact Form. Therefore, we have supported the Image Element for the Contact Form.

Image Alignment

You can align the Image added to the Contact Form.

Image And Text Below Button

You can now move the Image and Text below the Contact From Button by dragging them to the new position under the Button.

Line

You can also add and stylize a Line to separate Elements in the Contact Form.

Rating

Using the Rating Element, you can also collect user reviews with ratings using the Contact Form.

Image Gallery

You can add the Image Gallery to the Contact Form Element. You can help your users choose options visually from a Contact From.

Gallery Images Tab

If you add an Image Gallery selection to the Contact Form, you can click on the Images link in the Property Panel to open the Panel, allowing you to move Images. You can also click on the Image in the Panel to change it.

Gallery Tab Options

You can change the Image and Image item Caption in the Options menu in the Property Panel -> Gallery Image Tab.

Delete the Image from the Gallery by clicking the Bucket icon.

image-gallery-options.png

Recaptcha

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

## Summary - Overview - Input - Text Area - Checkbox - Dropdown - List - Checks - Radios - URL - Country - Address - Signature - Text - First And Last Names - Phone - Date - Time - Number & Range - Image - Line - Rating - Image Gallery - Recaptcha ## Overview You can use the Contact Form Fields of different types to build the Contact Form on a website. ## Input Use the Input Type to collect Text data. !form-input.png! ## Text Area Use the Text Area Field Type to support entering long texts of several lines. Your visitors can press the Enter key while typing the 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! ### Dropdown & List The Contact Form Selection can be of two types. You can also choose between the Dropdown or List in the Add Panel. !form-select-options.png! You can set the Default Item for the Dropdown and List. !default-dropbdown-list.png! ## Checks Use the Checks Element to add the Checkbox List to the Contact Form. !form-checks.png! ### Checks Layout Make the Checkboxes horizontal for the Checks Element of a Contact Form. !checks-layout-horizontal.png! ### Checks Default You can set the Default Checkbox List Item. !checks-default.png! ### Checkbox Style Panel Open the Checkbox Style Panel to style the Contact Form Element's Checks and Image Gallery Checks Field properties. You can stylize the Checkbox separately from the Labels. !checkbox-style-panel.png! ## Radios Use the Radios Type in the Contact Form Element to preset the options. !radio-button.png! ### Radios Layout You can place the Radio Buttons horizontally by changing the Layout property in the Property Panel. !radios-layout-horizontal.png! ### Radios Default You can specify the Default Item for the selected Radios Element in the Property Panel. !radios-default.png! ### Radios Style Panel Similarly, you can open and stylize the Radios Field on the Radios Style Panel. You can also modify the Style of the Radios Items separately from the Labels. !radios-style-panel.png! ## URL You can use the URL Field in your Contact Forms to collect the user URL. !form-url.png! ## Country You can specify the Country Field for the Contact Form Element. !form-country.png! You can choose the default country. !default-country.png! ## Address Use the Multi-Line Address preset to add the Address Fields faster. !form-multi-line-address.png! ## Signature Add the Signature Field, allowing you to request that the visitors sign the provided data. A visitor signs a Contact Form, and his signature will be attached to the submission email. !form-signature.png! ## Text You can add various texts and headings with Text Element. !form-text.png! ## First And Last Names Use the First and last Name Fields for the Contact Form Element to work with the Names more conveniently. !first-last-name-field-preset.png! ## Phone Use the Phone formats for the Phone Field Type. You can also specify the custom pattern. !form-phone.png! ### Country Flag For Phone For the Phone Field of the Contact Form Element, you can now use the Country Code shown as a Flag Icon in the Phone input. !country-code-flag.png! You can set the Default Country property. !default-country.png! ### Switch Phone Layout You can switch the Layout to show the Country Code Flag icons in the Property Panel for the selected Phone Field. !country-code-flag-layout.png! ### Preview Country Flag In Form Publish or preview the Contact Form with the Phone Field to see the actual work of the Country Code selector. !country-code-flag-preview.png! ## Date Select the Date Format for the Contact Form Element Date Field. !date-format.png! ### Date Calendar Clicking the Date opens the Calendar on the published site or preview beside the Phone Modes. !date-calendar.gif! ## Time You can also add the Time Field to the Contact Form Element. !contact-form-time.png! ### Current Time You can also set the Current Time for the Time Field of the Contact Form Element. !current-time-time.png! ## Number & Range You can get the input from your site's visitors as the Number, allowing you to enter the value and fine-tune it by clicking the arrows near it. !contact-form-number.png! You can also add the Contact Form Range Slider, allowing users to provide the numeric input by dragging the Range Slider marker. !contact-form-range.png! ### Number & Range Layout If you want to offer your visitors the Range Slider and Number combination, you can switch the Layout in the Property Panel. !contact-form-range-number.png! ### Number & Range Properties You can stylize the Number and Tange Fields by setting the Property Panel properties. Click on the Groups links in the Property Panel to edit the corresponding Field properties. !range-properties.png! ### Range Step We have added the Step Property for the Range Field of the Contact Form Element. !contact-form-range-step.png! ## Image Images and illustrations are popular additions to any modern Contact Form. Therefore, we have supported the Image Element for the Contact Form. !contact-form-image.png! ### Image Alignment You can align the Image added to the Contact Form. !contact-form-image-alignment.png! ### Image And Text Below Button You can now move the Image and Text below the Contact From Button by dragging them to the new position under the Button. !move-image-below-button.gif! ## Line You can also add and stylize a Line to separate Elements in the Contact Form. !contact-form-line.png! ## Rating Using the Rating Element, you can also collect user reviews with ratings using the Contact Form. !contact-form-rating.png! ## Image Gallery You can add the Image Gallery to the Contact Form Element. You can help your users choose options visually from a Contact From. !contact-form-image-gallery.png! ### Gallery Images Tab If you add an Image Gallery selection to the Contact Form, you can click on the Images link in the Property Panel to open the Panel, allowing you to move Images. You can also click on the Image in the Panel to change it. !contact-form-gallery-image-panel.png! ### Gallery Tab Options You can change the Image and Image item Caption in the **Options** menu in the Property Panel -> **Gallery Image Tab**. Delete the Image from the Gallery by clicking the **Bucket** icon. image-gallery-options.png ## Recaptcha Use Google's [reCAPTCHA](page:61415) technology with your Contact Form to prevent bots from submitting it. The Nicepage Form control uses Google reCAPTCHA v3. !recaptcha.png! ##