Custom Contact Forms w/ Contact Form 7

Getting Started

There’s nothing more annoying than trying out plugin after plugin looking for the right one, but just not finding it. The purpose of this post is to not only help you skip that step, but also help get you going in creating a brilliantly customized contact form. We know there are a lot of contact form plugin options out there, but we personally are sold on Contact Form 7. And the best part of all, it’s free! So there’s step number one checked off the list. Of course, we have to tell you to do your own research and find the plugin that works best for you, but you could also just take our word for it. This plugin is great!

You can download Contact Form 7 from here. Then from your WordPress dashboard, navigate to Plugins >> Add New >> Upload Plugin. Find your plugin download file and upload. Once the plugin has been activated, navigate to Contact >> Add New from your admin panel.

Customizing Your Form

Now the fun part! When we say Contact Form 7 is fully customizable, we mean it! When you create a new form, you’ll see a basic layout already created for you. Like this one:

Now, let’s say you want to know how your users prefer being contacted. You can add a drop-down menu allowing them to choose!

  • From your list of tags, click “drop-down menu” then you’ll see a box open up (like the one below). There you can set your options for the dropdown and add in your contact methods.

  • Click Insert Tag and that’s it! Your contact form will now have a beautiful drop-down.

*Notice the note at the bottom of the above image. In order for the value that is input through your custom field to show in the email you will receive, you need to insert the corresponding mail-tag into the Message Body box in the Mail tab. See example:

  • If you want to give your drop-down a label, simply wrap it in “label” tag. Like this:
<label> Your Title [custom tag] </label>

Check out the image below for more examples.

  • Repeat the above steps to add as many custom tags as you want!

 

Displaying Your Contact Form

  • From your WordPress admin panel, navigate to Contact >> Contact Forms.
  • Copy the entire shortcode listed and paste it into the content area of the page where you want to display your form.

Avoiding Spam

Nothing is worse than spam blowing up your site. Thankfully, Contact Form 7 has integrated with reCAPTCHA, a security service designed by Google to protect your site against robot spammers. Activating reCAPTCHA will require your users to simply click a checkbox before submitting their form confirming that they are human, and thus stopping the non-humans from spamming up your site. Brilliant, right? There are a couple steps in getting it integrated with your website but don’t worry, it’s super simple!

  • Navigate here and then click “Get reCAPTCHA”.
  • Next, you will need to register your site. Give your site a label, choose your preferred type of reCAPTCHA, and enter your domain (or multiple domains if you’re planning to use your contact form on more than one site).

  • Upon clicking “Register”, you should be directed to a page with displaying your site key and secret key. Copy both of these.

  • From your WordPress admin panel navigate to Contact >> Integrate.
  • Paste your site key and secret key into the reCAPTCHA box and click Save.

  • Navigate to your contact form and click reCAPTCHA from the right side of the toolbar.

  • Choose your settings and add reCAPTCHA just above your “Submit” code.

 

That’s it, folks! Pretty simple, right? If you followed these steps you should now be outputting a beautiful, fully customized and robot-protected contact form. Cheers!