Documentation

All you need to know about Green Forms

Intro

Disclaimer

We are constantly improving our script by adding new features and fixing bugs. Please keep the script updated and always use latest version. This documentation is related to actual version of the plugin, so don't forget to check it from time to time.
  • Initial release: January 15th, 2019
  • Latest update: November 12th, 2019
  • Version: 1.22

Back To Top

Requirements

Your server must match the following requirements. All modern servers already do it.
  • PHP version 5.5 or higher.
  • MySQL version 5.0 or higher.
Your WordPress-driven website and server must match the following requirements.
  • WordPress version 4.2 or higher.
  • PHP version 5.5 or higher.
  • MySQL version 5.0 or higher.

Back To Top

Installation

We created Wizard which helps to install script properly.
  1. Unpack downloaded archive and upload files to your server.
  2. Open it in your browser – Wizard will be launched automatically.
  3. Wizard ask for couple questions. Nothing special – MySQL parameters and admin credentials to access Admin Panel.
  4. Once finished, go to Dashboard and click “Green Forms” box under “Installed Plugins” section. It activates the plugin.
  5. Once activated, plugin adds relevant item to Left Side Menu.
  6. Find “How To Use” submenu. It explains how to embed plugin into your wesbite – nothing difficult, just paste couple JS/HTML-snippets.
Green Forms is a WordPress plugin and it is installed as regular WordPress plugin:
  1. Go to WordPress dashboard and click left side menu "Plugins >> Add New".
  2. Click "Upload" link and upload zip-archive downloaded from CodeCanyon.
  3. Activate uploaded plugin.
If you have any difficulties with uploading zip-archive, please do it manually using FTP:
  1. Use any FTP-client to connect your server.
  2. Unzip archive downloaded from CodeCanyon.
  3. Upload unzipped folder to plugins directory: /wp-content/plugins/
  4. Go to WordPress dashboard, click left side menu "Plugins" and activate uploaded plugin.
Once installed and activated, plugin creates "Green Forms" menu section in left side menu. All further actions, related to plugin functionality, are done through this menu section.

Back To Top

Updates

Updating the script is a manual procedure. It's pretty simple. Don't worry.
  1. Download latest version of the script from CodeCanyon.
  2. Overwrite existing files on your server, except file /inc/config.php and folder /content/data/.
You won't lose forms and settings. They are stored in MySQL database.
There are 2 ways to update the plugin.
  • Automatic update. To enable this feature you need put Item Purchase Code on Settings page (at the bottom). After that, updates will be pulled from our servers automatically. If for some reasons your server can not connect to update server, please do manual update.
  • Manual update. Download latest version of the plugin from CodeCanyon and overwrite exiting files in folder /wp-content/plugins/halfdata-green-forms/ by new ones.
You won't lose forms and settings. They are stored in MySQL database.

Back To Top

Settings

General Settings

General Settings can be reached through menu "Green Forms >> Settings".

Mailing Settings

All email messages sent by script use the following parameters for "FROM:" header. You also can override these parameters for certain form, if required.
  • Sender Name. All messages from the script are sent using this name as "FROM:" header value.
  • Sender Email. All messages from the script are sent using this email address as "FROM:" header value.

Miscellaneous

  • GA Tracking. Enable this option to send form submission event to Google Analytics. Google Analytics must be installed on your website. If you use Google Tags Manager, please configure it properly to accept events.
  • Font Awesome. Enable this option if you want to use full set of Font Awesome icons. Otherwise, limited set of icons is used (for better performance). If your site already loads Font Awesome, you can enable relevant option to avoid double loading of the same library.
  • Air Datepicker plugin. Enable this option if you want to use nice datepicker (Air Datepicker) with date and time fields. If your site already loads Air Datepicker, you can enable relevant option to avoid double loading of the same plugin.
  • jQuery Mask plugin. For some type of form elements you can use input masks. This feature is driven by jQuery Mask plugin. Enabling it, allows you to set certain input mask for input fields. If your site already loads jQuery Mask plugin, you can enable relevant option to avoid double loading of the same library.
  • JavaScript Expression Parser. Enable this feature if you want to show result of math expressions in real-time. If your site already loads JavaScript Expression Parser, you can enable relevant option to avoid double loading of the same plugin.
  • Signature Pad plugin. Enable this feature if you want to use signature pad with forms. If your site already loads Signature Pad plugin, you can enable relevant option to avoid double loading of the same plugin.
  • Ion.RangeSlider plugin. Enable this feature if you want to use range slider with forms. If your site already loads Ion.RangeSlider plugin, you can enable relevant option to avoid double loading of the same plugin.
  • Tooltipster plugin. Enable this feature if you want to use nice tooltips with forms. If your site already loads Tooltipster plugin, you can enable relevant option to avoid double loading of the same plugin.
  • CSV separator. Select CSV separator.
  • Email validation. Please select the type of email validation. For more details please read chapter Email Validation Settings.

AWeber Connection

This section appears if you activated AWeber Integration module (read Plugin Modules paragraph regarding enabling/disabling modules). In this section you can connect website with your AWeber account. After successful connection, you can configure integration on Form Settings window, Integrations tab.

Zoho CRM Connection

This section appears if you activated Zoho CRM Integration module (read Plugin Modules paragraph regarding enabling/disabling modules). In this section you can connect website with your Zoho CRM account. After successful connection, you can configure integration on Form Settings window, Integrations tab.

Item Purchase Code

To activate your license please enter Item Purchase Code. Where can I find my Purchase Code?

Back To Top

Advanced Settings

Advanced plugin settings can be reached through menu "Green Forms >> Settings", tab Advanced.

Plugin Modules

Plugin has modular architecture. It easily allows you to enable/disable certain functionality. For example, if you need MailChimp integration or accept payments via PayPal, just activate appropriate module and configure it on form editor. Actual version of the plugin has the following basic modules:
  • Custom JavaScript Handler. Turn this module on if you want to use custom JavaScript event handlers for forms. After activation you can configure them on form editor.
  • 3rd party HTML form. Turn this module on if you want to re-submit form data as a part of 3rd party HTML form. After activation you can configure integration on form editor.
  • Custom GET/POST. Turn this module on if you want to re-submit form data to 3rd party URL using GET or POST request. After activation you can configure integration on form editor.
  • 3rd party MySQL. Turn this module on if you want to insert form data into 3rd party MySQL table. After activation you can configure integration on form editor.
Actual version of the plugin has the following default marketing, newsletter and CRM modules:
  • Acelle Mail. Turn this module on if you want to submit form data to Acelle Mail. This module uses Acelle Mail API. After activation you can configure integration on form editor.
  • ActiveCampaign. Turn this module on if you want to submit form data to ActiveCampaign. This module uses ActiveCampaign API. After activation you can configure integration on form editor.
  • ActiveTrail. Turn this module on if you want to submit form data to ActiveTrail. This module uses ActiveTrail API. After activation you can configure integration on form editor.
  • AgileCRM. Turn this module on if you want to submit form data to AgileCRM. This module uses AgileCRM API. After activation you can configure integration on form editor.
  • AvangEmail. Turn this module on if you want to submit form data to AvangEmail. This module uses AvangEmail API. After activation you can configure integration on form editor.
  • AWeber. Turn this module on if you want to submit form data to AWeber. This module uses AWeber API. After activation connect to AWeber on General Settings page and configure integration on form editor.
  • BirdSend. Turn this module on if you want to submit form data to BirdSend. This module uses BirdSend API. After activation you can configure integration on form editor.
  • Bitrix24. Turn this module on if you want to submit form data to Bitrix24. This module uses Bitrix24 API. After activation you can configure integration on form editor.
  • Campaign Monitor. Turn this module on if you want to submit form data to Campaign Monitor. This module uses Campaign Monitor API. After activation you can configure integration on form editor.
  • CleverReach. Turn this module on if you want to submit form data to CleverReach. This module uses CleverReach REST API. After activation you can configure integration on form editor.
  • Conversio. Turn this module on if you want to submit form data to Conversio. This module uses Conversio API. After activation you can configure integration on form editor.
  • Drip. Turn this module on if you want to submit form data to Drip. This module uses Drip API. After activation you can configure integration on form editor.
  • FreshMail. Turn this module on if you want to submit form data to FreshMail. This module uses FreshMail API. After activation you can configure integration on form editor.
  • GetResponse. Turn this module on if you want to submit form data to GetResponse. This module uses GetResponse API. After activation you can configure integration on form editor.
  • HubSpot. Turn this module on if you want to submit form data to HubSpot. This module uses HubSpot API. After activation you can configure integration on form editor.
  • Jetpack Subscriptions. Turn this module on if you want to submit form data to Jetpack Subscriptions. (This module is available for WordPress version only). After activation you can configure integration on form editor.
  • Klaviyo. Turn this module on if you want to submit form data to Klaviyo. This module uses Klaviyo API. After activation you can configure integration on form editor.
  • Mad Mimi. Turn this module on if you want to submit form data to Mad Mimi. This module uses Mad Mimi API. After activation you can configure integration on form editor.
  • Mailautic. Turn this module on if you want to submit form data to Mailautic. This module uses Mailautic API. After activation you can configure integration on form editor.
  • MailChimp. Turn this module on if you want to submit form data to MailChimp. This module uses MailChimp API. After activation you can configure integration on form editor.
  • MailerLite. Turn this module on if you want to submit form data to MailerLite. This module uses MailerLite API. After activation you can configure integration on form editor.
  • Mailjet. Turn this module on if you want to submit form data to Mailjet. This module uses Mailjet API. After activation you can configure integration on form editor.
  • MailPoet. Turn this module on if you want to submit form data to MailPoet. (This module is available for WordPress version only). After activation you can configure integration on form editor.
  • Mailster. Turn this module on if you want to submit form data to Mailster. (This module is available for WordPress version only). After activation you can configure integration on form editor.
  • MailWizz. Turn this module on if you want to submit form data to MailWizz. This module uses MailWizz API. After activation you can configure integration on form editor.
  • Moosend. Turn this module on if you want to submit form data to Moosend. This module uses Moosend API. After activation you can configure integration on form editor.
  • Mumara. Turn this module on if you want to submit form data to Mumara. This module uses Mumara API. After activation you can configure integration on form editor.
  • Omnisend. Turn this module on if you want to submit form data to Omnisend. This module uses Omnisend API. After activation you can configure integration on form editor.
  • Ontraport. Turn this module on if you want to submit form data to Ontraport. This module uses Ontraport API. After activation you can configure integration on form editor.
  • Rapidmail. Turn this module on if you want to submit form data to Rapidmail. This module uses Rapidmail API. After activation you can configure integration on form editor.
  • SalesAutoPilot. Turn this module on if you want to submit form data to SalesAutoPilot. This module uses SalesAutoPilot API. After activation you can configure integration on form editor.
  • SendFox. Turn this module on if you want to submit form data to SendFox. This module uses SendFox API. After activation you can configure integration on form editor.
  • Sendy. Turn this module on if you want to submit form data to Sendy. This module uses Sendy API. After activation you can configure integration on form editor.
  • Zapier. Turn this module on if you want to submit form data to Zapier. This module uses Zapier Webkooks App. After activation you can configure integration on form editor.
  • Zoho CRM. Turn this module on if you want to submit form data to Zoho CRM. This module uses Zoho CRM API. After activation connect to Zoho CRM on General Settings page and configure integration on form editor.
