Pinterest Stumbleupon Whatsapp
Ads by Google

Believe it or not, finding the right contact form for you and your website’s visitors isn’t easy. I was stuck with a WordPress plugin that was alright for some time, but I became frustrated with it when I ran into an issue I couldn’t solve. Then I discovered Contact Form 7.

Contact Form 7, which is featured on our Best WordPress Plugins, stood out because it was so simple and easy to use. Due to being frustrated with an issue of the contact form plugin on my own website, I was eager to find out more about it. Needless to say, it went far beyond my expectations. It’s the best contact form plugin for WordPress that I’ve used yet.

What You Want And Need In A Contact Form

It may not seem like there’s much that would go into a solid contact form plugin. Search the WordPress plugin directory, however, and you’ll find a plethora of results. You’ll be overwhelmed, wondering where to start.

To help assist you, should you want to look for others besides Contact Form 7, here are a few characteristics of a good contact form. These characteristics in Contact Form 7 stood out to me:

  • Complete customizability for whatever your needs are
  • Simple “behind the scenes” interface and options for quick tweaking
  • Useful help documents to answer your questions
  • Incoming emails that are easy to read

In upcoming sections of this article, we’ll explore some of the options in Contact Form 7 that uniquely make it completely customizable – and easy to use for both the visitor and you, the site owner.

Don’t Get Overwhelmed

Once you install the plugin and start setting up your contact form, the task can initially seem a little daunting. “There are so many fields!” “What’s does this dropdown menu of ‘tags’ do?” “How do I change and add different functions?” These are all things I overwhelmed myself with. The key is to take in one thing at a time, and start familiarizing yourself with the plugin. It’s not complicated. But just like anything new, there’s an initial learning curve.

Ads by Google

I promise you: this curve is very short.

Setting Up And Customizing

Step One: Familiarize Yourself With Contact Form 7

1 Contact Form 7 - menu link - settings

The above is what you should see once the plugin is installed. Among the other menu items in the sidebar, there should be “Contact”. Alternatively, you can go to “Plugins” and click the “Settings” link under “Contact Form 7”.

2 Contact Form 7 - WordPress Plugins - Settings Link

Once you open up the settings, you’ll see a message box displaying various “help” links. Don’t quickly dismiss this, as there are a lot of important tips and instructions, including a basic “Getting Started with Contact Form 7” guide, a page completely dedicated to using tags and how they work, as well as how to set up the email portion, and briefly describing each of the sections on the admin (settings) screen.

3 Contact Form 7 - Main Screen

You don’t need to have everything about Contact Form 7 memorized, but just know that there are resources available to answer your questions when one arises. Personally, I learn as I go and generally try to figure things out for myself, but like to have resources readily accessible when I come up against something I’m unsure of.

Step Two: Create A New Contact Form

To begin creating a new contact form, click “Add New”.. You’ll then be prompted with a page as seen below. If you’re using English, click the larger blue button. If you’re using a different language, choose the one you want, and click the light gray button on the right of the language menu.

4 Contact Form 7 - New Contact Form - languages

The first thing you’ll want to do is name your contact form.

5 Contact Form 7 - New Contact Form - name

The next section is customizing the actual contact form that will appear on your website. There are some tags already entered to give you a general idea of what it can look like, but you can add in and take out anything that you’d like. To the right of the text body is a dropdown menu titled “Generate Tag”, which contains all the tags to choose from.

6 Contact Form 7 - New Contact Form - body and tags

Once you click the desired tag, you will be prompted with additional options to customize it to your liking. You then copy the code and paste it into the “Form” text field.

7 Contact Form 7 - New Contact Form - Form tag

Next, you’ll add any text that you want to appear with the tag, as seen above.

This is how the tag translates to the actual form on the website.

8 Contact Form 7 - New Contact Form - Form tag live example

On a personal opinion note, I like the “acceptance” check box in combination with making the other text fields “required”, as to ensure I don’t get spam messages sent to my email.

Next you move on to the email message body, labeled “Mail”. The fields really don’t need to be tweaked much. The tags will automatically be added. You can choose exactly how you would like the message body to be laid out.

9 Contact Form 7 - New Contact Form - mail fields and message preview

The last option that you likely won’t have to do much with, but can if you’d like, is editing the different message responses.

10 Contact Form 7 - New Contact Form - customize messages

