Contact Form 7 is by far the most popular forms plugin on the WP.org repo. CF7 has more functionality right off the repo than most plugins do overall. More than that, there is a massive selection of extensions for the plugin that let you do pretty much anything you can think of. With that in mind, we want to show you how to get the most out of Contact Form 7 and the huge selection of Contact Form 7 extensions.
Contact Form 7: A Brief Overview
Like we said above, CF7 is by far the most popular forms plugin, as well as being one of the most versatile. If you are unfamiliar with it however, it may appear complicated at first. But when you break it down, you will find that’s not the case.
Just because you use code to create your forms shouldn’t scare you away. It’s really quite intuitive. You don’t even technically need to learn the code used because the buttons above the text area give you a modal for customization. You can use the modals without worry, and Contact Form 7 will work great for you. But when you dive into the tags and code, you get the full power of the plugin.
For example, the default contact form template has 4 fields:
But let’s say that you need someone’s phone number, too. If you press the tel button, you can insert that field into the form.
The options are pretty straightforward, but a couple may need clarification.
- Name: This field is for you only. You use it both to identify the form in your organizational lists, and also in the shortcode to tell Contact Form 7 which telephone entry field you want to display.
- Default Value: This value will be what’s in the field by default. If you want to show them how you want the number formatted, for instance.
- ID Attribute: If you want to style this particular field with CSS, give it an ID here.
- Class Attribute: The CSS class for all of your telephone fields, or maybe fields in general. However, you do your class naming conventions is up to you.
- The Shortcode: Contact Form 7 fills in all the values as you go, so you can simply copy the code or hit Insert Tag to finish up. If you need to edit it later in the form, you can do so because all the info is right here, and you don’t have to re-do anything. The final code will look like [[tel contact-phone-1 id:phone-1 class:phone placeholder “1 (931) 762-0897”]]
Each of the tags you have by default work this way.
Other Tabs: Mail and Messages
The Mail tab is pretty straightforward. This is where you will take the shortcode labels from the previous form and use them to format the info that’s sent into a readable email. This way, when people use the contact form, the submission won’t be sent to you as gobbledygook. You also set up the headers and email addresses here, too.
The Messages tab is something many people don’t mess with. It’s where CF7 keeps all the front-facing messages that your users will see. The thank you, your email has been sent kind of messages or we’re sorry, you haven’t filled in all the required fields. That sort of thing.
It also has minor conditional logic, such as what happens if the message is flagged as spam. Contact Form 7 gives you a ton of control in this area, which is nice. Especially since all of this has been with the bare-bones free edition.
And it gets even better. Now that you’re familiar with what you can do with the plugin itself, let’s dig into some of the best Contact Form 7 extensions out there so you can really see the power under CF7’s hood.
Top Seven Contact Form 7 Extensions
We figure that seven is a good number to stick to because, well, it’s Contact Form 7. And that makes sense. With all the power that’s built into the free base plugin, you can go a long, long way with just a few plugins. Let’s get to it, then.
1. Conditional Fields for Contact Form 7
Of all the Contact Form 7 extensions out there, this might be the most important. One of the features that the base plugin doesn’t have is conditional logic. This plugin fixes that by extending CF7’s functionality. Instead of, let’s say, showing the same form to everyone regardless of device, you can give them a particular form suited better to their platform. And you don’t have to use CF7 just for contacts — you can make any kind of form you want. So if you need to have feedback forms appear after certain criteria are met, you can do that with this plugin.
Price: FREE | More Information
2. PayPal & Stripe Add-on
Maybe you don’t need a full ecommerce solution. Perhaps running WooCommerce or something else is just too much for the one or two things you sell. This plugin may be your best bet. You can keep a form made for each particular item you sell (each with unique SKU or ID), and your users will be redirected to either PayPal or Square upon submitting the form. You won’t be hosting or processing their payment information, just getting the benefit of selling your stuff with a few clicks.
Price: FREE | More Information
3. Really Simple CAPTCHA
We all hate CAPTCHA. Still, they’re an effective first defense against spam and security threats. Really Simple CAPTCHA is written by the same developer as Contact Form 7, so you know that of all extensions that provide this function, this one is the one to trust.
Price: FREE | More Information
4. Contact Form 7 Skins
CF7 is incredibly easy to customize. Sure, you can add CSS IDs to each form and style them that way, but why would you when Contact Form 7 Skins exists? This plugin uses a drag-and-drop editor so that if you’re not a design whiz and can whip out CSS at the drop of a hat, you can do this instead. One of the hallmarks of a professional website is a fully integrated design, forms included, and this can help you do that on your own without the help of a design professional.
If you really want to use Contact Forms 7 on your site to its fullest, you will want a variety of options for how you style it. CF7 Skins offers a number of premium bundles and add-ons so that you can get not only more templates and skins for your site, but also logic and the ability to break forms into multiple pages, and even more advanced styling than is available in the free version.
Price: FREE, with Premium Upgrades | More information
5. CF7 Autoresponder (Premium)
If you keep an email list (and we’re almost certain that you do), this premium Contact Form 7 extension might be something to take a look at. A lot of the email autoresponder services out there have less-than-stellar front-end integration with websites. Their widgets and APIs can get downright confusing sometimes. So CF7 Autoresponder lets you use a powerful plugin, that you already have styled perfectly to match your site and still generate and store all of the leads you want with your preferred email service. For just $18 on CodeCanyon, it’s a downright steal. Especially since it works with established forms, too. No need to rebuild anything. Just make sure this one knows they exist, and you’re in business. Literally.
Price: $18 | More Information
6. Contact Form 7 Storage (Premium)
If you really want to get the most out of Contact Form 7, you need to take advantage of that its all installed on WordPress. CF7 Storage makes it so that all of your form submissions are saved to your WP database. Many times, emails get lost. Or maybe the email server messes up, and you miss a major lead. Or worse, your email starts marking submissions from your website as spam/junk (from experience…that’s the worst). This plugin fixes that by giving you a server-side inbox of every submission from any of your forms. At $19, that’s less than a year of Google One. We think you will agree that’s a small price to pay for this kind of utility (and security, honestly).
Price: $19 | More Information
7. CF7 Drop Uploader (Premium)
Searching through file-structures and directories to find a file to upload is so 2002. The CF7 Drop Uploader brings everyone’s favorite plugin this modern touch and then some. Dragging any file onto the form will start the upload, and your users won’t have any wasted time as they search and click and click and click and click. Many times, users contact you for help with a problem, and if your forms don’t allow at least a screenshot upload, then you have friction between the user and the solution to their problem. Combine this with other Contact Form 7 extensions, like one that saves to your database, and you have really started squeezing the power out of the little plugin that could. Drop Uploader costs $17, but it’s absolutely worth it for the ease it brings your users.
Price: $17 | More Information
If you’re a Contact Form 7 user already, hopefully we were able to open your eyes to a few ways you can expand its utility on your website. And if you’re new to it, poke around at all the Contact Form 7 extensions out there. If you really want to get the most out of CF7, you need to find the right extensions. And the seven above really cover most of your bases in terms of expanding what is possible with the free plugin off the repo.
What are your favorite Contact Form 7 extensions?
Article featured image by Vitya_M / shutterstock.com
The post How to Get the Most Out of Contact Form 7 appeared first on Elegant Themes Blog.