Actual version of the plugin has the following payment provider modules:
  • Authorize.Net. Turn this module on if you want to accept payments via Authorize.Net (accept USD only). After activation you can configure payment gateway on form editor.
  • Blockchain. Turn this module on if you want to accept bitcoin payments via Blockchain. After activation you can configure payment gateway on form editor.
  • InterKassa. Turn this module on if you want to accept payments via InterKassa. After activation you can configure payment gateway on form editor.
  • Mollie. Turn this module on if you want to accept payments via Mollie. After activation you can configure payment gateway on form editor.
  • PayFast. Turn this module on if you want to accept payments via PayFast. After activation you can configure payment gateway on form editor.
  • PayPal. Turn this module on if you want to accept payments via PayPal. After activation you can configure payment gateway on form editor.
  • Paystack. Turn this module on if you want to accept payments via Paystack (accept NGN only). After activation you can configure payment gateway on form editor.
  • Perfect Money. Turn this module on if you want to accept payments via Perfect Money. After activation you can configure payment gateway on form editor.
  • Skrill. Turn this module on if you want to accept payments via Skrill. After activation you can configure payment gateway on form editor.
  • Stripe. Turn this module on if you want to accept credit/debit cards via Stripe. After activation you can configure payment gateway on form editor.
  • WePay. Turn this module on if you want to accept credit/debit cards via WePay. After activation you can configure payment gateway on form editor.
  • Yandex.Money. Turn this module on if you want to accept payments via Yandex.Money. After activation you can configure payment gateway on form editor.
Actual version of the plugin has the following SMS gateway modules:
  • BulkGate. Turn this module on if you want to submit form data to BulkGate. This module uses BulkGate API. After activation you can configure integration on form editor.
  • GatewayAPI. Turn this module on if you want to submit form data to GatewayAPI. This module uses GatewayAPI API. After activation you can configure integration on form editor.
  • Nexmo. Turn this module on if you want to submit form data to Nexmo. This module uses Nexmo API. After activation you can configure integration on form editor.
  • Twilio. Turn this module on if you want to submit form data to Twilio. This module uses Twilio API. After activation you can configure integration on form editor.
Actual version of the plugin has the following 3rd party Email Validation modules:
  • Clearout. Turn this module on if you want to validate email addresses through Clearout. This module uses Clearout API. After activation you can configure integration on General Settings.
  • Kickbox. Turn this module on if you want to validate email addresses through Kickbox. This module uses Kickbox API. After activation you can configure integration on General Settings.
  • TheChecker. Turn this module on if you want to validate email addresses through TheChecker. This module uses TheChecker API. After activation you can configure integration on General Settings.
  • TrueMail. Turn this module on if you want to validate email addresses through TrueMail. This module uses TheChecker API. After activation you can configure integration on General Settings.

Miscellaneous

  • Minification. Turn this feature on if you want to load minified version of CSS and JS files.

Back To Top

Email Validation Settings

Green Forms has various ways to validate email addresses submitted by users. You can configure this feature on General Settings page under Miscellaneous section. Below you can find list of supported methods.
  • Basic. Check the validity of email address syntax.
  • Advanced. Check the validity of email address syntax and MX record of domain.
  • Clearout. Email address is checked using Clearout service. To enable this feature, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate Clearout Integration module. Return to General Settings and select Clearout as email validation method. Don't forget to set Clearout API Token. You can find it in the Profile.
  • Kickbox. Email address is checked using Kickbox service. To enable this feature, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate Kickbox Integration module. Return to General Settings and select Kickbox as email validation method. Don't forget to set Kickbox API Key. You can find it in the API Keys.
  • TheChecker. Email address is checked using TheChecker service. To enable this feature, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate TheChecker Integration module. Return to General Settings and select TheChecker as email validation method. Don't forget to set TheChecker API Key. You can find it in the API Details.
  • TrueMail. Email address is checked using TrueMail service. To enable this feature, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate TrueMail Integration module. Return to General Settings and select TrueMail as email validation method. Don't forget to set TrueMail API Key. You can find it in the API Keys.
Selected validation method will be used for all Email Validators used with specified input fields.

Back To Top

Creating A New Form

Form Builder

Plugin goes with easy-to-use drag-n-drop form builder. To start creating a new form just click "Create From" in Left Side Menu. You will be prompted to enter a name for the new form, once you’ve done so click "Create New Form" button to continue. You can then start adding elements and configuring the form.
Form Builder consists of several tool bars (top toolbar, pages/steps toolbar, form elements toolbar) and "construction area".

Top toolbar

Top toolbar contains the following buttons (from left to right):
  • Form Settings (). This button opens "Form Settings" window. It has hundreds adjustable parameters related to general form functionality, design, notifications, integrations, etc. All of them are described in this documentation. Just scroll down to appropriate section.
  • How To Use (). This button opens "How To Use" window. There you can find all possible ways of using of the from (inline, popups, etc.).
  • Preview (). Click this button if you want preview the form before publishing it on the website. Important! Notifications and Integrations don't work in preview mode. Preview mode is used to check form design only.
  • Save ( Save). Click this button to save the changes.

Pages/steps Toolbar

This bar is used to build multi-pages (multi-steps) forms. By clicking button Add Page you can add as many pages/steps as you want.
There is one special page/step which always exists from the beginning - Confirmation. The content of this page/step is displayed when users successfully submit the form. Importnat! This is not the only way to inform users about successful form submission. For more options please visit the chapter below.

Form Elements Toolbar

This toolbar contains form element icons. If you want to add some element to the form (for example, input field or button or something else), just click relevant icon and new element will be added. Then you can move new element into desired position and configure it. Following elements can be added to the form:
  • - Text Input Field
  • - Email Input Field
  • - Numeric Input Field
  • - Numeric Spinner
  • - Textarea
  • - Select Box (Drop-down List)
  • - Checkbox
  • - Radio Button
  • - Multiselect List
  • - Image Select
  • - Tile
  • - Date Picker
  • - Time Picker
  • - File Upload
  • - Password
  • - Star Rating
  • - Signature Field
  • - Range Slider
  • - Hidden Field
  • - Submit Button
  • - Column Layouts
  • - HTML Content
  • - Link Button
The properties of each element are described in details in chapter "Form Elements".

Construction Area

This is an area of Form Builder where you create the form. If you want to add some element to the form (for example, input field or button or something else), just click relevant icon on Form Elements Toolbar and new element will be added. Use mouse to move element into desired position. Each element has context menu, just do right click over it. Context Menu contains the following items:
  • Properties. Click it to open "Element Properties" window. Each form element has dozens properties that you can change. For more details regarding properties, please read appropriate chapter.
  • Duplicate. Create exact copy (including all properties) of the element.
  • Delete. Delete the element.

Back To Top

Form Settings

Form Settings

The Form Settings window appears when you click button on Top Toolbar. It has hundreds adjustable parameters related to general form functionality, design, notifications, integrations, etc. All of them are described in this documentation. Form Settings Window looks like below:

Back To Top

General Settings

Click button on Top Toolbar and select "General" tab. It contains the following general form settings:
  • Name. The name is used for your convenience. It helps to identify the form on the site.
  • Active. Inactive forms will not appear on the site even if you inserted into pages. It allows to disable the form globally.
  • Key fields. This is 2 main fields of the form. Values of these fields are displayed on Log page in relevant columns. It helps to identify submitted form record without opening its full details.
  • Date and time parameters. Choose the date/ time formats and language for datetimepicker. It is used for "date" and "time" fields.
  • Cross-domain calls. Enable this option if you want to use cross-domain embedding, i.e. plugin installed on domain1, and form is used on domain2. Due to security reasons this feature is automatically disabled if the form has Signature field.
  • Sessions. Activate this option if you want to enable sessions for the form. Session allows to keep non-completed form data, so user can continue form filling when come back. You also can set session length. Important! (1) Session doesn't keep value of "Signature" field and "File Upload" field. (2) Session data is saved as cookies.

Back To Top

Style Settings

Click button on Top Toolbar and select Style tab. It contains a lot of style settings grouped by categories.

Global Style Settings

This category contains global parameters of the form:
  • Theme. If you don't have time to customize form style, just load one of existing themes. You can adjust any theme and save it as user theme for later use. You also can import/export any of them to use it with other plugin installation.
  • Text style. Adjust the style (font, color, size, etc.) of the text that appears in your form.
  • Wrapper background. Adjust the background style of the form. You can use separate settings for inline and for popup modes.
  • Wrapper border. Adjust the border style of the form. You can use separate settings for inline and for popup modes.
  • Wrapper shadow. Adjust the shadow style of the form. You can use separate settings for inline and for popup modes.
  • Padding. Adjust the padding of the form. You can use separate settings for inline and for popup modes.
  • Overlay color. Adjust the overlay color when the form is used in popup mode.
  • Close icon colors. Adjust colors of the close icon when the form is used in popup mode.
  • Spinner colors. Adjust colors of the spinner when the form is used in popup mode.
  • Tooltip anchor. Select the anchor for tooltips.
  • Tooltip theme. Select the theme of tooltips. This parameter is available if your enabled Tooltipster plugin on General Settings page.
  • Form width. Specify the maximum form width and its alignment. Leave this field empty to set maximum form width as 100%.
  • Element spacing. Specify the spacing between form elements.
  • Responsiveness. At what form width should column layouts be stacked.

Label Style Settings

Here you can configure the style of labels and descriptions. To understand what is label and what is description please look at image below. Green text is label, red text is description.
  • Label text style. Adjust the style (font, color, size, etc.) of labels. These parameters override "Text style" parameters from "Global Style Settings" category.
  • Label position. Specify where to display the label relative to the field.
  • Description text style. Adjust the style (font, color, size, etc.) of descriptions. These parameters override "Text style" parameters from "Global Style Settings" category.
  • Description position. Specify where to display the description relative to the field.
  • "Required" symbol/text position. Select the position of "required" symbol/text. The symbol/text is displayed for fields that are configured as "Required".
  • "Required" symbol/text. The symbol/text is displayed for fields that are configured as "Required".
  • "Required" symbol/text style. Adjust the style (font, color, size, etc.) of "required" symbol/text.

Input Field Style Settings

This category contains parameters to adjust the style of input fields.
  • Input size. Choose the size of input fields.
  • Icon style. Adjust the style (size, color, position) of input field icons.
  • Textarea height. Set the height of textarea fields.
  • Input text. Adjust the text style (font, color, size, etc.) of input fields. You can do it for different input states (normal, hover, focus). These parameters override "Text style" parameters from "Global Style Settings" category.
  • Input background. Adjust the background style of input fields. You can do it for different input states (normal, hover, focus).
  • Input border. Adjust the border style of input fields. You can do it for different input states (normal, hover, focus).
  • Input shadow. Adjust the shadow style of input fields. You can do it for different input states (normal, hover, focus).
  • Checkbox and radio style. Choose how to display checkbox and radio button fields and their captions.
  • Checkbox view. Choose the checkbox view.
  • Radio button view. Choose the radio button view.
  • Image Select style. Adjust image alignment and effect.
  • Image label. Adjust the text style (font, color, size, etc.) of image label. These parameters override "Text style" parameters from "Global Style Settings" category.
  • Image border. Adjust the border style of images. You can do it for different states (normal, hover, selected).
  • Image shadow. Adjust the shadow style of images. You can do it for different states (normal, hover, selected).
  • Multiselect style. Choose how to display multiselect options.
  • Tile style. Adjust the tile style.
  • Tile text. Adjust the text style (font, color, size, etc.) of tiles. You can do it for different input states (normal, hover, selected). These parameters override "Text style" parameters from "Global Style Settings" category.
  • Tile background. Adjust the background style of tiles. You can do it for different input states (normal, hover, selected).
  • Tile border. Adjust the border style of tiles. You can do it for different input states (normal, hover, selected).
  • Tile shadow. Adjust the shadow style of tiles. You can do it for different input states (normal, hover, selected).
  • Range slider skin. Select the skin of range slider. This parameter is available if your enabled Ion.RangeSlider plugin on General Settings page.
  • Range slider colors. Adjust colors of range slider. This parameter is available if your enabled Ion.RangeSlider plugin on General Settings page.

