Creating Forms with Formidable Pro
This post is using Formidable Pro, a plugin for WordPress that allows site managers to create forms for various needs. Some examples include sign-up sheets for events or avenues to receive feedback among many other options.
Click one of the options below to proceed:
Formidable Pro is a WordPress plugin that allows site administrators to create forms for gathering various data. To activate Formidable, select the Plugins option from the Dashboard menu, scroll down until you find Formidable Forms, then press Activate. Formidable will then appear below your Pages option on your Dashboard menu.
Create A Form
Once Formidable has been activated, you can start creating forms. Formidable will show up in the Dashboard Panel. To get started highlight the Formidable option and select Forms then click Add New.
When adding a new form, Formidable will allow you the option to either create a form from an existing template or one from scratch.
Once you have you have made your decision, you will be directed to the Build menu of the form which will allow you to add form fields or tweak what is existing. The images below are for if you selected Blank Form but the behavior of the menu works in any form.
- Note: If form fields and/or their descriptions need to be edited, go to the Build menu.
- Make sure that you are on the Build menu
- Name your form or edit the existing title if you choose
- Click the parenthetical statement to explain the purpose of the form and/or instructions on how the form is to be filled out.
You will be given a range of options to choose from regarding types of form fields. Click and drag the form field into place…
… each of which have descriptions and settings that can be edited.
- Select the asterisk if you want this form field to be a required field
- Provide a title for your form field or edit the existing title if you choose.
- Provide instructions as to how to fill out this form field (optional but recommended).
- Field Options Menu (for adding additional properties like Custom CSS Layouts)
reCAPTCHA is a Google plugin used in Formidable forms to validate form entries from human submissions to help quell any attempts from bots other automated methodologies.
Set up requires the use of a site key and a secret key. Click here to ensure to sign up for those keys.
Note: This requires a Google account to activate. You may use a personal account to get keys.
Once you have the Site Key and Secret Key from signing up for API access, go to the Formidable > Global Settings menu option and find the reCAPTCHA section of the screen as seen below:
Once the keys are entered, click the Update Options button at the top- or bottom-left of the page.
Edit Custom CSS Layouts / Form Page Layouts
Once all of your form fields and descriptions have been added, you can readjust the layout of the form by clicking on the Field Options Menu. In so doing, there are several options to choose from. The main focus of this section is adjusting the page layout and particular settings within each form field.
- Note: Each form field will have its own options, the example below and corresponding descriptions are of options in every form field.
Here are descriptions of each option shown above:
CSS layout classes: This is for adding CSS script to determine where a particular field will be located on the overall form. If left blank, Formidable will have list the form fields vertically one after another. To make modifications, you do not need CSS knowledge but there are a few considerations to make.
The examples below are the options you can choose from and a template of some of the the CSS classes.
- Note: The CSS Layout Classes below can be added only when the CSS layout classes field is highlighted. It will be inactive (grayed out) at any other time.
Label Position: Assigns the position form field label. The default setting will have the label aligned to the left edge of the form field.
Field Size: This option imposes limits on the length and the amount of characters (rows, columns, etc.) of the form field.
- Note: The field size parameters are specific to each form field type.
Visibility: If user roles are enabled on your site, this option can restrict who sees this form.
Conditional Logic: Certain form fields can be made visible after conditions have been met.
Validation: If the form field is dependent upon certain conditions (like Phone Number or Email Address), this option allows you to edit the response if the correct conditions are not met.
Click the Settings option. Under General menu:
There are several settings that can be changed quickly and easily however several of them are dependent upon other actions within your site.
- Aside from the Action After Form Submission option, all settings are going to be dependent on whether site user accounts are enabled and advanced coding (using AJAX)
- You can also choose what form respondents will receive as a confirmation as well as being notified of new entries. See Responses sent to an email / Linking to RT.
- Additionally, the form can be restricted to Logged-In Users. If selected, the form will require a DuckID and password to be seen. Users can allow form respondents to edit responses and restrict to one form submission.
Under the Form Actions option, you can choose who is notified of a form submission and how the message appears to that person.
To set up email notifications, click on the Form Actions option within the Settings for your form and select the envelope icon for an email notification (seen below).
- The email notification box.
- Label for the notification.
- The desired email address to receive the notification
- Subject line and message
- The number code in brackets is corresponding to a form field entry (which are on the right-hand side of the form action)
- The default message is for all entries into the form.
- Conditional logic may be applied to this notification depending on the nature of the form.
Adding a form to a web page
Formidable utilizes shortcodes that can be inserted into posts or pages. Shortcodes may be found either in the Build or Settings section of a given form. It will be in a set of brackets (e.g., Please select a valid form) and located in the upper-right hand corner of either page.
Links to Additional Content
For other help articles from CASIT, click here.