Hey, WordPress web developer :) Check out WPMU DEV

Skip to Main Content
Docs / / Forminator

4. Forminator

Written by Savo Vujovic | Last updated: April 6, 2018

TO GET STARTED

New to WordPress? Our Installing Plugins guide will walk you through installing your first plugin. Or, if you’re a member of WPMU DEV, you can use the WPMU DEV Dashboard plugin to easily install new plugins directly on your WordPress site.

4.1 Dashboard

Link to chapter 1

The Dashboard will give you a quick overview of all your Forms, Quizzes, and Polls.

At the beginning, you won’t see much data but once your visitors start to make use of your Forms, Quizzes and Polls the Dashboard will populate with views, conversion rates, rankings etc.

Dashboard

4.2 Forms

Link to chapter 2

Ok, let’s start with a form first.

Go to Forminator/Forms and click on the “CREATE” button to start making your brand new Form:

Forms-new

Each Form must have a name (so you can easily distinguish/track them later) and will come with pre defined fields like Name, Email, Phone number and Message area (which you can delete and/or edit of course).

Enter the name of your Form in the Name your form field and proceed by adding new fields or/and editing existing ones.

Name-your-form

ADDING A NEW FIELD

All the available Form fields are located on the right side of your screen, which you can add to your form by simply dragging and dropping them.

Forms-module

When you DRAG a new field to the Form you’ll have 2 options:

  • A – You can add a field in a new separate block anywhere on the form
  • B – You can add a new field within the same block (so you can have several fields – up to 3 max) left, right or in the middle if there are 2 fields already present

There are no rights or wrongs here – this all depends on what you would like to achieve design wise.

Fields-behavior

On the contrary to Drag&Drop, when you CLICK on the field it will be automatically added to the end of the form in a separate block (which you can also move if you wish).

When adding a new field or editing an existing one you can specify if the field is REQUIRED or not (a “Required Field” is a field that must be filled in with value before submission of a form (each required field will have a * on them suggesting your users visually that the field needs to be filled out)) and set its Custom class and/or Conditional logic in the ADVANCED tab.

Advanced-ALL

Advanced tab allows you to configure:

  • Custom class: Here you can add a class to your field so you can do custom CSS (you can add multiple classes separated by space)
  • Conditional logic: Conditional Logic is a feature that lets you easily show or hide form fields based on how someone responds to other fields on the form. This will help streamline your form, make it “appear” short (so you can show other fields when a condition is met for example) or create customized form experience
Conditions all

To top it off, if you wish you can Clone or Delete your field ( when you use clone the whole field will be automatically added to the end of the current form).

Clone-and-delete

You can always save the progress of your form by pressing the SAVE button at the end of the page and when you are done you can proceed to set up your form by pressing the FORM SETTINGS button.

Form-settings

Let’s go over all fields and explain what they do.

NAME

Adds a name field to your form.

Name-General

Name – General

  • Use multiple name fields: This will give you additional options so you can add Prefix, First Name, Middle Name or Last Name to your Name field.

You can also change the Field label, put Placeholder text or add a custom Description.

Name-field-Multiple-name

EMAIL

Adds an email field to your form.

Email-form

Email – General

  • Enable validation: Each time a user enters his email this field will check if it has a valid format. Enabling this will let you enter your “Custom validation error message” for the invalid ones.

You can also change the Field label, put Placeholder text or add a custom Description.

PHONE

Adds a phone field to your form.

Phone – General

  • Use character limit: Allows you to set up a limit for the number of characters
  • Enable Validation: Lets you chose validation format for Standard (US) or International

You can also change the Field label, put Placeholder text or add a custom Description.

TEXT

Adds a text field to your form.

Text-field

Text – General

  • Text input type: Here you can choose for your text field to be in a single line or a text area
  • Use input limit: Lets you limit the number of allowed characters or words (if you don’t like to read walls of text ). When you set this up the user will also see how much chars/words he has available for his input