Button Style Settings

This category contains parameters to adjust the style of buttons.
  • Button style. Adjust the button size and position.
  • Button text. Adjust the text style (font, color, size, etc.) of buttons. You can do it for different button states (normal, hover, active). These parameters override "Text style" parameters from "Global Style Settings" category.
  • Button background. Adjust the background style of buttons. You can do it for different button states (normal, hover, active).
  • Button border. Adjust the border style of buttons. You can do it for different button states (normal, hover, active).
  • Button shadow. Adjust the shadow style of buttons. You can do it for different button states (normal, hover, active).

Error Bubble Style Settings

If user submit wrong data through certain input field, the error bubble is displayed for this field. In this category you can configure the view of the bubble.
  • Bubble background. Adjust the background of error bubbles.
  • Error text style. Adjust the text style (font, color, size, etc.) of errors. These parameters override "Text style" parameters from "Global Style Settings" category.

Progress Bar Settings

In case of using multi-page (multi-step) forms, you can enable progress bar. In this category you can configure the view of the progress bar.
  • Enable progress bar. If your form the form has several pages/steps, it is recommended to display progress bar for better user experience.
  • Progress style. Select the general view of progress bar.
  • Colors. Adjust colors of progress bar.
  • Double-tone stripes. Add double-tone diagonal stripes to progress bar.
  • Show page name. Show page name.
  • Include confirmation page. Consider Confirmation page as part of total pages and include it into progress bar.
  • Position. Select the position of progress bar. It can be inside or outside of main form wrapper.

Back To Top

Confirmation Settings

Confirmation is an action that is executed on front-side when form successfully submitted. By default it is a displaying of special page/step which is called "Confirmation". You can see and edit this page by clicking Confirmation on Pages/steps Toolbar.
If you need more specific action, click button on Top Toolbar and select "Confirmations" tab. There you can customize confirmation and use conditional logic. There are several action to select:
  • Display Confirmation page. It is the same action as by default, but you also can apply conditional logic to this action and reset form to default state, if required.
  • Display Confirmation page and redirect to certain URL. The same as above, but after specified number of seconds user will be redirected to specific URL.
  • Display Confirmation page and request payment. The same as above, but after specified number of seconds user will be requested to complete payment.
  • Display Message. The message is displayed below the form. It stays visible during specified number of seconds and then disappears.
  • Display Message and redirect to certain URL. The message is displayed below the form. It stays visible during specified number of seconds and then user will is redirected to specific URL.
  • Display Message and request payment. The message is displayed below the form. It stays visible during specified number of seconds and then user will is requested to complete payment.
  • Redirect to certain URL. User is redirected to specific URL immediately.
  • Request payment. User is requested to complete payment immediately.
You can apply conditional logic to each action. This means that this action will be performed only if the data submitted by the user meets certain criteria.
Important! If several confirmations match form conditions, the first one (higher priority) will be applied. So, you can use mouse to re-order multiple confirmations.

Back To Top

Double Opt-In Settings

If you want users to confirm submitted data click button on Top Toolbar and select Double Opt-In tab and enable this feature. If enabled, the plugin sends email message with confirmation link to certain email address (submitted by user). When confirmation link clicked, relevant record is marked as "confirmed".
Double Opt-In tab has the following parameters to configure:
  • Enable. Enable or disable double opt-in.
  • Recipient. The email address to which confirmation link will be sent to.
  • Subject. The subject of the email message.
  • Message. The content of the email message. It is mandatory to include {{confirmation-url}} into content.
  • From. The "From" address and name. The email address and name set here will be shown as the sender of the email.
  • Thanksgiving message. This message is displayed when users successfully confirmed their e-mail addresses.
  • Thanksgiving URL. This is alternate way of thanksgiving message. After confirmation users are redirected to this URL.
Important! This feature is disabled if the form requests users to complete the payment.

Back To Top

Notification Settings

The notification, welcome, thanksgiving or whatever email can be sent to user, administrator or any other email address. To enable this feature just click button on Top Toolbar, select Notifications tab and create as many notification as you need. You can customize these emails and use conditional logic.
Each notification has the following parameters to configure:
  • Name. The name of the notification. It is used for your convenience.
  • Enabled. You can stop this notification being sent by turning this off.
  • Send. Specify when notification must be sent: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • Recipient. Add email addresses (comma-separated) to which this email will be sent to.
  • Subject. The subject of the email message.
  • Message. The content of the email message.
  • Attachments. Select files that you want to attach to the email message.
  • Reply-To. Add a "Reply-To" email address. If not set, replying to the email will reply to the "From" address.
  • From. Sets the "From" address and name. The email address and name set here will be shown as the sender of the email.
  • Conditional logic. If enabled, you can create rules to enable this notification depending on the values of input fields.
You can apply conditional logic to each notification. This means that email message will be sent only if the data submitted by the user meets certain criteria.

Back To Top

Integration Settings

Form data submitted by user can be sent to 3rd party services (such as MailChimp, AWeber, GetResponse, etc.). To enable this feature just click button on Top Toolbar, select Integrations tab and create as many integrations as you need. You can customize integrations and use conditional logic.
Important! If you do not see your marketing/CRM provider, make sure that you enabled appropriate integration module on Advanced Settings page.
Plugin has integration modules with following marketing/CRM providers:
  • Acelle Mail
  • ActiveCampaign
  • ActiveTrail
  • AgileCRM
  • AvangEmail
  • AWeber
  • BirdSend
  • Bitrix24
  • Campaign Monitor
  • CleverReach
  • Conversio
  • Drip
  • FreshMail
  • GetResponse
  • HubSpot
  • Jetpack Subscriptions (available for WordPress plugin only)
  • Klaviyo
  • Mad Mimi
  • Mailautic
  • MailChimp
  • MailerLite
  • Mailjet
  • MailPoet (available for WordPress plugin only)
  • Mailster (available for WordPress plugin only)
  • MailWizz
  • Moosend
  • Mumara
  • Omnisend
  • Ontraport
  • Rapidmail
  • SalesAutoPilot
  • SendFox
  • Sendy
  • Zapier
  • Zoho CRM
If you don't see your provider in a list, just drop request and we will add it. 😉
Also plugin has integration modules that allows to:
  • Submit form data as a part of 3rd party HTML form.
  • Send form data as a custom GET/POST-requests.
  • Insert form data into 3rd party MySQL database/table.
  • Create new WordPress User (available for WordPress plugin only).

Acelle Mail

To enable integration with Acelle Mail, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Acelle Mail Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Acelle Mail button. New Acelle Mail integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Endpoint. Enter your Acelle Mail API Endpoint. You can get it on API page in your Acelle Mail account.
  • API Token. Enter your Acelle Mail API Token. You can get it on API page in your Acelle Mail account.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to Acelle Mail fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

ActiveCampaign

To enable integration with ActiveCampaign, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate ActiveCampaign Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click ActiveCampaign button. New ActiveCampaign integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API URL. Enter your ActiveCampaign API URL. To get API URL please go to your ActiveCampaign Account >> Settings >> Developer.
  • API Key. Enter your ActiveCampaign API Key. To get API Key please go to your ActiveCampaign Account >> Settings >> Developer.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to ActiveCampaign fields.
  • Tags. Enter comma-separated list of tags.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

ActiveTrail

To enable integration with ActiveTrail, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate ActiveTrail Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click ActiveTrail button. New ActiveTrail integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • Access Token. Enter your ActiveTrail Access Token. Create it on Settings page in ActiveTrail account.
  • Fields. Map form fields to ActiveTrail fields.
  • Groups. Select groups.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

AgileCRM

To enable integration with AgileCRM, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate AgileCRM Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click AgileCRM button. New AgileCRM integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • Site URL. Enter unique website address of your account. Usually it looks like https://SITE-NAME.agilecrm.com.
  • Email. Enter email address of your AgileCRM account (i.e. email address that you used to create AgileCRM account).
  • API Key. Enter your AgileCRM REST API Key. Find it in your AgileCRM account, click "Admin Settings" and "Developers & API".
  • Campaign ID. Select Campaign ID where data submitted to.
  • System Properties. Map form fields to AgileCRM system properties.
  • Custom Properties. Configure AgileCRM custom properties and map form fields to them.
  • Tags. If you want to tag contact with tags, drop them here (comma-separated string).
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

AvangEmail

To enable integration with AvangEmail, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate AvangEmail Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click AvangEmail button. New AvangEmail integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • Public Key. Enter your AvangEmail API Public Key. Find it here.
  • Private Key. Enter your AvangEmail API Private Key. Find it here.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to AvangEmail fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

AWeber

To enable integration with AWeber, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate AWeber Integration module. Then go to General Settings page, find AWeber Connection section and connect plugin to your AWeber account. After successful connection go to form editor, click button on Top Toolbar, select Integrations tab and click AWeber button. New AWeber integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to AWeber fields.
  • Tags. Enter comma-separated list of tags applied to the contact.
  • Notes. Enter notes applied to the contact (max 60 sybmols).
  • Ad Tracking. Enter your Ad Tracking info applied to the contact.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

BirdSend

To enable integration with BirdSend, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate BirdSend Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click BirdSend button. New BirdSend integration will be added. Click to configure integration.
Important! Please go to your BirdSend Account >> Settings >> Integrations >> BirdSend Apps and create new App. After that go to Permissions tab of App settings and set them as "Write". Then go to Access Token tab of App settings and create Personal Access Token. Copy and Paste it into relevant field below.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • Personal Access Token. Paste your Personal Access Token with "write" permissions.
  • Sequence ID. Select sequence ID where data submitted to.
  • Fields. Map form fields to BirdSend fields.
  • Tags. Comma-separated list of tags.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Bitrix24

To enable integration with Bitrix24, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Bitrix24 Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Bitrix24 button. New Bitrix24 integration will be added. Click to configure integration.
Important! Please go to your Bitrix24 Account >> Applications >> Webhooks and create Inbound webhook with CRM access permissions. Copy and Paste it into relevant field below.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • REST call example URL. Paste REST call example URL created earlier in your Bitrix24 account.
  • Fields. Map form fields to Bitrix24 fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Campaign Monitor

To enable integration with Campaign Monitor, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Campaign Monitor Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Campaign Monitor button. New Campaign Monitor integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Key. Enter your Campaign Monitor API Key. Find Campaign Monitor API Key on Account Settings page when logged into your Campaign Monitor account.
  • Client ID. Select Client ID.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to Campaign Monitor fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

CleverReach

To enable integration with CleverReach, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate CleverReach Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click CleverReach button. New CleverReach integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • Client ID. Enter Client ID of your OAuth App. Please go to CleverReach account >> My Account >> Extras >> REST API and click "Create OAuth". After that click created app and find Client ID there.
  • Client Secret. Enter Client Secret of your OAuth App. Find it the same way as Client ID.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to CleverReach fields.
  • Tags. Comma-separated list of tags.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Conversio

