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.
MaAnna,
Thanks so much for this Formidable Forms tutorial. You do such a great job of making things clear and understandable…really. ..easy to follow, and it all makes sense.
I remember the days when it used to take me all day to figure out how to do the simplest forms (in the days before WordPress)…had to try to find a free “script” or something like that, figure out how to install it, etc., etc., etc. …and then it would be a miracle if the form worked.
Things are so much easier now.
Thanks for all the great help you give us.
You’re welcome!!!
I remember coding my own forms back when too!! Didn’t need nearly as much validation or security then as we do now.
On local settings, Actions and Notifications you discussed the Email Notifications but what about the section below that called Send Email? Do we do anything with that? thanks. denise
Maybe we are looking at different things, but on mine, and in the video, the Send Email is at the top, in Form Actions and is the only choice you have in the free version for what you want the form to do.
Below that is the Email Notification settings section.
Are you seeing something different?
In your video at 11:18, after you have entered the email information, you scroll down and there are two boxes: Email Notification with an ON button to the right and below that Send Email with an ON button to the right. It’s the Send Email one I am not sure what to do with or what it really does. You don’t address that in your video. I turned it off and sent a practice contact form and it seemed to work fine. THANK YOU again for the great video and all your help.
I guess I left it at the default and mine works as is too.
I am loving your tutorial and have made a tournament application form. I cannot figure out how to get an email link into my HTML code? I put the link in before copying the code but it doesn’t show up in the Preview. Thanks.
That tutorial is just a few of the basics, it doesn’t cover everything the form can do.
Would take looking at your specific situation to be able to answer.
Of course, thank you. I found a way around by taking the HTML with link out of the form and onto the post. Thanks again for the tutorial and recommendation!!
MaAnna,
If it’s not too much trouble, can you tell me what plugin (if any) you use that allows people to “subscribe to comment replies via email”? I’m referring to the place where a commenter adds the name, email, and chooses to subscribe to the comments.
A lot of websites have a similar system that doesn’t seem to work correctly, but it seems that *your* system always *does* work correctly.
As always, thank you.
Christian
Check the Plugins section of the Helpful Posts page, which has a review of several comment reply notification plugins, plus links to tutorials.
The link for that page is at the very top of BlogAid, in the banner.
Also check the Plugins page, which is under Resources, for my top recommendations.
You’ll find the one that is the best fit for your needs, which may or may not be the one I’m using.
MaAnna…thanks…and checking the things you suggested is what I’m doing…good advice. Still not sure which one will fit what I need, but I’m narrowing it down.
Thanks again.
Thanks for a great tutorial about installing this great WordPress Plugin!
You’re most welcome, Harriet. I’m really liking the way the forms are styled in the email I receive too.
Agree, I definitely like the format of the test email, I sent on the form. It’s much easier to read.
Hi MaAnna, I love your teaching. Unfortunately, after many hours of trying this plugin, I think it does not work well with my theme. My brain is fried at this point:( It just won’t center, no matter what I try. Also, how do I connect it with my newsletter, if it would work?
It may not be the theme, it may be the editor. If you are using the Classic Editor, seriously consider using TinyMCE Advanced instead. See this post for more.
That way you can center align a paragraph and then put the shortcode inside those p tags. That may fix the alignment, but no guarantees.
I have a special page template that has a narrower content area for landing pages and such. Even if I can’t center something, it doesn’t look as bad as it does on a full width content area.
You’ll want to Google to see if there are any tutorials for connecting Formidable with your email list provider.
I don’t even try things like that, though. I just modify the raw form provided by the email list services. I actually have a tutorial for how to do that when using MailChimp on Gutenberg in my Gutenberg Ninja course.
Thanks for all your info. I actually walked away from it for a few hours, came back to try again, and it’s actually ok. Not perfect but def acceptable. I don’t know why, but that happens sometimes. And it sent me an email when I tested it….and that is what I needed it to do:) I loved your course on Gutenberg. I did EVERY little thing you taught! I made pages with you and made them private, making notes on the page itself on how to create the blocks. I am so thankful. You have a gift of teaching! It’s got me so excited as I am ready for the next stage of building my blogging business. I’m ready to do a series of lead magnets to begin building traffic and loyal followers. I hope to find help in your tutorials:)
Thanks again for this and I will keep this info.
Yay!!! Glad you got it to work. And thanks for your kind words on the Gutenberg Ninja course too!!!