Text-char-limits

You can also change the Field label, put Placeholder text or add a custom Description.

ADDRESS

Adds an address field to your form.

Address-field

Address – General

  • You can specify to add: Street address, Address Line 2, City, State/Province, ZIP/Postal code and/or Country (list of countries will be auto-populated)

With all fields enabled the Address field will look like something like:

You can also change the Field label, put Placeholder text or add a custom Description.

WEBSITE

Adds a website field to your form.

Website-field

Website – General

  • Enable validation: Each time a user enters a domain name this field will check if has a valid format. Enabling this will let you enter your “Custom validation error message” for the invalid ones.

You can also change the Field label, put Placeholder text or add a custom Description.

FILE UPLOAD

Adds a file upload field to your form.

File-Upload

File upload – General

  • Show description: Lets you show and add a custom description to this field

You can also change the Field label.

NUMBER

Adds a number field to your form (this field only allows numbers as inputs).

Number-field

Number – General

  • Limit input: Lets you setup Minimum and Maximum number of characters for this field

You can also change the Field label, put Placeholder text or add a custom Description.

SINGLE CHOICE

Adds a single choice field to your form.

Single-Choice

Single choice – General

  • Choice input type: Here you can add your choices, label them, put value (this data will actually be stored) for each one and you can present them via a drop-down menu or as radio buttons (you can also put a predefined value for a radio button by selecting it on the field).
Single-choice-various

You can also change the Field label or/and add a custom Description to the field.

MULTIPLE CHOICES

Adds a multiple choice field to your form.

Multiple-choices-field

Multiple choice – General

  • Choice input type: Here you can add your choices, label them, put value for each one (this data will actually be stored) and you can present them via Multi selection field or Checkboxes.
Multiple-choices

You can also change the Field label or/and add a custom Description to the field.

DATE

Adds a date field to your form.

Date – General

  • Date format: Default value is presented as Y-M-D but you can also present your date as M/D/Y or D/M/Y
  • Field type: Allows you to change the style of your Date field to Date picker, Drop Downs or Text Inputs
  • Use calendar icon: Put a calendar icon in your date field
Date-choices

You can also change the Field label, put Placeholder text or add a custom Description.

Date – Advanced

Date field has some additional options in the advanced tab:

  • Restrict date choices: Allows you restrict certain days of the week to be selected (via Days of the week tab) or you can restric specific dates (via Custom dates tab)
  • Restrict Year Range: Here you can restrict year range by setting a minimum and a maximum

TIME

Adds a time field to your form.

Time-field

Time – General

  • Time format: Lets you choose a format for your time
Time-field-am-pm

You can also change the Field label or/and put Placeholder text.

HTML

Adds an HTML field to your form. This only displays formatted HTML within the form and isn’t for an actual input.

PAGINATION

Adds pagination to your forms so you can add steps to it or cut the long ones in sections.

Pagination field

Pagination – General

  • Step label: Steps you label here will show up in the Navigation steps (see Form Settings/Pagination for more details).

Example of a paginated form on the Front end:

Pagination-example

HIDDEN FIELD

Adds a hidden field to your forms, not visible on the front end, so you can record something specific on form entry.

There are lots of options like IP Address, Date, Post/Page data embeds or you can even record your users’ info (depending on your needs). Just click on the Default value field and choose your desired one.

You can also label this field in the Field label.

SECTION

Adds an unfillable section to your form, so you can create sections and highlight them.

Section-field

Section – General

  • Section title: Adds a title to your section
  • Section subtitle: Adds a subtitle to your section
  • Section with border: Adds a borderline underneath your section

A brief example of this:

reCAPTCHA

Do you want to use Google’s reCAPTCHA on your forms?

Please refer to SETTINGS in order to set this up. Once done a new CAPTCHA field will be available under Forms fields which you can then add to all new or already created forms on your site.

reCaptcha