To enable integration with Conversio, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Conversio Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Conversio button. New Conversio integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Key. Enter your Conversio API Key. Find Conversio API Key on Profile page.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to Conversio fields.
  • Opt-In Text. What opt-in text was shown to the subscriber. This is required for GDPR compliance.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Drip

To enable integration with Drip, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Drip Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Drip button. New Drip integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Token. Enter your Drip API Token. Find it on this page.
  • Account ID. Select Account ID.
  • Campaign ID. Select Campaign ID where data submitted to.
  • Fields. Map form fields to Drip fields.
  • Custom Fields. Map form fields to Drip custom fields.
  • EU Consent. Specify whether the subscriber granted or denied GDPR consent. You can use field shortcode to associate EU Consent field with the form field.
  • Tags. Specify comma-separated list of tags that applies to subscribers.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

FreshMail

To enable integration with FreshMail, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate FreshMail Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click FreshMail button. New FreshMail integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Key. Enter your FreshMail API Key. Find it on Integration page in FreshMail dashboard.
  • API Secret. Enter your FreshMail API Secret. Find it on Integration page in FreshMail dashboard.
  • List ID. Select List ID where data submitted to.
  • Fields. Map form fields to FreshMail fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

GetResponse

To enable integration with GetResponse, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate GetResponse Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click GetResponse button. New GetResponse integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Key. Enter your GetResponse API Key. Find it here.
  • Campaign ID. Select Campaign ID where data submitted to.
  • Fields. Map form fields to GetResponse fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

HubSpot

To enable integration with HubSpot, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate HubSpot Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click HubSpot button. New HubSpot integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Key. Enter your HubSpot API Key. Go to "Integrations >> API key" in your HubSpot account and click "Generate API key".
  • List ID. Select List ID where data submitted to.
  • Fields. Map form fields to HubSpot fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Jetpack Subscriptions

Important! Make sure that you installed and activated Jetpack plugin.
To enable integration with Jetpack Subscriptions, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Jetpack Subscriptions Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Jetpack Subscriptions button. New Jetpack Subscriptions integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • Fields. Map certain form field to Jetpack email field.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Klaviyo

To enable integration with Klaviyo, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Klaviyo Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Klaviyo button. New Klaviyo integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Key. Enter your Klaviyo Private API Key. Find Private API Key on API Keys page.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to Klaviyo fields.
  • Custom Properties. Map form fields to Klaviyo custom properties.
  • Double opt-in. Control whether a double opt-in confirmation message is sent.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Mad Mimi

To enable integration with Mad Mimi, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Mad Mimi Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Mad Mimi button. New Mad Mimi integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • Username. Enter Mad Mimi username or email.
  • API Key. Enter Mad Mimi API Key. Find it on Account page (right side column) in your Mad Mimi account.
  • List ID. Select List ID where data submitted to.
  • Fields. Map form fields to Mad Mimi fields.
  • Custom Fields. Map form fields to Mad Mimi custom fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Mailautic

To enable integration with Mailautic, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Mailautic Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Mailautic button. New Mailautic integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • Public Key. Enter your Mailautic API Public Key. Find it here.
  • Private Key. Enter your Mailautic API Private Key. Find it here.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to Mailautic fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

MailChimp

To enable integration with MailChimp, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate MailChimp Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click MailChimp button. New MailChimp integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Key. Enter your MailChimp API Key. Find it here.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to MailChimp fields.
  • Groups. Select groups.
  • Tags. Comma-separated list of tags. Tagging lets you bring your own contact structure into Mailchimp and label contacts based on data only you know about them.
  • Double opt-in. Control whether a double opt-in confirmation message is sent.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

MailerLite

To enable integration with MailerLite, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate MailerLite Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click MailerLite button. New MailerLite integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Key. Enter your MailerLite API Key. Find it on Developer API page.
  • Group ID. Select group ID where data submitted to.
  • Fields. Map form fields to MailChimp fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Mailjet

To enable integration with Mailjet, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Mailjet Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Mailjet button. New Mailjet integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Key. Enter your Mailjet API Key. Find it here.
  • Secret Key. Enter your Mailjet Secret Key. Find it here.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to Mailjet fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

MailPoet

Important! Make sure that you installed and activated MailPoet plugin.
To enable integration with MailPoet, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate MailPoet Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click MailPoet button. New MailPoet integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to MailPoet fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Mailster

Important! Make sure that you installed and activated Mailster plugin.
To enable integration with Mailster, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Mailster Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Mailster button. New Mailster integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to Mailster fields.
  • Double opt-in. Control whether a double opt-in confirmation message is sent.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Mailwizz

To enable integration with Mailwizz, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Mailwizz Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Mailwizz button. New Mailwizz integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API URL. Enter your MailWizz API URL. If the MailWizz powered website does not use clean urls, make sure your API URL has the index.php part of url included.
  • Public Key. Enter your MailWizz API Public Key. You can generate it in MailWizz customer area.
  • Private Key. Enter your MailWizz API Private Key. You can generate it in MailWizz customer area.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to Mailwizz fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Moosend

To enable integration with Moosend, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Moosend Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Moosend button. New Moosend integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Key. Enter your Moosend API Key. You can get it on the settings page in your Moosend account.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to Moosend fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Mumara

To enable integration with Mumara, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Mumara Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Mumara button. New Mumara integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • URL. Enter your Mumara URL.
  • API Token. Enter your Mumara API Token. You can generate it in Mumara account (Settings >> API Key).
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to Mumara fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Omnisend

To enable integration with Omnisend, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Omnisend Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Omnisend button. New Omnisend integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Key. Enter your Omnisend API Key. Find it here.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to Omnisend fields.
  • Custom Fields. Map form fields to Omnisend custom fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Ontraport

To enable integration with Ontraport, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Ontraport Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Ontraport button. New Ontraport integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • App ID. Enter your Ontraport App ID. Find your Ontraport App ID in Administration Settings.
  • API Key. Enter your Ontraport API Key. Find your Ontraport API Key in Administration Settings.
  • Tags. Select tags for submitted data.
  • Sequences. Select sequences for submitted data.
  • Fields. Map form fields to Ontraport fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Rapidmail

To enable integration with Rapidmail, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Rapidmail Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Rapidmail button. New Rapidmail integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Username. Enter your Rapidmail API Username. Find it here.
  • API Password. Enter your Rapidmail API Password. Find it here.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to Rapidmail fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

SalesAutoPilot

To enable integration with SalesAutoPilot, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate SalesAutoPilot Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click SalesAutoPilot button. New SalesAutoPilot integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Username. Enter your SalesAutoPilot API Username. You can get your API Username from the SalesAutoPilot account: Settings >> Integration >> API Keys.
  • API Password. Enter your SalesAutoPilot API Password. You can get your API Password from the SalesAutoPilot account: Settings >> Integration >> API Keys.
  • List ID. Select list ID where data submitted to.
  • List ID. Select form ID.
  • Fields. Map form fields to SalesAutoPilot fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

SendFox

To enable integration with SendFox, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate SendFox Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click SendFox button. New SendFox integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • Personal Access Token. Enter your SendFox Personal Access Token. Create it on API page in your SendFox account.
  • List ID. Select list ID where data submitted to.
  • Fields. Map form fields to SendFox fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Sendy

To enable integration with Sendy, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Sendy Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Sendy button. New Sendy integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • URL. Enter your Sendy installation URL.
  • List ID. Enter your List ID. This ID can be found on "View all lists" page (column ID) in your Sendy dashboard.
  • Fields. Map form fields to Sendy fields.
  • Custom Fields. Configure Sendy custom fields and map form fields to them. You can find Personalization Tag in Sendy dashboard: click "View all list", select desired list, click "Custom fields".
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Zapier

To enable integration with Zapier, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Zapier Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Zapier button. New Zapier integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • Webhook URL. Enter Webhook URL generated by Zapier when you created new Zap. Please read below regarding creating new Zap.
  • Fields. Create Zapier fields and map form fields to them.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.
Below is a step-by-step description of integration procedure. Start with creating new Zap.
  1. Go to your Zapier account and click "Make a Zap!" button.
  2. Zapier ask you to choose Trigger App. Find built-in app "Webhooks" and click it. Choose Webhooks as a Trigger App
  3. Zapier ask you to select Trigger. Find "Catch Hook", select it and click "Save + Continue" button. Select a Trigger
  4. Zapier generate Webhook URL which you use in integration process. Webhook URL
  5. Go to form editor, create new Zapier integration and paste Webhook URL from previous step. Webhook URL
  6. Create as many Zapier fields as you need and map form fields to them. Create Zapier fields
  7. Click "Send Sample Request" button. Plugin will send a request to the Webhook URL so Zapier can pull it in as a sample to set up your zap. Send Sample Request
  8. Go back to Zapier account and continue with creating new Zap. Click "OK, I did this" button. OK, I did this
  9. Zapier show the list of fields received from the plugin. You can use them later while creating Actions for your Zap. Click "Continue". List of fields
  10. Then you need create Action for your Zap. While creating Actions you can use fields received from the plugin.
That's it. Zapier is a pretty convenient way to integrate Green Forms with over 1500 applications and services.

Zoho CRM

To enable integration with Zoho CRM, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Zoho CRM Integration module. Then go to General Settings page, find Zoho CRM Connection section and connect plugin to your Zoho CRM account. After successful connection go to form editor, click button on Top Toolbar, select Integrations tab and click Zoho CRM button. New Zoho CRM integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • Fields. Map form fields to Zoho CRM fields.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

HTML form

To enable integration with 3rd party HTML form, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate HTML Form Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click HTML Form button. New integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • HTML form. Copy-paste HTML-code of 3rd party form and connect it. Important! It must be pure HTML-form with <form> tag, but not javascript/iframe-driven form.
  • Fields. Map form fields to 3rd party form fields.
  • Client side. Enable this option if you want form to be submitted from client side. Otherwise, it is submitted from server side. Please read paragraph below regarding using this feature.
  • Target. Select where to display the response that is received after submitting the form. This feature is only available, "Client side" enabled.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.
Pay attention to some combination of parameters. Some of them won't work.
  • "Execute" is "after successfully completed payment" and "Client side" is enabled. Client side is not involved into notification about successful payment received from payment provider.
  • "Execute" is "after non-completed payment" and "Client side" is enabled. Client side is not involved into notification about non-completed payment received from payment provider.

Custom GET/POST-requests

To enable sending form data to 3rd party URL using GET or POST requests, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Custom GET/POST Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click GET/POST button. New integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • Type. Select the type of the request: GET or POST.
  • URL. Enter URL to send GET/POST-requests to.
  • Query parameters. Create query parameters and map form fields to them.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

3rd party MySQL database/table

To enable inserting form data into 3rd party MySQL database/table, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate 3rd party MySQL Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click MySQL button. New integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • Current connection. Enable this option if you want to use current MySQL-connection (MySQL-server and database).
  • Hostname. Enter your MySQL server hostname.
  • Port. Enter your MySQL server port. Leave it empty if you do not know the port or it is standard 3306.
  • Username. The username must have sufficient privileges to access MySQL-server and database.
  • Password. Enter password for MySQL server user.
  • Database. Enter MySQL database name.
  • Table. Select desired Table.
  • Columns. Map form fields to MySQL table columns.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Create new WordPress user

To enable creating new WordPress user, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate WP User Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click WP User button. New integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • User role. Select the role for the newly created user.
  • Fields. Map form fields to WP User fields. You can map the following fields: email, password, first name and last name.
  • User notification. Email login credentials to a newly-registered user (standard WP message). This option should be enabled if you did not request a password from the user.
  • Allow updates. Update user data for already existing users. Existing user must have the same user role.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Back To Top

