• Skip to main content
  • Skip to header right navigation
  • Skip to after header navigation
  • Skip to site footer

WP Engine hosting includes Genesis and 35 of the StudioPress themes!

Philip Gledhill

WordPress | Genesis Framework | StudioPress

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog
  • Content
  • Beaver Builder
  • CSS
  • WooCommerce
  • WP Tutorial
  • Contact
  • Specific Themes
  • Find it
You are here: Home / WordPress Tutorial For Beginners / Contact Form 7 Tutorial – A Simple Guide For New Users

Contact Form 7 Tutorial – A Simple Guide For New Users

Contact Form 7 is much more powerful than most of the free form plugins but, Contact Form 7 is not drag and drop. However, once you learn a few basic principles, Contact Form 7 is surprisingly easy to use.

Using Contact Form 7

Setting up email in Contact Form 7

To make a really simple form

After installing and activating the Contact Form 7 plugin

1.) Go to: Dashboard > Contact Add New
2.) Select the Form tab
3.) Contact Form 7 has automatically built a simple form for you.
4.) Make sure you click the Save button

The Add New Form dialogue in Contact Form 7
The Add New Form dialogue in Contact Form 7

You will now see the blue bar containing the form shortcode

5.) The blue bar contains the shortcode you need

Contact Form 7 blue bar with form shortcode
Contact Form 7 blue bar with form shortcode

Copy this shortcode and paste it into any web page or blog post on your website

Copy the form shortcode
Copy the form shortcode

The shortcode pasted into a WordPress web page

The shortcode pasted into a web page
The shortcode pasted into a web page

Adding your own form fields to the form

The form tag generator dialogue in Contact Form 7
The form tag generator dialogue in Contact Form 7

6.) First place your cursor where you want the new form field to appear. Then click one of the form tag generator buttons.
7.) The Form Tag Generator dialogue opens.
8.) Click the insert tag button to insert the shortcode into your form.
9.)Wrap the shortcode in label tags and text

Add label tag and text to the shortcode
Add label tag and text to the shortcode

Now move on to the mail tab

Add the Contact Form 7 shortcodes to the mail tab
Add the Contact Form 7 shortcodes to the mail tab

10.) Select the Mail tab
11.) If any shortcodes are a darker bolder colour than the rest
12.) You need to copy these into the Message Body section of the Mail tab. Don’t forget to add some text so you know what each shortcode refers to.

Always save your settings!

It’s a good idea to save your settings as you go along.

The Contact Form 7 save button
The Contact Form 7 save button

The Contact Form 7 email settings

The email settings in contact form 7 will work out of the box for most users. I’ve made a video explaining the recommended settings just in case you do have any problems. Provided you use an email address with the same domain name as your website you should be OK. Don’t use a Yahoo or Gmail address under the Mail tab’s To or From settings.


The text below just restates what I’ve said about Contact Form 7 in the article above…

This is how you build a form using Contact Form 7

Go to: Dashboard > Contact > Add New

When you click the Add New tab Contact Form 7 automatically builds you a basic form containing five form fields. Name, email, subject and message.

If you only need a simple form, this automatically created form is ready to use. Just copy the short code from the blue bar at the top of the page, and paste it in to any web page or blog post on your site. The form will just work.

However, Contact Form 7 can build much more advanced forms than this basic starter form.

And once you learn a few basic principles, Contact Form 7 is surprisingly easy to use.

The most important points to learn for any Contact Form 7 new user…

When you build a new form or edit an existing form, you must edit the settings under TWO tabs.

The Form tab AND the Mail tab.

The Form tab builds the form you see on your web page.

The Mail tab builds the email you receive when a website user submits a form.

The shortcodes under the Form tab

You add shortcodes using buttons under the Form tab. These buttons include things like email, tel, text area and acceptance.

Just place your cursor in the editor box and then click a button. Contact Form 7 will insert the short code that corresponds to that particular button, into your web page.

After adding a shortcode under the Form tab, wrap that shortcode in a html label tag and type text that explains what the user should type into that particular box.

The label will display above the form field on your web page, explaining to the user what to type into that particular box. Such as email or phone number etc.

The short codes under the Mail tab

After you build your form using the Form-tag Generator buttons, save your work.

Then click the Mail tab.

Look for the row of shortcodes near the top of the page.

If you’ve added new shortcodes under the Form tab, but haven’t added those extra shortcodes to the Message Body section under the Mail tab yet, those newly made shortcodes will be bold.

Copy each bold shortcode from the list and then paste it into the Message Body section under the Mail tab.

For each shortcode you add to the Message Body section under the Mail tab add some text to explain what the user typed into that form field. Such as email or phone number etc.

When you’ve added the shortcodes under both the Form tab AND the Mail tab make sure you save your work.

Then look for the blue bar at the top of the page. This blue bar contains the shortcode for the full form. It will start with…
[contact-form-7 id=

Copy and paste that contact form 7 shortcode into any web page or blog post on your website and your form will be displayed in that position.

The most important point to remember

If you add a new shortcode to the Form tab. You must then add that same shortcode under the Mail tab in the Message Body box.

If you only add the shortcode under the Form tab and not under the Mail tab, that particular form field will not be emailed to you when the user submits the form.

Both tabs, Form and Mail must be filled in correctly before your form can send you the results.

Category: WordPress Tutorial For Beginners

About Philip Gledhill

Philip helps small and medium service businesses build and maintain clean, minimalist, professional looking websites. He loves clear, concise, customer focused content, and websites that are easy to navigate. His motto is focus on your customer and keep it simple.

Previous Post: « Genesis Simple FAQ plugin: Making a single FAQ list
Next Post: Writing About Pages That Win Clients »

Sidebar

WordPress logo

StudioPress and Genesis Tutorials

  • StudioPress and Genesis Tutorials
Disclosure: I receive compensation from some of the companies whose products I review.

A recent project

Zulfi Hussain on Global Promise 7th Anniversary

I recently spent a day with Zulfi Hussain MBE, explaining the pros and cons of WordPress and guiding him through the process of running his own website. Find out more...

StudioPress Premium WordPress Themes

WordPress Hosting, Which Deal is Best For You?

WordPress Hosting, Which Deal is Best For You?

The services I offer

  • What I do
  • WordPress websites
  • Site set-up training and SEO
  • Working together
  • Contact me

Some recent posts from my blog…

  • Genesis Pro by StudioPress a Review
  • How to Write and Publish a WordPress Post Using the New Block Editor
  • Mai Reach Theme
  • Navigation Pro theme by StudioPress
  • Twenty Twenty Theme: a great choice for service professionals

Writing website content

  • Writing good website content – a simple guide

For WordPress tips and tricks visit my blog

Web Hosting

If you’re in the market for premium web hosting from a team you trust why not checkout WP Engine. It’s designed to be Fast, Secure & Worry Free!

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Free themes with hosting
Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Choose Your Theme

Web Hosting

If you’re in the market for premium web hosting from a team you trust why not checkout WP Engine. It’s designed to be Fast, Secure & Worry Free!

Site Map

Site Map: if you can’t see what you’re looking for read through my sitemap, it may well be there :-)

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress and WP Engine, are registered trademarks of their respective owners.

Copyright © 2021 Philip Gledhill · Privacy policy and disclosure

© Copyright Philip Gledhill

Return to top