reCAPTCHA field will protect your website from spam and abuse while letting real people pass through with ease and will look something like this on you Forms:

reCAPTCHA-preview

If you chose to go with the Invisible reCAPTCHA you will get a service designed to protect sites and apps from spam and abuse without any need for users to click on “I’m not a robot”. Invisible reCAPTCHA will use advanced risk analysis technology to separate humans from bots and will look something like this:

Invisible-recaptcha

POST DATA

Do you want to allow your visitors to Publish posts from the Front-end of your site? Well, we got something for you here. Just add this field to the form and enable your desired features.

Post-data
  • Submitted data status: Specify what happens to the post once the form is submitted. You can allow visitors to auto Publish new posts or mark them as Draft/Pending in order to take full control.
  • Set default author: Choose a default author for all submits (Author must be a user on of your site)
  • Post title: Allows your visitors to enter a title of their post
  • Post content: Allows your visitors to enter the content of their post
  • Post excerpt: Adds excerpt to the post
  • Featured image: Allows submission of a featured image. If you are using Smush and your enabled “Automatic smush” images submitted through here will be smushed before being added to your Media Library.
  • Category & Tag: Allows visitors to choose a Category or a Tag for their post (must be already present – they can’t add new ones)
  • This post has custom fields: Lets you add as many custom fields as you choose so (this data will be displayed in your Post as Custom post data)

FORM SETTINGS

If you navigated here, it means you made the backbone of your super awesome form so let’s see what you can do about its appearance and behavior.

There are 4 sections:

  • Appearance,
  • Pagination (will be available if your form has Pagination),
  • Form Behaviour and
  • Form Emails

Don’t forget that you can always preview your from by clicking on the PREVIEW FORM button.

Appearance

Here you can edit and configure the appearance of your form to the smallest details.

Appearance

Form name: Pick a name for your form module. This is just for you in order to easily identify forms and will not be displayed on your site.

Design & Colors: Use our pre-made templates or customize color of the Background, Border, Title, Subtitle, Labels, Inputs, Buttons and so much more!

Typography: Setup your desired typography for Title, Subtitle, Label, Input, Buttons and Notifications. This includes Font family, Font size, Font Weight and Alignment when applicable.

Fields style: Lets you choose a smaller (Enclosed) or a wider (Open) separation between fields.

A brief example of the Open style:

Fields-OPEN

A brief example of the Enclosed style:

Fields-ENCLOSED

Custom text: Do you want to change the text of your Submit button or display a custom message when the form is not properly filled? Just enable the feature and enter your custom text here.

Custom-text

Use custom submit button text changes the text of your submit button and Use custom invalid form message will show your custom message in the header of your form if the form is not properly filled out.

A brief example:

Custom-text-example

Custom CSS: Here you can customize your form using CSS.

Custom-CSS

If you need help with CSS our 24/7 Live Support will be right by your side at https://premium.wpmudev.org/live-support/.

Pagination

If your form has pagination fields you can additionally configure them here. As a default, nothing will be displayed in your forms Header, but you can choose to set it up differently.

For example, if you made a form with 3 pagination sections like Personal Data, Education, and Work Experience – you can choose to display them at the top of the form (in its header) so the user gets a sense of progression or just so your form looks extra awesome:

Last pagination step is always named here and the rest are named per pagination field in their Step Label (see Adding a new field/Pagination).

Pagination-header

Form behavior

From lifespan: Configures the lifespan of your form. You can choose for it not to expire, to expire on a certain date or after a certain amount of submits.

Take note that once the form expires it will not be visible on the front-end (but will be still available in the back-end).

Submission behavior:  Configure what happens after the submission of the form. For example, display a custom “Thank you message” or redirect your users to a certain page – for example mydomain.com/thank-you

Submission method: Save your server resources by using AJAX for form submission, send only one request instead many that are needed to load the full page.

Submission-method