Math Expressions

The plugin allows to use basic math expressions along the form. To create math expression just click button on Top Toolbar, select Advanced tab, choose Math Expressions and create as many math expressions as you need.
Each math expression has the following parameters to configure:
  • ID. The unique ID of the expression. You can't change it.
  • Name. The name of the expression. It is used for your convenience.
  • Expression. Type math expression here. Use basic arithmetic operators: -, +, *, /.
  • Default. This value is used if expression can not be calculated (for example, in case of division by zero, typos, missed variables, non-numeric values, etc.).
  • Decimal digits. Specify how many decimal digits the result must have.
Each Math Expression has its own unique shortcode, so you can insert it into different part of the form. For example, you can create new form element "Custom HTML", go to its properties and find property "HTML" under "Basic" tab. On left side hover mouse over to see all available fields and math expressions. Clicking desired math expression will add its shortcode into HTML content. Important! If you plan to show the result of math expression on front-end, please do not forget to enable JavaScript Expression Parser on General Settings page.

Back To Top

Payment Gateways

After successful form submission user can be requested to pay some amount via certain payment gateway. To create and configure payment gateway just click button on Top Toolbar, select Advanced tab, click Payment Gateways and create as many gateways as you need.
Important! If you do not see your payment provider, make sure that you enabled appropriate module on Advanced Settings page.
Plugin has integration modules with following payment providers:
  • Authorize.Net
  • Blockchain
  • InterKassa
  • Mollie
  • PayFast
  • PayPal
  • Paystack
  • Perfect Money
  • Skrill
  • Stripe
  • WePay
  • Yandex.Money
If you still don't see your provider in a list, just drop request and we will consider adding it (but not promise).

When payment gateway created, go to Confirmations tab, create confirmation of one of the following types: "Display Confirmation page and request payment", "Display Message and request payment" or "Request payment" and select desired gateway.

Authorize.Net

Before creating payment gateway driven by Authorize.Net, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate Authorize.Net Integration module. Then go to form editor, click button on Top Toolbar, select Advanced tab, click Payment Gateways and click Authorize.Net button. New gateway based on Authorize.Net will be added. Click to configure it.
It has the following parameters:
  • Name. The name of the payment gateway. It is used for your convenience.
  • Mode. Please select the mode of Authorize.Net integration: Live or Sandbox.
  • API Login ID. Please enter valid API Login ID. If you do not know API Login ID, go to your Authorize.Net account settings and click "API Credentials & Keys".
  • Transaction Key. Please enter valid Transaction Key. If you do not know Transaction Key, go to your Authorize.Net account settings and click "API Credentials & Keys".
  • Signature Key. Please enter valid Signature Key. If you do not know Signature Key, go to your Authorize.Net account settings and click "API Credentials & Keys".
  • Item name. Enter the item name.
  • Amount. Set amount to pay and currency.
  • Successful payment URL. All payers are redirected to this URL after successful payment.
  • Cancel URL. All payers are redirected to this URL in case of cancelled payment.

Blockchain

Before creating payment gateway driven by Blockchain (accept bitcoins), make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate Blockchain Integration module. Then go to form editor, click button on Top Toolbar, select Advanced tab, click Payment Gateways and click Blockchain button. New gateway based on Blockchain will be added. Click to configure it.
It has the following parameters:
  • Name. The name of the payment gateway. It is used for your convenience.
  • Receive Payments API Key. Enter a valid Receive Payments API Key. You cannot use the standard blockchain wallet API key for Receive Payments V2, and vice versa. Please apply for an API Key at https://api.blockchain.info/v2/apikey/request/.
  • xPub. Enter Extended Public Key (xPub). Find it in your Blockchain account: Settings >> Addresses >> Manage >> More Options >> Show xPub.
  • Secret. Enter random alphanumeric string.
  • Confirmations. Set the number of confirmations of transaction.
  • Amount. Set amount to pay and currency.

InterKassa

Before creating payment gateway driven by InterKassa, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate InterKassa Integration module. Then go to form editor, click button on Top Toolbar, select Advanced tab, click Payment Gateways and click InterKassa button. New gateway based on InterKassa will be added. Click to configure it.
It has the following parameters:
  • Name. The name of the payment gateway. It is used for your convenience.
  • Checkout ID. Enter a valid InterKassa Checkout ID. All payments are sent to this account. Important! Make sure that feature "Allow override in request" for "Interaction URL" is activated. Find it on Checkout Settings page, Interface tab in your InterKassa account.
  • Sign Key. Enter Sign Key. Find it on Checkout Settings page, Security tab in your InterKassa account.
  • Sign Algorithm. Enter Sign Algorithm. It must be the same as on Checkout Settings page, Security tab in your InterKassa account.
  • Item name. Enter the item name.
  • Amount. Set amount to pay and currency.
  • Successful payment URL. All payers are redirected to this URL after successful payment.
  • Cancel URL. All payers are redirected to this URL in case of failed/cancelled payment.

Mollie

Before creating payment gateway driven by Mollie, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate Mollie Integration module. Then go to form editor, click button on Top Toolbar, select Advanced tab, click Payment Gateways and click Mollie button. New gateway based on Mollie will be added. Click to configure it.
It has the following parameters:
  • Name. The name of the payment gateway. It is used for your convenience.
  • API Key. Enter a valid Mollie API Key. Find it on Developers page in your Mollie dashboard.
  • Item name. Enter the item name.
  • Amount. Set amount to pay and currency.
  • Redirect URL. The URL your customer will be redirected to after the payment process.

PayFast

Before creating payment gateway driven by PayFast, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate PayFast Integration module. Then go to form editor, click button on Top Toolbar, select Advanced tab, click Payment Gateways and click PayFast button. New gateway based on PayFast will be added. Click to configure it.
It has the following parameters:
  • Name. The name of the payment gateway. It is used for your convenience.
  • Sandbox. Enable sandbox mode.
  • Merchant ID. Enter a valid PayFast Merchant ID. The Merchant ID as given by the PayFast system. Used to uniquely identify the receiving account. This can be found on the merchant’s settings page.
  • Merchant Key. Enter a valid PayFast Merchant Key. The Merchant Key as given by the PayFast system. Used to uniquely identify the receiving account. This provides an extra level of certainty concerning the correct account as both the ID and the Key must be correct in order for the transaction to proceed. This can be found on the merchant’s settings page.
  • Passphrase. Enter a valid Passphrase. The passphrase is an optional/extra security feature, made up of a maximum of 32 characters, which is set by the Merchant in the Settings section of PayFast Dashboard.
  • Item name. Enter the item name.
  • Amount. Set amount to pay and currency.
  • Successful payment URL. The URL where the user is returned to after payment has been successfully taken.
  • Cancel URL. The URL where the user should be redirected if they choose to cancel their payment while on the PayFast system.

PayPal

Before creating payment gateway driven by PayPal, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate PayPal Integration module. Then go to form editor, click button on Top Toolbar, select Advanced tab, click Payment Gateways and click PayPal button. New gateway based on PayPal will be added. Click to configure it.
It has the following parameters:
  • Name. The name of the payment gateway. It is used for your convenience.
  • PayPal ID. Enter a valid PayPal email or Merchant ID. All payments are sent to this account.
  • Item name. Enter the item name.
  • Amount. Set amount to pay and currency.
  • Successful payment URL. All payers are redirected to this URL after successful payment.
  • Cancel URL. All payers are redirected to this URL in case of failed/cancelled payment.

Paystack

Before creating payment gateway driven by Paystack, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate Paystack Integration module. Then go to form editor, click button on Top Toolbar, select Advanced tab, click Payment Gateways and click Paystack button. New gateway based on Paystack will be added. Click to configure it.
Important! Make sure that you created webhook with the URL provided by plugin in your Paystack Dashboard.
It has the following parameters:
  • Name. The name of the payment gateway. It is used for your convenience.
  • Secret Key. Please enter valid Secret Key. Find it on API Keys page in your Paystack Dashboard.
  • Item name. Enter the item name.
  • Amount. Set amount to pay and currency. You can use NGN only.
  • Email. Enter the email address where an HTML receipt will be sent to. Make sure this is a valid email address.
  • Redirect URL. The URL your customer will be redirected to after the payment process.

Perfect Money

Before creating payment gateway driven by Perfect Money, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate Perfect Money Integration module. Then go to form editor, click button on Top Toolbar, select Advanced tab, click Payment Gateways and click Perfect Money button. New gateway based on Perfect Money will be added. Click to configure it.
It has the following parameters:
  • Name. The name of the payment gateway. It is used for your convenience.
  • Payee Account. The merchant Perfect Money account to which the payment is to be made.
  • Payee Name. The name the merchant wishes to have displayed as the Payee on the Perfect Money payment form.
  • Alternate Passphrase. Enter valid Alternate Passphrase. Find it on Settings page.
  • Item name. Enter the item name.
  • Amount. Set amount to pay and currency.
  • Successful payment URL. All payers are redirected to this URL after successful payment.
  • Cancel URL. All payers are redirected to this URL in case of failed/cancelled payment.

Skrill

Before creating payment gateway driven by Skrill, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate Skrill Integration module. Then go to form editor, click button on Top Toolbar, select Advanced tab, click Payment Gateways and click Skrill button. New gateway based on Skrill will be added. Click to configure it.
It has the following parameters:
  • Name. The name of the payment gateway. It is used for your convenience.
  • Merchant email. Enter a valid email address of your Skrill merchant account.
  • Secret word. Please enter a valid secret word. Find it on Developer Settings page in your Skrill account.
  • Item name. Enter the item name.
  • Amount. Set amount to pay and currency.
  • Successful payment URL. All payers are redirected to this URL after successful payment.
  • Cancel URL. All payers are redirected to this URL in case of failed/cancelled payment.

Stripe

Before creating payment gateway driven by Stripe, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate Stripe Integration module. Then go to form editor, click button on Top Toolbar, select Advanced tab, click Payment Gateways and click Stripe button. New gateway based on Stripe will be added. Click to configure it.
Important! Make sure that you created webhook with the URL provided by plugin for event checkout.session.completed in your Stripe Dashboard.
It has the following parameters:
  • Name. The name of the payment gateway. It is used for your convenience.
  • Publishable Key. Enter valid Publishable Key. Find it on API Keys page in Stripe Dashboard.
  • Secret Key. Enter valid Secret Key. Find it on API Keys page in Stripe Dashboard.
  • Signing secret. Enter a valid Signing secret for webhook that you created earlier. Find it on Webhooks page in Stripe Dashboard. Click webhook that you created earlier, and find "Signing secret" parameter.
  • Item name. Enter the item name.
  • Amount. Set amount to pay and currency.
  • Successful payment URL. All payers are redirected to this URL after successful payment.
  • Cancel URL. All payers are redirected to this URL in case of failed/cancelled payment.

WePay

Before creating payment gateway driven by WePay, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate WePay Integration module. Then go to form editor, click button on Top Toolbar, select Advanced tab, click Payment Gateways and click WePay button. New gateway based on WePay will be added. Click to configure it.
It has the following parameters:
  • Name. The name of the payment gateway. It is used for your convenience.
  • Access Token. Please enter valid Access Token. You can find your Access Token on the "API Keys" tab of your WePay app dashboard.
  • Account ID. Please enter valid Account ID. You can find your Account ID on the "API Keys" tab of your WePay app dashboard.
  • Item name. Enter the item name.
  • Amount. Set amount to pay and currency.
  • Redirect URL. The URL your customer will be redirected to after the payment process.