You can see some of the options above. This is great for communicating to your visitors that their message did, in fact, get sent. It’s also allows you to make the message a bit more personal to them.

11 Contact Form 7 - New Contact Form - status message example

A Feature I Recommend Using

When you are associated with various endeavors and receive a lot of emails every day, it can be difficult to sort them out based on importance. Of course, you can use labels and filters to manage your emails in Gmail Regain Control Over Your Inbox With These 5 Tips For Managing Gmail Regain Control Over Your Inbox With These 5 Tips For Managing Gmail Everyone knows that these days, it's pretty difficult to survive or to manage your affairs without email. In fact, most people have two or three emails to manage, so without a good handle on email... Read More , but I needed to go a step further. I discovered a tag in Contact Form 7 allowing me to do so. This is the “drop-down menu” tag.

12 Contact Form 7 - New contact form - featuring drop-down menu tag

Once you select and customize it (I recommend making it a required field and also including a blank), paste the code into the “Form” text box and format it as I have in the image, putting the various options (as many as you’d like) in quotations. You might wonder why I recommend including a blank entry, and the reason is because it forces your visitors to choose the appropriate reason for which they’re contacting you, rather than just leaving it as the first option.

13 Contact Form 7 - Live on website - dropdown example

To make it appear in the subject line, you must paste the code into the “Subject” field in the “Mail” form. Be sure to place it before the “[your-subject]” tag. I also added a colon after it.

13.1 Contact Form 7 - New contact form - featuring drop-down tag in mail form

Step Three: Add The Shortcode To Your Contact Page

14 Contact Form 7 - code

Once you have the bulk of your contact form set up to your liking, copy the shortcode at the top of the page and paste it into the “Contact” page on your website. Of course, if you don’t have one yet, you’ll need to create one.

15 Contact Form 7 code in contact me page

You don’t need to paste this in the “Text” view of the page,  the “Visual” view is fine – that’s the beauty of shortcode. Once you’ve pasted it in, just click the blue “Update” or “Publish” button.

Step Four: Preview It, Test It, Tweak It, Repeat

Once you save your Contact page, you can check out what your new contact form looks like.

16 Contact Form 7 - Live on website

If there are any tweaks that you want to make, simply go back into the Contact Form 7 settings, make them, click the blue “Save” button. That’s it: there’s no need to recopy and paste the shortcode into your Contact page again.

You’ll also want to test filling out the form and sending yourself an email to make sure all looks good on the receiving end.

17 Contact Form 7 - example email

Step Five: Check Out Additional Tips

18 Contact Form 7 - Additional Tips Links

Remember that message box I referred to earlier in the article, that contains the different helpful links on setting up Contact Form 7? It also links to some other helpful pages that you might want to look at. The topics include combining Contact Form 7 with Akismet for spam filtering, tracking with Google Analytics and others.

In addition, you can always refer to the official Contact Form 7 website, for all information, FAQs, troubleshooting, documents and updates regarding the plugin.

Step Six: Install A Theme (Optional)

If you you want even more customization, there are several themes available. Themeover.com has 13 free Contact Form 7 themes for you to choose from, if you want a custom look for your forms.

Conclusion

By now, you probably realize that WordPress isn’t just for blogging Forget Blogging: How To Power Any Website With WordPress Forget Blogging: How To Power Any Website With WordPress Have you heard? Blogs are old news. I hope you didn’t jump on that particular bandwagon. Yep, static sites are the all the rage now. I’m joking, of course. There has always been the need... Read More and can act as an awesome platform for any kind of website:  companies, personal and/or professional users, or anything else. And you likely will want to provide your visitors with an easy way to contact you. As someone who has a personal website Making Your Own Website: Your Career Will Thank You Later Making Your Own Website: Your Career Will Thank You Later A personal website is probably one of the biggest aspects of your online presence. Sure other areas such as social networks and blogs are important, but your website is like a home base – a... Read More for a professional online presence Creating A Professional Online Presence Is Crucial For Today's Job Market: Here's How Creating A Professional Online Presence Is Crucial For Today's Job Market: Here's How Let’s face it, the job market is becoming more and more competitive. No matter where you live, getting noticed is becoming more and more difficult. Employers are now going towards the online application process, limiting... Read More , I understood that providing my visitors with an easy method of contacting me was essential. Contact Form 7 filled all the gaps in communication between my website’s visitors and I, and continues to do so.