Validation method: Lets you choose your validation method

Validation-method
  • Server only: When you click the Submit button, a request is sent to the server and validation is returned from the server via AJAX or via PHP validation on refresh. This is good if you know you have a lot of users that use outdated browsers (like IE5/IE6) or are navigating you to your form from mobile browsers that don’t support inline validation.
  • On form submit: Validation happens when you click the Submit button, but the data never gets sent to the server if is it isn’t valid (this uses Javascript validation) – this should work with most browsers
  • Enable inline validation: Validation happens as user types using Javascript and this might be the best option for modern browsers

Security: This section allows you protect your form

  • Enable honeypot protection: Having trouble with bots? This will trick and trap spam bots into revealing themselves by giving them a challenge that human users cannot see.
  • Only logged-in users can submit: Does just that

Form emails

Lets you configure and send out auto emails to the user who filled out the form and/or to you as well (the administrator). Both emails can be completely customized with a Subject, custom Text or you can even add form fields data to them.

email

That’s it! Once you are done just press the PUBLISH button.

How do I display a FORM on my site?

POSTING-FORM-POLL-QUIZ

Form management and tracking

Forms-tracking

When you navigate to Forminator/Forms you’ll see the list of your forms, their entries, views, and conversion rate.

You can, of course, quickly access Form fields, Form settings, Clone a form, Preview a form and see detailed stats of all submits (for a specific form) by clicking the View entries button.

View entries

I guess you probably wondered by now – where can I see the submitted data? Beside viewing entries data, View entries module also enables you to export all entries anytime or even schedule exports and send them to your email.

Entries display settings

Entries-display-settings

Do you wish to filter the data of your report? If you choose not to display certain ones just press the UPDATE TABLE button (don’t worry as this just displays or hides certain values – it does not delete that data so you can play around with this as much as you want).

Entries

Here you can view the list of all entries (for a specific form) and the data submitted through them. You can also delete entries that you don’t need or have false data.

When you expand an entry by pressing the + button you’ll see the data user submitted (this also shows your Hidden field data).

Export entries

Do you wish to export all your entries? You can do that instantly by pressing the EXPORT ENTRIES button (which will generate a CSV file) or you can even set up a scheduled export.

Previous exports button will show you a log of all previous exports and if you wish to schedule your exports, click the EDIT button, configure their frequency and add an email you wish to receive them to.

This wraps up everything about Forms!  If you have any additional questions our 24/7 Live Support will be right by your side at https://premium.wpmudev.org/live-support/..

 

4.3 Polls

Link to chapter 3

Do you want to see your visitors opinions or do a quick analysis? Navigate to Forminator/Polls and click on the CREATE button.

Adding a new Poll

Details

First, you need to name your Poll and ask a question of course :)

Poll-details

Enter your Poll Title, Question and add a description to it.

Poll-answers

Add as many answers as you wish (you can even add custom input field when you want to allow your visitors to manually enter their answer – for example, you can use this field for the “Other” option), name your Vote button (in the Button label field) and proceed to Appearance by clicking on the CONTINUE button.

Don’t forget you can always preview your POLL by clicking on the PREVIEW button.

Appearance

Poll-appearance

Poll results behavior: Once the visitor votes on your poll, you want to configure its behavior. You can link the results of the poll during it, after voting or do not show them at all.

Poll results style: Pretty self-explanatory – this displays your Poll results in a Bar or a Pie chart.

Submission: Enable AJAX will prevent refresh while poll data is being submitted

Poll-appearance

Poll votes count: Shows number of votes when viewing Poll results (only works on Bar chart)

Colors: Customize background, border, description, texts, input fields, buttons and results link (even with Static, Hover & Active where applicable).

Vote number limit: If you wish to allow the same visitor to vote several times you can enable it here and set its frequency to minutes, hours, days, weeks, months or years (set 0 for the purpose of testing).

That’s it! Once you are done just press the FINISH button at the end.