Yandex.Money

Before creating payment gateway driven by Yandex.Money, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate Yandex.Money Integration module. Then go to form editor, click button on Top Toolbar, select Advanced tab, click Payment Gateways and click Yandex.Money button. New gateway based on Yandex.Money will be added. Click to configure it.
Important! Make sure that you set URL provided by plugin as URL for HTTP-notices in your Yandex.Money Dashboard.
It has the following parameters:
  • Name. The name of the payment gateway. It is used for your convenience.
  • Wallet ID. Enter your Wallet ID (number). Find it on Settings page in Yandex.Money Account.
  • Secret Word. Enter valid Secret Word. The Secret Word allows you to verify the authenticity of the notifications. Find it on the same page where you entered URL for HTTP-notices in your Yandex.Money Dashboard.
  • Label prefix. Enter a random alphanumeric string. It is required for some intermediate services to split HTTP-notices. If you do not use them, just ignore this parameter and leave it as is.
  • Payment type. select the payment type (Wallet or Bank Card).
  • Item name. Enter the item name.
  • Amount. Set amount to pay and currency.
  • Successful payment URL. All payers are redirected to this URL after successful payment.

Back To Top

SMS Gateways

Green Forms can send SMS to specified phone numbers. It is done through SMS gateways. To enable this feature just click button on Top Toolbar, select Integrations tab and create integration with SMS gateways. You can customize integrations and use conditional logic.
Important! If you do not see your SMS gateway, make sure that you enabled appropriate integration module on Advanced Settings page.
Plugin has integration modules with following marketing/CRM providers:
  • BulkGate
  • GatewayAPI
  • Nexmo
  • Twilio
If you don't see your gateway in a list, just drop request and we will add it. 😉

BulkGate

To enable integration with BulkGate, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate BulkGate Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click BulkGate button. New BulkGate integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • Application ID. Enter your BulkGate Application ID. Create Simple API module in BulkGate Dashboard and take Application ID there.
  • Application Token. Enter your BulkGate Application Token. Create Simple API module in BulkGate Dashboard and take Application Token there.
  • SMS type. Select the type of SMS: transactional or promotional. Find the difference between Transactional and Promotional SMS here.
  • Phone number. Enter the phone number in an international format (including country and area code).
  • Unicode. Enable this feature to send SMS in unicode format.
  • Message. Text of SMS message (max. 612 characters, or 268 characters if Unicode is used).
  • Check duplicates. Prevent sending duplicate messages to the same phone number. Messages with the same text sent to the same number will be removed if there is a time interval shorter than 5 mins.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

GatewayAPI

To enable integration with GatewayAPI, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate GatewayAPI Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click GatewayAPI button. New GatewayAPI integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Token. Enter your GatewayAPI API Token. Find API Token in GatewayAPI API Settings page.
  • From. The name or number the message should be sent from. Alphanumeric senderID is not supported in all countries.
  • Phone number. Enter the phone number in an international format (including country and area code).
  • Unicode. Enable this feature to send SMS in unicode format.
  • Message. Text of SMS message.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Nexmo

To enable integration with Nexmo, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Nexmo Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Nexmo button. New Nexmo integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • API Key. Enter your Nexmo API Key. Find it in Nexmo Settings page.
  • API Secret. Enter your Nexmo API Secret. Find it in Nexmo Settings page.
  • From. The name or number the message should be sent from. Alphanumeric senderID is not supported in all countries.
  • Phone number. Enter the phone number in an international format (including country and area code).
  • Unicode. Enable this feature to send SMS in unicode format.
  • Message. Text of SMS message.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Twilio

To enable integration with Twilio, make sure that you activated appropriate integration module. Go to Advanced Settings page and turn on Activate Twilio Integration module. Then go to form editor, click button on Top Toolbar, select Integrations tab and click Twilio button. New Twilio integration will be added. Click to configure integration.
It has the following parameters:
  • Name. The name of the integration. It is used for your convenience.
  • Enabled. You can disable this integration by turning this off.
  • Execute. You can specify when integration must be executed: after successful form submission, when user confirmed submitted data using double opt-in feature, after successfully completed payment or after non-completed payment.
  • Account SID. Enter your Twilio Account SID. You can find your Account SID in the Twilio Console.
  • Auth Token. Enter your Twilio Auth Token. You can find your Auth Token in the Twilio Console.
  • To. This parameter determines the destination phone number for your SMS message. Format this number with a "+" and a country code, e.g., +16175551212.
  • From. From specifies the Twilio phone number or short code that sends this message. This must be a Twilio phone number that you own, formatted with a "+" and country code, e.g. +16175551212. To get your first Twilio phone number, head on over to the console and find a number you like with SMS capabilities. If you are interested in using a short code, you can apply for one via the console as well. Note that you cannot spoof messages from your personal cell phone number without porting your number to Twilio first.
  • Message. This is the full text of the message you want to send, limited to 1600 characters. If the body of your message is more than 160 GSM-7 characters (or 70 UCS-2 characters), Twilio will send the message as a segmented SMS.
  • Conditional logic. If enabled, you can create rules to enable this integration depending on the values of input fields.

Back To Top

Custom JavaScript Handlers

You can use your own JavaScript-code for some form events. It doesn't mean that native JavaScript handlers are replaced by yours. It means that your JavaScript-code is executed together with native handlers.
To enable Custom JavaScript Handlers, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate Custom JavaScript Handlers module. Then go to form editor, click button on Top Toolbar, select Advanced tab and click Custom JavaScript Handlers. There you can enable certain handler and put JS-code.
At that moment you can add JavaScript-code to the following events:
  • AfterInit. This handler is executed when form initialized.
  • AfterUpdate. This handler is executed when form value changed by user. It has incoming parameter element_id.
  • BeforeSubmit. This handler is executed before form submitted.
  • AfterSubmitSuccess. This handler is executed when form successfully submitted.
The following variables and functions might be useful in your JavaScript-code:
  • this.dom_id - this ID is used to access form DOM elements.
  • this.form_id - form ID.
  • this.user_data - object, that can be used to store your data (to send data between handlers).
  • this.get_field_value(ELEMENT_ID) - get the value of certain input field. Replace ELEMENT_ID by real field ID taken from Advanced tab on field properties window.
  • this.set_field_value(ELEMENT_ID, value) - set the value of certain input field. Replace ELEMENT_ID by real field ID taken from Advanced tab on field properties window.
Do not use <script>...</script> tags inside (just put regular JavaScript-code) and make sure your JavaScript-code doesn't have any syntax errors.

Back To Top

Form Elements

General Info

Each form consists of Form Elements. You can add as many Form Elements as you need and group them into complex layouts including unlimited column nesting. If you want to add some element to the form (for example, input field or button or something else), just click relevant icon on Form Elements Toolbar and new element will be added. Then you can move new element into desired position and configure it. Following elements can be added to the form:
  • - Text Input Field
  • - Email Input Field
  • - Numeric Input Field
  • - Numeric Spinner
  • - Textarea
  • - Select Box (Drop-down List)
  • - Checkbox
  • - Radio Button
  • - Multiselect List
  • - Image Select
  • - Tile
  • - Date Picker
  • - Time Picker
  • - File Upload
  • - Password
  • - Star Rating
  • - Signature Field
  • - Range Slider
  • - Hidden Field
  • - Submit Button
  • - Column Layouts
  • - HTML Content
  • - Link Button
The properties of each element are described below.

Back To Top

Text Field

Click on Form Elements Toolbar to add regular text field to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Placeholder. The placeholder text will appear inside the field until the user starts to type.
  • Autocomplete attribute. Choose the value of the autocomplete attribute. It helps browser to fill the field value, if required.
  • Description. This description appears below the field.
  • Required. If enabled, the user must fill out the field. You also can specify error message here.

Style Properties

The general view of text fields is configured through Form Settings. It's applied to all input fields. Here you can adjust view of the field.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Input style. Adjust the input field style (size and text alignment).
  • Input icons. These icons appear inside/near of the input field.
  • Description style. Choose where to display the description relative to the field and its alignment.
  • Custom CSS class. This class name will be added to the input field.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Mask. Adjust the mask of the input field. Use the following special symbols:
    0 - mandatory digit
    9 - optional digit
    A - alphanumeric character
    S - alpha character
    Important! jQuery Mask plugin must be enabled on General Settings page.
  • Default value. The default value is the value that the field has before the user has entered anything.
  • Dynamic default value. Allows the default value of the field to be set dynamically via a URL parameter.
  • Parameter name. This is the name of the parameter that you will use to set the default value.
  • Read only. If enabled, the user can not edit the field value.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.
  • Filters. Filters allow you to strip various characters from the submitted value. The following filters are available:
    • Alpha. Removes any non-alphabet characters.
    • Alphanumeric. Removes any non-alphabet characters and non-digits.
    • Digits. Removes non-digits.
    • Regex. Removes characters matching the given regular expression.
    • Strip Tags. Removes any HTML tags.
    • Trim. Removes white space from the start and end.
  • Validators. Validators check whether the data entered by the user is valid. If not, then appropriate error bubble is displayed for this field. The following validators are available:
    • Alpha. Checks that the value contains only alphabet characters.
    • Alphanumeric. Checks that the value contains only alphabet characters or digits.
    • Digits. Checks that the value contains only digits.
    • Email. Checks that the value is a valid email address.
    • Equal. Checks that the value is identical to the given token.
    • Greater Than. Checks that the value is numerically greater than the given minimum.
    • In Array. Checks that the value is in a list of allowed values.
    • Length. Checks that the length of the value is between the given maximum and minimum.
    • Less Than. Checks that the value is numerically less than the given maximum.
    • Prevent Duplicates. Checks that the same value has not already been submitted.
    • Regex. Checks that the value matches the given regular expression.
    • URL. Checks that the value is a valid URL.

Back To Top

Email Field

Click on Form Elements Toolbar to add email field to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Placeholder. The placeholder text will appear inside the field until the user starts to type.
  • Autocomplete attribute. Choose the value of the autocomplete attribute. It helps browser to fill the field value, if required.
  • Description. This description appears below the field.
  • Required. If enabled, the user must fill out the field. You also can specify error message here.

Style Properties

The general view of text fields is configured through Form Settings. It's applied to all input fields. Here you can adjust view of the field.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Input style. Adjust the input field style (size and text alignment).
  • Input icons. These icons appear inside/near of the input field.
  • Description style. Choose where to display the description relative to the field and its alignment.
  • Custom CSS class. This class name will be added to the input field.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Default value. The default value is the value that the field has before the user has entered anything.
  • Dynamic default value. Allows the default value of the field to be set dynamically via a URL parameter.
  • Parameter name. This is the name of the parameter that you will use to set the default value.
  • Read only. If enabled, the user can not edit the field value.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.
  • Filters. Filters allow you to strip various characters from the submitted value. The following filters are available:
    • Alpha. Removes any non-alphabet characters.
    • Alphanumeric. Removes any non-alphabet characters and non-digits.
    • Digits. Removes non-digits.
    • Regex. Removes characters matching the given regular expression.
    • Strip Tags. Removes any HTML tags.
    • Trim. Removes white space from the start and end.
  • Validators. Validators check whether the data entered by the user is valid. If not, then appropriate error bubble is displayed for this field. The following validators are available:
    • Email. Checks that the value is a valid email address.
    • Equal. Checks that the value is identical to the given token.
    • In Array. Checks that the value is in a list of allowed values.
    • Prevent Duplicates. Checks that the same value has not already been submitted.