Have you used Contact Form 7? If so, what has your experience been with it? Did you keep using it, or did you ultimately move on to a different plugin? Whatever your experience is, we want to hear your thoughts, input and recommendations from you.

  1. Mohammed
    January 20, 2015 at 6:29 pm

    I'm getting two contact form displayed on my page. One the Edited and another is the default one. Could anyone help me with this problem?

  2. Motti
    December 19, 2014 at 5:09 am

    Hi Aaron, great post!
    I wonder if it's possible to add custom messages to CF7.
    I'd like to integrate CF7 with PayPal and once the form is submitted, to display a message along the lines of: "You will now be directed to PayPal for completing your payment".
    Would you know if and how it can be done?

  3. Shakti
    December 11, 2014 at 10:59 am

    HI Aaron, Brilliant post! I espcially liked, 'by checking this box, you agree that you are awesome', I am nick the idea :-)

    Btw, would you know, how to bring text and image in-line in the form? e.g. I am using below code but the image and text are not appearing in-line.

    Email Us

    Apology, I am bit constrained with my coding skills :-)

    Thanks! a ton! - Shakti

  4. Constantin F.
    May 23, 2014 at 6:26 pm

    We also created a new plugin, that sends you push notifications on your iOS or Android device when somebody submits a new form via Contact Form 7 :).

    It takes ~1 second to get the notification :)
    The plugin is called 59sec. (www.59sec.com). There is a LITE version and a PRO version.

    You can test it live if you want :)

  5. Mia
    May 7, 2014 at 8:00 pm

    Hi, thanks for a great post! Very useful!
    Is there also possible in this plugin to e.g change the size of the textboxes?

  6. Peter
    April 11, 2014 at 4:41 pm

    Also you can style the Contact Form 7 with the latest update of NKS: Contact form — http://looks-awesome.com/portfolio/wordpress-plugins/nks-wordpress-contact-form/

    Three templates of tasty looking design inside. Customisation is pretty good as well.

  7. cryptex_vinci
    March 1, 2014 at 6:18 pm
  8. jess
    February 26, 2014 at 10:05 am

    can I add social media icons to the contact page in wordpress?

    • Aaron C
      March 1, 2014 at 7:26 pm

      Absolutely, Jess. You have a couple of options. You use a social media icon plugin in the sidebar as I did here: http://imgur.com/BksjR18. And as with any sidebard widget, you can choose which pages it is displayed on.

      You second option would be to upload and add each social media icon to the contact page and link them to your profiles.

      Does that help? If you need further step by step instructions, I'd be happy to help. Just head over to MakeUseOf Answers (http://www.makeuseof.com/answers/) and ask your question there. To ensure I see it, feel free to give me the link to your question — a good place for it would be right here in the comments so that others who are wondering the same thing can easily find your question and the answers.

  9. Kurt
    February 19, 2014 at 7:26 pm

    Like this plugin but have issues with radio/checkboxes and integration with bootstrap.

    If anyone knows how to get this plugin and bootstrap to display nice for things like radio/checkboxes please point me in the right direction.

    • Aaron C
      March 1, 2014 at 7:13 pm

      Kurt,

      Unfortunately I don't have a solution for your question, but you might want to check out MakeUseOf Answers (http://www.makeuseof.com/answers/) to see if someone has posted a solution, or ask the question yourself.

      Thanks for reading!

  10. David
    February 13, 2014 at 5:27 am

    gui form seems to answer the question for those who deal with many fields and mails a day. It creates a spreadsheet, in a similar way to google forms, allowing easy organization of contact forms. 7 is nice, but it lacks this amazing feature.

  11. Joel L
    January 28, 2014 at 4:20 am

    I love Contact Form 7. It's so easy to setup and it hasn't posed any problems for me in the couple of years I've used it.

  12. Jason John Cowart
    January 27, 2014 at 5:25 pm

    I like this form and have used it occasionally, but by far my favorite is visual form builder. The free version has tons and tons of features, and to this point, I've not yet needed to purchase the pro version. Very easy to use, drag-and-drop interface, I use it a lot. I highly recommend it!
    www (dot) cre8ivedesignmedia (dot) com

  13. Aaron
    January 27, 2014 at 3:17 pm

    I also recommend some additional free extensions. Save all your contact form submissions with Contact Form 7 DB and prevent spam with Contact Form 7 honeypot. I always use those two extensions on all my WP installs.

Leave a Reply

Your email address will not be published. Required fields are marked *