How do I display a POLL on my site?

Poll management and tracking

Polls-data

When you navigate to Forminator/Poll you’ll see the list of your polls, their views, votes and conversion rate.

You can, of course, quickly Edit settings, Clone a poll, Preview a poll and see detailed stats of all submits (for a specific poll) by clicking the View votes.

View votes

This is the place you can see the submitted data and how your visitors voted (for a specific poll). Beside viewing vote stats, View votes module also allows you to export all votes data anytime or even schedule exports and send them to your email.

List of custom votes

If your answers had custom input fields (where visitors could enter their custom message) you will see them here (separated by comma):

Polls-list-of-custom-votes

Poll votes

At the bottom of the screen, you can see the result of the Poll (presented as a Bar or a Pie chart depending on what you configured while making your Poll).

Export votes

Export-votes

You can export all your votes as a CSV file, see the log of all previous exports or you can even schedule an export so the CSV file is sent right to your desired email by clicking the EDIT button.

 

4.4 Quizzes

Link to chapter 4

With this module, you can make your own quizzes to test your visitors knowledge about a certain subject or just to entertain them.

Navigate to Forminator/Quizzes and press the Create button.

There are 2 types of Quizzes you can make:

  • No wrong answer and
  • Knowledge ones
Quiz-type

NO WRONG ANSWER QUIZ

This module allows you to make a fun quiz with no right or wrong answers. After your visitor submits his answers he will get an appropriate Result (depending on the logic you set up).

Quiz details

Quiz Title: Name your quiz here.

Featured image: Add a featured image to this quiz.

Description/Intro: You can explain what it this quiz about or just do a brief intro.

Visual style: Displays your questions in a List or a Grid style.

After you done with the Quiz details proceed to the next step by clicking on the CONTINUE button. Don’t forget that you can always preview your Quiz by clicking on the PREVIEW button.

Quiz results

You might be wondering right now “Wait, wait – results? But we did not ask any questions yet!” This is the intended behavior for this quiz as we first need to set up all possible results and then assign answers to them (which is done in the following module).

Let’s say you want your visitor to find out if he is a Dog or a Cat person. In this example – our end result can be something like:

  • Cat (main result) and You’re a Cat lover – stay PAWsitive! (description of the result)
  • Dog (main result) and “Man’s best friend” is just for you! (description of the result)
Quiz-results

Title: What will visitor see as the end result

Image: Featured image of the end result

Description: Adds a description to the end result

After you are done setting up the possible results – move to the next module by clicking on the CONTINUE button.

Questions

Here you add your questions and assign appropriate answers to them. Make sure to assign Priority order if you are going to make an even number of questions so Forminator knows which Result to show if there are even number of scores for each result.

Quiz-no-wrong-answer-questions

A sample question – Do you like to take long walks? For our example to work, you need to make at least 2 answers (since we have 2 available results) and assign each one with a result (which visitors won’t see). So, for “No” I assigned “Cat” and for “Yes” I assigned “Dog”.

No-wrong-answers-questions

Repeat this process and add as many questions as you wish! Once the visitor answers everything he will be presented with a Result that has a higher score.

Upon adding all your questions press the FINISH button at the bottom of your screen.

How do I display a Quiz on my site?

KNOWLEDGE QUIZ

This module allows you to add as many knowledge quizzes as you wish so you can entertain your visitors or test their knowledge.

Quiz details

Knowledge-quiz

Quiz Title: Adds a title to your quiz.

Featured image: Add a featured image to your quiz.

Description / Intro: Shortly describe what is this quiz about.

Visual style: Sort questions/answers in a List or a Grid style on your post/page

Once you name and configure your quiz press the CONTINUE button to move on to the next module and add questions.

Don’t forget you can preview your Quiz by clicking on the PREVIEW button.

Quiz questions

You can add as many questions, assign as many answers to each question (just make sure to select the right answer for each question) and even add images to your answers!