Back To Top

Numeric field

Click on Form Elements Toolbar to add numeric field to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Placeholder. The placeholder text will appear inside the field until the user starts to type.
  • Description. This description appears below the field.
  • Required. If enabled, the user must fill out the field. You also can specify error message here.

Style Properties

The general view of text fields is configured through Form Settings. It's applied to all input fields. Here you can adjust view of the field.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Input style. Adjust the input field style (size and text alignment).
  • Input icons. These icons appear inside/near of the input field.
  • Description style. Choose where to display the description relative to the field and its alignment.
  • Custom CSS class. This class name will be added to the input field.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Value. Set basic parameters of numeric input. Min - minimum value. Max - maximum value. Default - the value that the field has before the user has entered anything.
  • Decimal digits. Select the allowed number of digits after the decimal separator.
  • Dynamic default value. Allows the default value of the field to be set dynamically via a URL parameter.
  • Parameter name. This is the name of the parameter that you will use to set the default value.
  • Read only. If enabled, the user can not edit the field value.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.
  • Validators. Validators check whether the data entered by the user is valid. If not, then appropriate error bubble is displayed for this field. The following validators are available:
    • Equal. Checks that the value is identical to the given token.
    • Greater Than. Checks that the value is numerically greater than the given minimum.
    • In Array. Checks that the value is in a list of allowed values.
    • Less Than. Checks that the value is numerically less than the given maximum.

Back To Top

Numeric Spinner

Click on Form Elements Toolbar to add numeric spinner to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Description. This description appears below the field.

Style Properties

The general view of text fields is configured through Form Settings. It's applied to all input fields. Here you can adjust view of the field.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Input style. Adjust the input field style (size and text alignment).
  • Description style. Choose where to display the description relative to the field and its alignment.
  • Custom CSS class. This class name will be added to the input field.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Value. Set basic parameters of numeric spinner. Min - minimum value. Max - maximum value. Default - the value that the field has before the user has entered anything. Step - increment value.
  • Decimal digits. Select the allowed number of digits after the decimal separator.
  • Dynamic default value. Allows the default value of the field to be set dynamically via a URL parameter.
  • Parameter name. This is the name of the parameter that you will use to set the default value.
  • Read only. If enabled, the user can not edit the field value.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.
  • Validators. Validators check whether the data entered by the user is valid. If not, then appropriate error bubble is displayed for this field. The following validators are available:
    • Equal. Checks that the value is identical to the given token.
    • Greater Than. Checks that the value is numerically greater than the given minimum.
    • In Array. Checks that the value is in a list of allowed values.
    • Less Than. Checks that the value is numerically less than the given maximum.

Back To Top

Textarea

Click on Form Elements Toolbar to add textarea to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Placeholder. The placeholder text will appear inside the field until the user starts to type.
  • Description. This description appears below the field.
  • Required. If enabled, the user must fill out the field. You also can specify error message here.

Style Properties

The general view of text fields is configured through Form Settings. It's applied to all input fields. Here you can adjust view of the field.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Textarea style. Adjust the input field style (size and text alignment).
  • Textarea icons. These icons appear inside/near of textarea.
  • Description style. Choose where to display the description relative to the field and its alignment.
  • Custom CSS class. This class name will be added to the input field.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Default value. The default value is the value that the field has before the user has entered anything.
  • Dynamic default value. Allows the default value of the field to be set dynamically via a URL parameter.
  • Parameter name. This is the name of the parameter that you will use to set the default value.
  • Read only. If enabled, the user can not edit the field value.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.
  • Filters. Filters allow you to strip various characters from the submitted value. The following filters are available:
    • Alpha. Removes any non-alphabet characters.
    • Alphanumeric. Removes any non-alphabet characters and non-digits.
    • Digits. Removes non-digits.
    • Regex. Removes characters matching the given regular expression.
    • Strip Tags. Removes any HTML tags.
    • Trim. Removes white space from the start and end.
  • Validators. Validators check whether the data entered by the user is valid. If not, then appropriate error bubble is displayed for this field. The following validators are available:
    • Alpha. Checks that the value contains only alphabet characters.
    • Alphanumeric. Checks that the value contains only alphabet characters or digits.
    • Digits. Checks that the value contains only digits.
    • Email. Checks that the value is a valid email address.
    • Equal. Checks that the value is identical to the given token.
    • Greater Than. Checks that the value is numerically greater than the given minimum.
    • In Array. Checks that the value is in a list of allowed values.
    • Length. Checks that the length of the value is between the given maximum and minimum.
    • Less Than. Checks that the value is numerically less than the given maximum.
    • Prevent Duplicates. Checks that the same value has not already been submitted.
    • Regex. Checks that the value matches the given regular expression.
    • URL. Checks that the value is a valid URL.

Back To Top

Select Box (Drop-down List)

Click on Form Elements Toolbar to add select box (drop-down list) to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Options. These are the choices that the user will be able to choose from. You can add as many options as you need manually or insert a set of pre-defined options such as countries, states, provinces, etc.
  • "Please select" option. Adds an option to the top of the list to let the user choose no value.
  • Autocomplete attribute. Choose the value of the autocomplete attribute. It helps browser to fill the field value, if required.
  • Description. This description appears below the field.
  • Required. If enabled, the user must fill out the field. You also can specify error message here.

Style Properties

The general view of input fields is configured through Form Settings. It's applied to all input fields. Here you can adjust view of the field.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Input style. Adjust the input field style (size and text alignment).
  • Description style. Choose where to display the description relative to the field and its alignment.
  • Custom CSS class. This class name will be added to the input field.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Dynamic default value. Allows the default value of the field to be set dynamically via a URL parameter.
  • Parameter name. This is the name of the parameter that you will use to set the default value.
  • Submit on choice. If enabled, the form will be submitted when an option is chosen.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.
  • Validators. Validators check whether the data entered by the user is valid. If not, then appropriate error bubble is displayed for this field. The following validators are available:
    • Equal. Checks that the value is identical to the given token.
    • Greater Than. Checks that the value is numerically greater than the given minimum.
    • In Array. Checks that the value is in a list of allowed values.
    • Length. Checks that the length of the value is between the given maximum and minimum.
    • Less Than. Checks that the value is numerically less than the given maximum.
    • Prevent Duplicates. Checks that the same value has not already been submitted.
    • Regex. Checks that the value matches the given regular expression.

Back To Top

Checkbox

Click on Form Elements Toolbar to add a set of checkboxes to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Options. These are the choices that the user will be able to choose from. You can add as many options as you need manually or/and insert a set of pre-defined options such as countries, states, provinces, etc.
  • Description. This description appears below the field.
  • Required. If enabled, the user must fill out the field. You also can specify error message here.

Style Properties

The general view of checkboxes is configured through Form Settings. It's applied to all input fields. Here you can adjust view of the field.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Checkbox style. Choose how to display checkbox fields and their captions.
  • Description style. Choose where to display the description relative to the field and its alignment.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Dynamic default value. Allows the default value of the field to be set dynamically via a URL parameter.
  • Parameter name. This is the name of the parameter that you will use to set the default value.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.
  • Validators. Validators check whether the data entered by the user is valid. If not, then appropriate error bubble is displayed for this field. The following validators are available:
    • In Array. Checks that the value is in a list of allowed values.
    • Prevent Duplicates. Checks that the same value has not already been submitted.

Back To Top

Radio Button

Click on Form Elements Toolbar to add a set of radio buttons to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Options. These are the choices that the user will be able to choose from. You can add as many options as you need manually or/and insert a set of pre-defined options such as countries, states, provinces, etc.
  • Description. This description appears below the field.
  • Required. If enabled, the user must fill out the field. You also can specify error message here.

Style Properties

The general view of radio buttons is configured through Form Settings. It's applied to all input fields. Here you can adjust view of the field.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Radio button style. Choose how to display radio button fields and their captions.
  • Description style. Choose where to display the description relative to the field and its alignment.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Dynamic default value. Allows the default value of the field to be set dynamically via a URL parameter.
  • Parameter name. This is the name of the parameter that you will use to set the default value.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.
  • Validators. Validators check whether the data entered by the user is valid. If not, then appropriate error bubble is displayed for this field. The following validators are available:
    • In Array. Checks that the value is in a list of allowed values.
    • Prevent Duplicates. Checks that the same value has not already been submitted.

Back To Top

Multiselect

Click on Form Elements Toolbar to add a multiselect field to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Options. These are the choices that the user will be able to choose from. You can add as many options as you need manually or/and insert a set of pre-defined options such as countries, states, provinces, etc.
  • Description. This description appears below the field.
  • Required. If enabled, the user must fill out the field. You also can specify error message here.

Style Properties

The general view of input fields is configured through Form Settings. It's applied to all input fields. Here you can adjust view of the field.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Multiselect style. Choose how to display multiselect options.
  • Description style. Choose where to display the description relative to the field and its alignment.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Maximum selected options. Enter how many options can be selected. Set 0 for unlimited number.
  • Dynamic default value. Allows the default value of the field to be set dynamically via a URL parameter.
  • Parameter name. This is the name of the parameter that you will use to set the default value.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.
  • Validators. Validators check whether the data entered by the user is valid. If not, then appropriate error bubble is displayed for this field. The following validators are available:
    • In Array. Checks that the value is in a list of allowed values.
    • Prevent Duplicates. Checks that the same value has not already been submitted.

Back To Top

Image Select

Click on Form Elements Toolbar to add a set of images to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Mode. Image Select can operate in 2 modes: radio button (user can select only one option) and checkbox (user can select multiple options).
  • Options. These are the choices that the user will be able to choose from. You can add as many options as you need.
  • Description. This description appears below the field.
  • Required. If enabled, the user must fill out the field. You also can specify error message here.

Style Properties

The general view of the field is configured through Form Settings. It's applied to all input fields. Here you can adjust view of the field.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Image style. Choose how to display images.
  • Description style. Choose where to display the description relative to the field and its alignment.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Dynamic default value. Allows the default value of the field to be set dynamically via a URL parameter.
  • Parameter name. This is the name of the parameter that you will use to set the default value.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.
  • Validators. Validators check whether the data entered by the user is valid. If not, then appropriate error bubble is displayed for this field. The following validators are available:
    • In Array. Checks that the value is in a list of allowed values.
    • Prevent Duplicates. Checks that the same value has not already been submitted.

Back To Top

Tile

Click on Form Elements Toolbar to add tile to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Mode. Select the mode of the Tiles: checkbox or radio-button.
  • Options. These are the choices that the user will be able to choose from. You can add as many options as you need manually or insert a set of pre-defined options such as countries, states, provinces, etc.
  • Description. This description appears below the field.
  • Required. If enabled, the user must fill out the field. You also can specify error message here.

Style Properties

The general view of tiles is configured through Form Settings. It's applied to all tiles. Here you can adjust view of the tile.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Tile style. Adjust the tile style (size, layout and position).
  • Description style. Choose where to display the description relative to the field and its alignment.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Dynamic default value. Allows the default value of the field to be set dynamically via a URL parameter.
  • Parameter name. This is the name of the parameter that you will use to set the default value.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.
  • Validators. Validators check whether the data entered by the user is valid. If not, then appropriate error bubble is displayed for this field. The following validators are available:
    • In Array. Checks that the value is in a list of allowed values.
    • Prevent Duplicates. Checks that the same value has not already been submitted.

Back To Top

Date Picker

