Formidable Forms: Getting Started Tutorial

The Formidable Forms plugin is powerful in that you can use it for most any form application you need.

In this tutorial you’ll see the major features of the free version, as well as the important settings you’ll want to configure for a contact form to make it secure and load fast on your site.

Plugin and site tech change all the time. Be sure to see the full post for any updates to this plugin tour.

---

Find this tutorial helpful?
Subscribe to the BlogAid YouTube channel

---

Also see what other contact form plugins I checked out and why I chose Formidable Forms.

Video

Transcript and bonus settings below the video

UPDATE: For the reCaptcha keys, v2 has been broken by bots. And v3 will put a recaptcha icon in the bottom right of every page. We hate it!! And I’m looking for other ways to do this.

Gutenberg: Use the Shortcode Block for inserting the form’s shortcode.

Link Mentioned: Get your reCaptcha keys

Transcript

Bonus settings not shown in the video

To have the visitor’s email set as the Reply-to email, take 3 steps:

1. Go to the form’s Settings > Actions & Notifications and open the Email Notification

2. In the bottom right of the From field is a button for Reply To, click that.

3. There will be 3 dots on the right (instead of the X shown) click that.
And then select the email field (your number may be different).

---

Start of Video Transcript

Install the Plugin

You’ll find the free version of Formidable Forms by searching that name in the WordPress plugin repository .

It will be listed as Contact Forms, Surveys & Quiz Forms Plugin by Formidable Forms Builder for WordPress.

Once installed you’ll see a new tab in your left admin sidebar.

Here you have links to:

• The form builder
• Entries to help you manage the info it can hold in the database
• Styles which have enough settings as to nearly be mind boggling
• Import/Export in case you want to convert from another form plugin that also held entries in your database
• Global Settings that help you easily configure speed and security settings across all forms
• Add Ons for using Formidable as the form for your optin list

We’ll be hitting the highlights of all these features so you can see just how powerful this plugin is. But we’ll focus our tutorial on the things most all site owners will need for a contact form.

Let’s go to the Forms builder.

As you can see, Formidable comes with one general Contact Us form already created for you.

I duplicated it for this tutorial.

To edit a form, just click it.

So that it can take the most screen space, Formidable will collapse your left admin sidebar.

Simply click the arrow at the bottom to expand it again.

As you can see, you have all of your common fields already populated in this form and all of them are set to required.

You can also see that the name fields have a description below them of what the form expects the visitor to enter. All of this is editable.

So let’s say you don’t want separate fields for the names.

Hover over the Last name field.

On the right you’ll see a trash can. Click to Delete the field. It will ask if you are sure and remind you that you will lose all data associated with this field.

Now let’s edit the First Name field.

Click on it once.

The Field Options appear on the left.

The Field Label is the text that appears above the field. Let’s change it to Full Name.

Next, click on Advanced.

The Field Description is where that hint below the field is stored.

Let’s delete that.

You could also add Placeholder Text. This will appear as ghost text inside the field and can give an example of the type of input you are expecting.

Let’s input Jane Smith.

And then Update the form.

Let’s return to the Add Fields tab on the left.

Let’s add a phone number field.

There are two ways to add a field.

Simply click on it and the field will be appended to the end of the form.

Or, you can click and drag it into position, which is what we are going to do.

The blue line signifies where it will be placed.

If you don’t drop it into the place you want, or change your mind, it’s easy to move.

Hover over it and you’ll see a four-pointed arrow on the right.

Simply click and drag it into the new position.

Be sure to configure the Field Options for it, especially if it should be required.

Click once on the field.

Let’s change the label to Best Number to Reach You.

And check the box for Required.

Update the form to take effect.

Let’s add some radio buttons.

Click and drag it over and drop it.

Then click once to bring up the Field Options.

Let’s change the label to Your Time Zone.

And mark it as Required.

Let’s add the 4 options we need for the visitor to choose.

And Update the form.

Now, let’s say you run a 24/7 business and you need to give a little info prior to adding the next field asking best time to call.

Use the HTML Field for that.

Click and drag it to where you want it and then click once to bring up the Field Options.

I’m actually going to delete the Field Label on this one.

In the Content, I’ve prepared a little HTML code that I’m going to copy and paste in.

Then update the form.

Let’s preview this form to see what we have.

You can view the form with or without your theme styling being involved.

It will open in a new tab every time, so be sure to close those so you know you are always seeing the latest changes.

We’ll jump back to our builder.

And, let’s add a text box below that asking when is the best day and time to call.

And update and preview.

Now that we have the basics of building a form, let’s look at a few other settings.

The Settings tab at the top affects only this form. We’ll cover the global settings that affect all forms in just a bit.

Here you have your form settings for the name or title.

