• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • About
  • Fav Books
  • Tools
  • Journal
  • Hire Me
  • Contact
Small Biz Geek

Small Biz Geek

Small Business Design, Marketing & Technology Journal

Website design services

A Journal on Small Business Design, Marketing and Technology

  • The Internet
  • Marketing
  • Graphic Design
  • Web Dev
  • Web Design
  • Social Media
  • Technology
  • Miscellaneous

Contact Form 7 – WordPress Website Email Form Plugin

You are here: Home / Darren’s Small Business Tools / Contact Form 7 – WordPress Website Email Form Plugin

Contact Form 7 WordPress Plugin

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.

Contact Form 7 - Add New

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.

Contact Form 7 default form

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.

WordPress Contact Form 7 Shortcode

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:

Contact Form 7 Field Settings

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.

Contact Form 7 Validation Errors

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.

Contact Form 7 CSS classes

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:

Contact Form 7 Generate Fields

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:

Contact Form 7 Generate Telephone Field Short Code

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:

Mail Headers

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.

WP Mail SMTP Plugin

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:

Contact Form 7 Email Message Body

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:

Contact Form 7 Messages

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.

Reader Interactions

Add Your Thoughts Cancel reply

Your email address is safe and will NOT be shared with anyone else.

Hateful, spammy or abusive comments will not be tolerated.

For more information please see the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

About the Webmaster

Hello, my name is Darren, a 36-year-old business enthusiast eager to learn and do good work.

I’m a website builder for hire working with small to medium businesses.

Search Website

Let’s Connect

  • LinkedIn
  • Twitter
  • YouTube

Recently Read Book

Don't Make Me think - Steve Krug

“Don’t Make Me Think: Revisited” – Steve Krug (Book Review)

A person of average technical ability must be able to navigate your website easily. This is required reading for anyone wanting to create a better experience for their visitors…

Latest Journal Entries

  • Computer Says No: Does Your Website Work for People with Disabilities?
  • Chinese Tinder Profiles Are Using Photos of Pretty Girls to Scam “Investors”
  • Small Biz Owners “Trapped” Using Email Addresses Belonging to Internet Service Providers
  • In the Pandemic, QR Codes are Finally Proving Worthy in the West
  • Small Businesses Finally Start Marketing and All It Took Was a Global Pandemic
  • Unable to Meet in Person? Communicate Stress-Free with Online Audio/Video
  • UK Contractors Operating Ltd Companies Should Be Mad as Hell with HMRC and IR35
  • 20 Years On and Website Hit Counters are Still a Waste of Pixels
  • Competitors Can Easily Edit Your Google and Facebook Business Listings
  • Waiting on Final Images for a WordPress Website? Use Temporary Placeholders and Design Around Them
  • GoDaddy Loves Spamming Branded Footer Links to WordPress Installatron Sites
  • Dealing with Negative Comments on Your Paid Social Media Posts

Footer

Primary Navigation

Home
About Darren
Good Books
My Tools
Blog Posts
Hire Me
Contact Me

Secondary Navigation

The Internet
Marketing
Graphic Design
Website Development
Website Design
Social Media
Technology
Miscellaneous

Derby & Nottingham Area

Small Biz Geek
Office 897
109 Vernon House
Friar Lane
Nottingham
NG1 6DQ

Telephone

Tel: +44 (0) 115 714 3290
Tel: +44 (0) 7951 897 243

VoIP

Skype: ilkestonwebdesign
WhatsApp: 07519 897 243

Email

[email protected]

Let’s Connect

Twitter
YouTube
LinkedIn
RSS

Subscribe to Blog by Email

Subscribe to Blog By Email

Social Calendar

WordPress Nottingham Meetup
WordPress Derby Meetup
Genesis Framework by StudioPress


Copyright © 2021 · Small Biz Geek · Privacy Policy · Commenting Policy · Website Disclaimer · ICO number: ZA305900


Written and designed by Ilkeston Web Design

This site uses cookies More info