Click on Form Elements Toolbar to add date picker to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Placeholder. The placeholder text will appear inside the field until the user starts to type.
  • Autocomplete attribute. Choose the value of the autocomplete attribute. It helps browser to fill the field value, if required.
  • Description. This description appears below the field.
  • Required. If enabled, the user must fill out the field. You also can specify error message here.

Style Properties

The general view of input fields is configured through Form Settings. It's applied to all input fields. Here you can adjust view of the field.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Input style. Adjust the input field style (size and text alignment).
  • Input icons. These icons appear inside/near of the input field.
  • Description style. Choose where to display the description relative to the field and its alignment.
  • Custom CSS class. This class name will be added to the input field.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Default value. The default value is the value that the field has before the user has entered anything.
  • Dynamic default value. Allows the default value of the field to be set dynamically via a URL parameter.
  • Parameter name. This is the name of the parameter that you will use to set the default value.
  • Minimum date. Adjust the minimum date that can be selected.
  • Maximum date. Adjust the maximum date that can be selected.
  • Read only. If enabled, the user can not edit the field value.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.
  • Filters. Filters allow you to strip various characters from the submitted value. The following filters are available:
    • Alpha. Removes any non-alphabet characters.
    • Alphanumeric. Removes any non-alphabet characters and non-digits.
    • Digits. Removes non-digits.
    • Regex. Removes characters matching the given regular expression.
    • Strip Tags. Removes any HTML tags.
    • Trim. Removes white space from the start and end.
  • Validators. Validators check whether the data entered by the user is valid. If not, then appropriate error bubble is displayed for this field. The following validators are available:
    • Date. Checks that the value is a valid date (according to pre-defined date format set on Form Settings).

Back To Top

Time Picker

Click on Form Elements Toolbar to add time picker to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Placeholder. The placeholder text will appear inside the field until the user starts to type.
  • Description. This description appears below the field.
  • Required. If enabled, the user must fill out the field. You also can specify error message here.

Style Properties

The general view of input fields is configured through Form Settings. It's applied to all input fields. Here you can adjust view of the field.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Input style. Adjust the input field style (size and text alignment).
  • Input icons. These icons appear inside/near of the input field.
  • Description style. Choose where to display the description relative to the field and its alignment.
  • Custom CSS class. This class name will be added to the input field.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Default value. The default value is the value that the field has before the user has entered anything.
  • Dynamic default value. Allows the default value of the field to be set dynamically via a URL parameter.
  • Parameter name. This is the name of the parameter that you will use to set the default value.
  • Minimum time. Adjust the minimum time that can be selected.
  • Maximum date. Adjust the maximum time that can be selected.
  • Minute interval. Enter the minute interval.
  • Read only. If enabled, the user can not edit the field value.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.
  • Filters. Filters allow you to strip various characters from the submitted value. The following filters are available:
    • Alpha. Removes any non-alphabet characters.
    • Alphanumeric. Removes any non-alphabet characters and non-digits.
    • Digits. Removes non-digits.
    • Regex. Removes characters matching the given regular expression.
    • Strip Tags. Removes any HTML tags.
    • Trim. Removes white space from the start and end.
  • Validators. Validators check whether the data entered by the user is valid. If not, then appropriate error bubble is displayed for this field. The following validators are available:
    • Time. Checks that the value is a valid time (according to pre-defined time format set on Form Settings).

Back To Top

File Upload

Click on Form Elements Toolbar to add file upload field to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Caption. This is the caption of upload button.
  • Description. This description appears below the field.
  • Required. If enabled, the user must fill out the field. You also can specify error message here.

Style Properties

The general view of button is configured through Form Settings. It's applied to all buttons. Here you can adjust view of the button.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Button style. Adjust the button style and position.
  • Icons. These icons appear near the button caption.
  • Colors. Adjust the colors of the button. You can do it for different button states.
  • Description style. Choose where to display the description relative to the field and its alignment.
  • Custom CSS class. This class name will be added to the input field.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Allowed extensions. Enter the comma-separated list of allowed file extensions. Due to security reasons, never allow executable extensions such as .php, .js, .exe, .msi, etc. You also can adjust the text of error message that appears if user tries to upload not allowed files.
  • Maximum allowed size Enter the maximum size of a file in MB. Don't set it higher than the value of upload_max_filesize in your PHP settings. You also can adjust the text of error message that appears if user tries to upload big file.
  • Maximum number of files. Enter the maximum number of files that can be uploaded by user. You also can adjust the text of error message that appears if user tries to upload more files then maximum number of files.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.

Back To Top

Password

Click on Form Elements Toolbar to add password field to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Placeholder. The placeholder text will appear inside the field until the user starts to type.
  • Description. This description appears below the field.
  • Required. If enabled, the user must fill out the field. You also can specify error message here.

Style Properties

The general view of input fields is configured through Form Settings. It's applied to all input fields. Here you can adjust view of the field.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Input style. Adjust the input field style (size and text alignment).
  • Input icons. These icons appear inside/near of the input field.
  • Description style. Choose where to display the description relative to the field and its alignment.
  • Custom CSS class. This class name will be added to the input field.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Enter the minimum password length. You also can adjust the text of error message that appears if submitted password is too short.
  • Capital letters is mandatory. If enabled, the password must contains at least one capital letter. You also can adjust the text of error message that appears if submitted password doesn't contain capital letter.
  • Digit is mandatory. If enabled, the password must contains at least one digit. You also can adjust the text of error message that appears if submitted password doesn't contain digit.
  • Special character is mandatory. If enabled, the password must contains at least one special character: !$#%^&*~_-(){}[]\|/?. You also can adjust the text of error message that appears if submitted password doesn't contain special character.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.

Back To Top

Star Rating

Click on Form Elements Toolbar to add star rating field to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Description. This description appears below the field.
  • Required. If enabled, the user must fill out the field. You also can specify error message here.

Style Properties

  • Label style. Choose where to display the label relative to the field and its alignment.
  • Star style. Adjust the style of stars (size, alignment, colors).
  • Description style. Choose where to display the description relative to the field and its alignment.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Number of stars. Choose the total number of stars.
  • Default value. The default value is the value that the field has before the user has entered anything.
  • Dynamic default value. Allows the default value of the field to be set dynamically via a URL parameter.
  • Parameter name. This is the name of the parameter that you will use to set the default value.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.

Back To Top

Signature Field

To enable using Signature Field, make sure that you activated Signature Pad plugin. Go to General Settings page and turn on Signature Pad plugin. Then go to form editor, click on Form Elements Toolbar to add signature pad to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Description. This description appears below the field.
  • Required. If enabled, the user must sign. You also can specify error message here.

Style Properties

The general view of text fields is configured through Form Settings. It's applied to all input fields. Here you can adjust view of the field.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Pad height. Set the height of signature pad.
  • Description style. Choose where to display the description relative to the field and its alignment.
  • Custom CSS class. This class name will be added to the input field.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.

Back To Top

Range Slider

To enable using Range Slider, make sure that you activated Ion.RangeSlider plugin. Go to General Settings page and turn on Ion.RangeSlider plugin. Then go to form editor and click on Form Elements Toolbar to add regular text field to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 5 groups: Basic, Style, Data, Logic and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.
  • Label. This is the label of the field.
  • Description. This description appears below the field.

Style Properties

The general view of text fields is configured through Form Settings. It's applied to all input fields. Here you can adjust view of the field.
  • Label style. Choose where to display the label relative to the field and its alignment.
  • Show grid. Enables grid of values.
  • Show min/max labels. Enables labels for min and max values.
  • Description style. Choose where to display the description relative to the field and its alignment.
  • Custom CSS class. This class name will be added to the input field.
  • CSS styles. Set custom css for certain element parts and states.

Data Properties

  • Range size. Set basic parameters of range slider. Min - slider minimum value. Max - slider maximum value. Step - slider step (always > 0).
  • Handle value. The default value is the value that the field has before the user has entered anything. If range slider has 2 handles, this is the default value of the left handle.
  • Double handle. Enable second handle.
  • Second handle value. This is the default value of the right handle.
  • Value prefix. Set prefix for values. Will be set up right before the number. For example - $100.
  • Value postfix. Set postfix for values. Will be set up right after the number. For example - 100k.
  • Read only. If enabled, the user can not edit the field value.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Advanced Properties

  • ID. The unique ID of the input field.
  • Validators. Validators check whether the data entered by the user is valid. If not, then appropriate error bubble is displayed for this field. The following validators are available:
    • Equal. Checks that the value is identical to the given token.
    • Greater Than. Checks that the value is numerically greater than the given minimum.
    • In Array. Checks that the value is in a list of allowed values.
    • Less Than. Checks that the value is numerically less than the given maximum.

Back To Top

Hidden Field

Click on Form Elements Toolbar to add hidden field to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 3 groups: Basic, Data and Advanced. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name will be shown in place of the label throughout the plugin, in the notification email and when viewing submitted form entries.

Data Properties

  • Default value. The default value is the value that the field has before the user has entered anything.
  • Dynamic default value. Allows the default value of the field to be set dynamically via a URL parameter.
  • Parameter name. This is the name of the parameter that you will use to set the default value.
  • Save to database. If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Advanced Properties

  • ID. The unique ID of the input field.

Back To Top

Button

Click on Form Elements Toolbar to add submit button to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 3 groups: Basic, Style and Logic. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name is used for your reference.
  • Label. This is the label of the button.
  • Type. Choose the type of the button (back, next or submit).
  • Sending label. This is the label of the button when data are sending to server.

Style Properties

The general view of button is configured through Form Settings. It's applied to all buttons. Here you can adjust view of the field.
  • Style. Adjust the button style and position.
  • Icons. These icons appear near the button label.
  • Colors. Adjust the colors of the button. You can do it for different button states.
  • Custom CSS class. This class name will be added to the button.
  • CSS styles. Set custom css for certain element parts and states.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Back To Top

Column Layouts

Hover mouse over on Form Elements Toolbar, and select how many columns you want to add to the form. Once clicked, new column layout will added. You can move any form elements (including other column layouts) into columns. To achieve its properties just do right click over element and then click Properties. All properties are organized into 2 groups: Basic and Logic. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name is for your reference only.
  • Column width. Specify the width of each column. The row is divided into 12 equal pieces. You can decide how many pieces related to each columns. If you want all columns to be in one row, make sure that sum of widths is equal to 12.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Back To Top

Custom HTML

Click on Form Elements Toolbar to custom HTML code to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 3 groups: Basic, Style, Logic. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name is for your reference only.
  • HTML. This is the HTML-content of the element.

Style Properties

  • CSS styles. Set custom css for certain element parts.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Back To Top

Link Button

Click on Form Elements Toolbar to add link button to the form. To achieve its properties just do right click over element and then click Properties. All properties are organized into 3 groups: Basic, Style and Logic. To view/edit certain group of properties just click appropriate tab on Element Properties window.

Basic Properties

  • Name. The name is used for your reference.
  • Label. This is the label of the button.
  • URL. Specify the URL where users redirected to.
  • Open link in new tab. If enabled, the link will be opened in new tab.

Style Properties

The general view of button is configured through Form Settings. It's applied to all buttons. Here you can adjust view of the button.
  • Style. Adjust the button style and position.
  • Icons. These icons appear near the button label.
  • Colors. Adjust the colors of the button. You can do it for different button states.
  • Custom CSS class. This class name will be added to the button.
  • CSS styles. Set custom css for certain element parts and states.

Conditional Logic

Here you can create rules to show or hide the element depending on the values of other fields.

Back To Top