For me, one of the perks of using WordPress is that I don’t have to manually code email contact forms like I have had to with static HTML sites. Contact Form 7 is the go-to plugin for most new WordPress users and I dare say long time users too.
It’s a free solution, easy to install and simple to style with CSS. It needs to be configured by following some instructions available on the Contact Form 7 website.
Known Issues
I’d like to say it is “reliable” plugin, or that it “just works” but I cannot. There are few pitfalls I feel many people are completely ignoring which can result in emails not being sent when a user submits a message.
Because of some of the problems the plugin presents, novice users end up purchasing a premium plugins or using free alternatives yet still encounter difficulties.
I’ve read lots of troubleshooting forums about email send failure and I hear things like “Just get Jetpack, Contact Form 7 is garbage”, or “Gravity Forms solved everything for me.”
I’ve figured out what causes most of the email send/delivery issues and it’s usually the spam policy of a shared host where PHP mail (as opposed to SMTP) is concerned.
I’ll be telling you about that in a minute.
Installation
The plugin is by far the most popular with over a million active installs and a rating of almost 5 out of 5.
Search for it in the WordPress repository by navigating to Plugins > Add New and searching for “Contact Form 7”.
The other way to install it is to download the zip file from the CF7 plugin directory page and then upload to your WordPress site through the Plugin dashboard or with FTP software like FileZilla.
One thing that has bugged me repeatedly is using the plugin in an InstantWP installation can have update issues. When I try to update it in the local hosting environment, it often fails to copy all the files needed – it seems to be caused by one of the image files in the plugin directory.
I usually wait till I’ve migrating the entire website to a real host before attempting to update the plugin. Just a heads up in case this happens to you too.
Add New Contact Form
Once you’ve installed CF7, a box called Contact will be added to the WordPress dashboard. Click Add New to begin creating a new form.
You can probably use most of the default settings of the basic form if you want something for basic email submission. The title of the new form will be Contact form 1.
Editing a New Contact Form
Hover your cursor over the form title and the links Edit and Duplicate will appear.
When you click Edit you’re taken to a configuration page with form settings including the email headers and email body content.
I like to spend a decent amount of time setting things up because I don’t want to miss any of the emails or have problems replying to an email.
Contact Form Shortcode
One of the first things you’ll see under the Edit settings is the WordPress shortcode for the contact form.
The shortcode is self contained shortcut to all the code that produces the form. You don’t deal with all the messy, extensive code – just the shortcode.
This can be selected, copied and pasted into a page, post or widget.
Contact Form Field Settings
In order to add the fields you want to show up in your form on the webpage, you’ll need to add a series of shortcodes to the form. These are all contained under the main shortcode.
The screenshot below demonstrates what you can expect to see, although I added the captcha myself using the BWP reCaptcha plugin designed for CF7:
To clarify, the shortcodes used in the screenshot above are:
[text* your-name]
[email* you-email]
text* [your-subject]
[textarea your-message]
[submit "Send"]
The HTML paragraph tags and breaks are necessary for styling and spacing.
Required Fields
Notice also in the shortcode examples ,any fields that are “required” use an asterisk symbol after the word text.
Like this: [text* your-name]
That means if the website user fails to provide information for required fields, they will receive an error message (which can be customised) asking them to go back and fill out the field.
We’ll take a quick look at the error message settings near the end of this page.
Adding Custom CSS Classes to Fields
As you can also see in the screenshot, I added a class called button to the “Send” shortcode field at the bottom of the form.
That helps me to style the CSS if I want to jazz up the form.
I mentioned the <p> </p> tags, which are inserted by default. These are needed because they inherit the basic body font CSS from your stylesheet.
These tags also allow me to create CSS sub classes under the .wpcf7 class and alter the styling of the field labels like “Your Name”, “Your Email” etc.
Generating More Fields
You create more fields using the “Generate Tag” drop down found to the right side of the contact form field area.
There are a number of options:
Let’s say you want to add a field for the sender to add a telephone number to their email submission.
It’s a case of clicking “Telephone Number” from the “Generate Tag” drop down and customising the shortcode:
As you can see, you just need to copy and paste the shortcode into the contact form area, adding the <p> </p> tags and perhaps a <br /> tag.
You’ll probably notice I made this Telephone number shortcode a required field by checking the “Required field?” box. That adds the asterisk, and it’s easily changed at a later time/date by deleting the asterisk.
It’s also possible to add advanced functionality like file uploads. A user can upload file types set up by you, which are attached to the footer of the emails. You need to be careful about viruses if you do that because anyone can email you a malicious file.
Customising How Emails Are Sent and Received
You now need to decide where the emails send to and what they will look like when they arrive in your inbox.
This is the part of the configuration that can be a little contentious, since many users assume they only need to enter the email address they want to receive messages at, click save, and wait for someone to send something.
Some users will never experience the issues I’m discussing and it can all depend on their host, their settings, their email servers etc, but it’s foolish and ignorant to take the “if it works, it works” approach.
It really pays to understand what could cause issues in the backend. It’s vital if you’re building websites for other people.
Set Up Mail Headers
You can choose what email to send to, what the subject line should be and how to display the recipient.
All these values should correspond to the shortcodes we were talking about earlier. Have a look at the screenshot below:
To:
Choosing an email to send to is the first step, although I have a warning about that coming up and have a plugin recommendation to guarantee emails are sent 100% of the time.
From:
To display the sender’s name and email address, you’ll need to use the values that correspond to the shortcodes in the contact form.
If you used [text* your-name] in the form, use [your-name] in the From: field.
If you used [text* your-email] in the form, use <[your-email]> in the From: field.
Subject:
In the subject field, I use [your-subject] only I ALSO like to add in a prefix “Contact form submission” to clearly identify the email has been sent from the contact form.
It makes scanning my unread inbox items that much easier.
Additional headers
In this section you can add instructions to pass copies of the email to another person, or to send a copy of the email to sender’s own inbox.
It’s also needed to ensure you can press the reply button once you’re received and read the email inside your email provider software.
The Reply-To: [your-name] [your-email] helps me do that.
Until I started using an SMTP authentication plugin, the contact form wouldn’t send anything to my inbox unless I had [email protected] in the header too. This was done so the server knew the email was being generated by the website, and then it would send.
And then on the 21st May 2015, most of my contact forms stopped sending ANY mail, including spam/junk.
As much as I hate email spam, the moment you stop receiving any, it usually means your email contact form has ceased functioning altogether.
Emails Not Being Received?
So, the problem/warning I’ve mentioned throughout is addressed in this section.
I use a nifty plugin called WP SMTP Mail because it has cleared up what I regard as a serious problem for anyone using CF7, especially if they’re on shared hosting and have combined different providers for web hosting and email.
Let me explain…
I use DreamHost for the web hosting and GoDaddy for URLS/email.
This means I’ve changed my nameservers over at GoDaddy to send the DNS panel over to DreamHost. This also means I had to add MX records to my DreamHost dashboard in the domain settings if I want to receive mail.
There have been some conflicts because by default, CF7 always tries to send email as PHP mail. This is trusted less and unlikely to make it through to your inbox especially if you’re combining different services as I have done.
DreamHost have a policy about what is known as spoofing where a sender is not authenticated because they’re not sending from an actual mail server: they’re sending PHP mail… a letter without a stamp.
Contact Form 7 ended up being a communications bottleneck in my business operations on account of mail going missing in cyberspace.
Like I said, I’ve written about the WP SMTP Mail plugin so please go read that. I’ve set the link to open in a new window so you don’t lose your place on this page.
Trust me, it’s a safe bet and if you ARE planning to get Contact Form 7 up and running on a website you really shouldn’t be using the latter by itself. Get the other plugin too.
Email Message Body
When you receive an email, it’s a good idea to have CF7 display all the sender’s information besides their actual message all within the body of the email.
Sure, you can see all that info in the headers of the email message but having it display all in one area is useful if you’re printing or forwarding the message.
To do that it’s a case of reiterating those shortcodes from the contact form. Here’s what my message body looks like:
Customise Messages
Finally, you can customise the messages returned to users. These include the success and failure notifications presented after a sender presses the submit button.
By default they are programmed thus:
You can change the language/wording of these message a little if you think it’ll come over better to the website user. Sometime I personalise these messages a little to make them more relevant to the subject of the website.
Keep them short.
Analysis
Contact Form 7 has had its hiccups but that’s my fault for not exercising enough diligence in the first place. I’m glad I discovered why it wasn’t sending email and feel confident in recommending it to newbies.
It can be heavily customised and styled. You could create a questionnaire or survey from it. It has many uses that the average small business owner is going to find plenty of uses for.
Do check out the official CF7 FAQ and consider going through the step-by-step documentation.
Most of what I talked about on this page will suffice but it doesn’t hurt to dig deeper and seek out additional info.
Alternatives to Contact Form 7
There are free and paid email contact form plugins available for WordPress but so far I’ve only used CF7. I use the WordPress StudioPress Genesis Framework and most plugins work just the same on a framework as they do on a native theme.
Interestingly, I noticed that StudioPress are recommending something called Ninja Forms. Never tried it myself. Maybe I will.
I’ve never used Jetpack but I know it’s developed by Automattic (makers of WordPress) and it stores a copy of the email on your web server, so if you don’t receive anything in your inbox, it’s accessible.
My research suggests even if you use JetPack you’ll still probably need to use an SMTP authentication plugin like the one I mentioned although some users appear not to have to do this.
Add Your Thoughts