Knowledge-answers

After adding all your questions proceed to the next module (by pressing the CONTINUE button) so you can configure your Knowledge quiz settings and behavior.

Quiz settings

Results behavior

Results-behavior

Depending on your preferences you can configure your quiz to show the answer as right or wrong straight away or you can present the whole thing at the end of the quiz.

Knowledge-settings

Answer phrasing: Pick how you want the correct & incorrect answers to read. Use <%UserAnswer%> to pull in the value user selected & <%CorrectAnswer%> to pull in the correct value.

Final count message: Edit the copy of the final result count message that will appear after the quiz is complete. Use <%YourNum%> to display number of correct answers & <%Total%> for total number of questions.

Share on social media: Do you wish your users to share you Quiz on social media? Enable the ones you want and don’t forget you can also control how will your posts/pages look when they are shared over social media via our SmartCrawls OpenGraph.

Once done press the FINISH button at the bottom of your screen.

How do I display a Quiz on my site?

POSTING-FORM-POLL-QUIZ

Quiz management and tracking

When you navigate to Forminator/Quizz you’ll see the list of your quizzes, their views, entries, and conversion rate.

You can, of course, quickly Edit settings of a quiz, Clone a quiz, Preview a quiz and see detailed stats of all submits (for a specific quiz) by clicking the View entries.

View entries

This is the place you can see the submitted data, how your visitors answered and their results. Beside viewing quiz stats, View entries module also allows you to export all entries anytime or even schedule those exports to your email.

Quiz entries
Here you can view the list of all entries (for a specific quiz) and the data submitted from a quiz. You can also delete entries that you don’t need.

Quiz-results

When you expand an entry by pressing the + button you’ll see the submitted data.

Quiz-expand

Export entries

Do you wish to export all your entries from a specific Quiz? You can instantly export one as a CSV file or you can even set up a scheduled export so you receive the file on your email.

Quiz-export-entries

Previous exports button will show you a log of all previous exports and if you wish to schedule your exports, click the EDIT button.

Schedule-export

 

4.5 Settings

Link to chapter 5

LISTINGS PAGE

When you embed multiple Forms, Quizzes and Forms on a single page things can get a bit hectics or just look plain ugly. You can set a pagination after an X number of Modules here.

Listings-page

ENTRIES PAGE

Each time a visitor submits a Form, Quiz or a Poll Forminator creates an Entry for that specific module. Entries can grow fast and wide so Forminator sets a default pagination after 10 entries.

This is an example of entries being paginated:

Entries-pagination

You can change the value for entries pagination of all your modules here:

Entries-page

reCAPTCHA

Having trouble with bots or you just want to add an additional layer of protection? Forminator allows you to do just that by using Google reCAPTCHA.

Go to Forminator/Settings and click on the ADD CREDENTIALS button.

Google-reCAPTCHA

This will open a new pop-up so you can configure it and add your site credentials.

reCAPTCHA creds

First, you need to register your site – so go to https://www.google.com/recaptcha/admin#list, Label your creds, choose Invisible reCAPTCHA and add your site (make sure you register your reCAPTCHA site type as Invisible reCAPTCHA to support both reCAPTCHA V2 and invisible reCAPTCHA).

reCAPTCHA-register

From the next step, take your Site Key, your Secret key and paste them into the appropriate lines on your site

Keys

Once done – go to https://developers.google.com/recaptcha/docs/language, see the code of your site language, add it to the Language line on your site, choose a Theme and press DONE.

That’s it! This will create reCAPTCHA field so you can add it your Forms (like any other Form field).

UNINSTALL SETTINGS

Forminator keeps all your data after you uninstall it (in case you want to delete the plugin and then get back to it later without losing anything).

You can modify that behaviour here:

Uninstall-options

As always if you have any additional questions our 24/7 Live Support will be right by your side at https://premium.wpmudev.org/live-support/.