The Content in the Form Description will display above your form. To be honest, if this is for a contact page, I’d rather make that in the contact page itself and then add the shortcode for the rest of the form under it. But, if it’s for an optin, you may want to add it here, or in the widget or block where you’ll be inserting the shortcode. It’s up to you as to what will work best.

And then below that you have the shortcode you can add anywhere on your site that can handle that. There is also a button in the text editor for it, if you’re using the classic editor.

Let’s scroll down to see the rest of these settings.

The On Submit section is where you select to show a message after the form has been submitted, or redirect to a custom Thank You page. If redirecting, you’ll want to have that page already created and have the URL handy.

And here’s another big deal for security and GDPR.

If you don’t want to track any of the form submission data in your database, be sure to check the box for “Do not store entries submitted from this form.”

If your site ever gets hacked, then they will get all those email addresses from your database. I strongly advise that you turn this off if you are not using a complex form that requires you mine the data.

If you have a super long or multi-page form, check the box to load with AJAX.

Definitely check the box to validate with JavaScript so it can check all of those required fields right there in the visitor’s browser.

Let’s jump over to the Actions & Notifications for this form.

Of course you want the form results emailed to you, and that is your only option in the free version.

Click the Email Notification module.

You can leave this To field set to the admin email if that is the one you want it sent to. Your admin email is the same one you have in your User profile and in Settings > General for the site.

If you would like to set it to another email, be sure to delete all parts of the tag that is there, including the brackets.

In the From field, same thing. Either use the admin email or remove everything except the lesser/greater than symbols and input your own email.

You don’t have to input all of those fields into the Message. If you leave it at default message, all of them will be included.

For better GDPR compliance, I suggest leaving the box unchecked for additional user info to be sent along in that email.

Click the Update button.

Next, let’s jump over to the Styling & Buttons for this form.

For the Style Template, I’ve found that setting this to Always use default is the best setting in most cases. It will be a mix of the plugin’s style and your theme’s style.

You’ll want to play with the options here of using that, or strictly Formidable’s or non of it’s styling and see what works best for you.

Be sure to update the form after you make a change and do a preview.

Here is where you can change the text on the submit button.

I usually at least change it to Send.

Again, update the form before you leave this page if you changed anything.

Next, let’s have a look at the global settings for Formidable that affect every form you create.

Hover over the Formidable tab.

Let’s go to Global Settings first.

If you have the pro version, this is where you would enter your license key.

In the Styling & Scripts section, be sure to check the Load form styling and set it to “only on applicable pages” if you are only using this plugin for a contact form. This ensures that the CSS and JS files for the form only load on pages where you have included the form. So, if that’s just the contact page, that’s the only place it will load.

But if you put it in a widget or a block for an optin or such that displays all over your site, you likely need to set it at the default for all pages. Just know that it will create at least 2 extra requests and a wee bit of load time for them. But a good caching plugin like WP Fastest Cache or WP Rocket should be able to handle that for you.

Leave the box checked for Do not use CSS Grids for form layouts unless you see an issue with your theme.

Okay, this next one is big for GDPR. Check the box not to store IPs with form submissions.

Then hit Update and all of your forms will have these settings.

Next, let’s jump to reCaptcha.

This is a service from Google to help cut down on spam bots. And it is set for v2, which has a checkbox.

You can also use v3, which is invisible. But to be honest, I’ve not had the best luck with v3 and have heard similar reports from others that it actually lets through too many spam bots. Plus, it puts it on every page of your site, if you have the forms set that way, and that little box down in the right corner of every page is beyond ugly.

Be sure to see the notes above or below this video for how to get the reCaptcha keys. The tutorial is for Contact Form 7, but the process of getting the keys is the same.

And if you were using v2 keys already, they should still be there, even if you created new v3 keys. So, be sure to select the correct ones.

Be sure to hit Update before you leave this page.

Let’s jump back to the form and see how to add this reCaptcha field.

It’s here in the Add Fields section.

Just click it and it will auto add itself above the Submit button.

Let’s scroll down to see that.

Now, it appears here in the builder. But as it says, it will not actually appear on the form until you activate those keys.

Be sure to Update your form before you leave. And you’ll need to do this for all the forms you’ve created.

Okay, I’ve saved the funniest part for last, as I know you’ll want to play with this for a while.

Let’s go to Styles.

And oh my gosh, you have a lot of options!

I think they are pretty much self-explanatory, so I’m going to leave it to you for experimenting to see what works best for you.

Just keep in mind that you don’t want to make it look like a circus. You need folks to get through your form as cleanly and fast as possible.

So, my suggestion is to do the minimum to make it match your theme’s branding colors and leave it at that, especially for just a contact form.

If you’re using this for an optin, then you may need to get a little fancier with it. And it is on a form by form basis.

I hope you’ve enjoyed this tour and tutorial of the Formidable Forms plugin.

Be sure to subscribe to the BlogAid YouTube channel, and visit BlogAid.net for more helpful site success tutorials.