What is Contact Form 7

Description Description

Contact Form 7 is an easy-to-use plugin to create and add a contact form to your WordPress website. In this lesson, you will learn how to prepare and install the plugin and create and customize your first form, as well as setting up notifications to yourself and the form submitter.


Top ↑

Prerequisite Skills Prerequisite Skills

You will be better equipped to work through this lesson if you have the:


Top ↑

Learning Objectives Learning Objectives

Upon completing this lesson you should be able to:

  • Explain the purpose of using Contact Form 7 plugin
  • Configure a contact form generated by Contact Form 7 to fit your needs

Top ↑

Assets Assets


Top ↑

Screening Questions Screening Questions

  • Do you have a self-hosted WordPress.org website (vs. WordPress.com website)?
  • Do you have a user role that allows you to install plugins?
  • Have you made a backup of your site before installing any plugins?
  • Have you installed the Contact Form 7 plugin from the WordPress.org plugin respository?

Top ↑

Teacher Notes Teacher Notes

  • Time Estimate: TBD
  • It is recommended that all students have made a backup of their site and have installed the Contact Form 7 plugin before working through this lesson. If they have not, ask them to do so before they get started, but the specifics of how to do so will not be covered in this lesson.
  • The recommended way to approach the scenarios would be to demonstrate and explain the process first and then ask students to repeat the actions using their own devices, while you’re available for questions and troubleshooting if something doesn’t work out.

Top ↑

Hands-on Walkthrough Hands-on Walkthrough

Introduction Introduction

Contact Form 7 is a user-friendly plugin for adding forms to your site, and these forms are not just limited to the just contact forms. This plugin uses easy to use shortcodes and generator tools to help you create just the form you are looking for on your website.

Regarding contact forms, some of the benefits of using contact forms over just publishing a contact e-mail would be:

  • It lets the user stay on the same page.
  • It doesn’t require a user to redirect to their email account, which can be a hassle in a library or friend’s computer.
  • You may take advantage of a browser’s autofill function.
  • Using such additional WordPress plugins like Gravity Forms, a form can route the notification to different addresses depending on the form subject.
  • It doesn’t reveal your email address to spammers.
  • It allows for use of reCaptcha to avoid form fill-ins by bots.

Top ↑

Using your form Using your form

Scenario: let’s try using Contact Form 7 to create a simple contact form for customers who want to be contacted via phone for our new post.

1. Install Contact Form 7 using the WordPress plugin store and activate it.

Selection_023

2. By default, when you first install Contact Forms 7 on your site, it will create a simple Contact Form for you. This can be accessed by clicking on Contact on the left-side menu, and then Contact Forms, which will bring up a list of all forms created with this plugin on your site.

The default form contains the following fields:

  • Your Name – required
  • Your Email – required
  • Subject
  • Your Message

You can insert this form immediately into any page or post on your site by using the shortcode shown next to the form name.

Selection_025

3. Copy this shortcode, and paste into a new post to test it out. It also could be a good idea to use it for pages and widgets.

Top ↑

Selection_026 Selection_026

Check out the result. IMAGE MISSING!

Selection_027

Top ↑

Customizing your form Customizing your form

You can make your form look more stylish and have some more/less fields by throwing in some HTML/CSS.

Modifying Form Fields Modifying Form Fields

1. Go to ContactContact Forms and select to Edit our form.

Selection_029

2.You can start modifying the form by altering its code.

Selection_030

Let’s say we want to replace the “e-mail” field with the “phone” field and add an additional set of radio buttons that would specify what time the person who is contacting the website want to be called back.

To add fields to a form, you should make tags for them and put them into the ‘Form’ field. Tags are codes representing elements of the form, for example [text your-subject] or [text* your-name]. You should use  the “Generate Tag” tool to generate new tags.

The basic parts that compose a tag are highlighted below:

  • [text* your-name 20/40 id:foobar “Enter your name”] – field type
  • [text* your-name 20/40 id:foobar “Enter your name”] – an indicator of whether or not the field is required
  • [text* your-name 20/40 id:foobar “Enter your name”] – tag name further used in your mail template – i.e. in this case the value user puts in will replace all the occurrences of “your-name” in the mail you’ll receive
  • [text* your-name 20/40 id:foobar “Enter your name”] – options are optional specifications of appearance and behavior
  • [text* your-name 20/40 id:foobar “Enter your name”] – values which are mostly used for specifying default values

Note that order of those parts is important.

Here is a list of all the tags that can be used in your forms:

  • text, email, textarea – for text fields
  • checkbox, radio, select – for checkboxes, radio buttons and menus
  • file – for file uploading and attachment
  • captchac, captchar for captcha
  • quiz for quiz
  • acceptance for acceptance checkbox
  • submit for submit button.

Tip: There’s also some options available if you want to validate your data input for it to fit some requirements, i.e. phone number format, i.e. Jquery Validation For Contact Form 7.

Alter the code to look like this:

Your Name (required)
[text* your-name]

Your Phone Number
[tel* your-phone "123-456-7890"]

Select the time we should call you:
[select time-to-call "Business hours" "Evening" "Morning" "As soon as possible"]

Subject
[text your-subject]

Your Message
[textarea your-message 40x2]

[submit "Send"]

Note we have:

  1. Rremoved e-mail tag
  2. Aadded new mandatory “phone” field with a default value that will show up for the visitors to understand better what should they type in there
  3. Aadded a new non-mandatory field where people should indicate when they prefer to be called
  4. Mmade the text area smaller

3. Don’t forget to modify the e-mail that you will be receiving then someone fills in your form to include the new fields. Make sure the fields you want to see there are included.

Selection_033_1

You can also check the Mail (2) template checkbox and edit the template of what someone who fills in a contact form will receive.

Selection_037

4. Save the changes.

5. Check out the resulting form.

Selection_034

Top ↑

Modifying HTML Modifying HTML

Let’s see how the form will look if we edit some HTML and modify our form to be composed out of two columns. We can combine HTML with the tag code.

1. Go to ContactContact Forms and select to Edit our form again.

2. Alter the code to look like this:

Your Name (required)
[text* your-name]

Your Phone Number
[tel* your-phone "123-456-7890"]

Select the time we should call you:
[select time-to-call "Business hours" "Evening" "Morning" "As soon as possible"]

Subject
[text your-subject]

Your Message
[textarea your-message 40x2]

[submit "Send"]

3. Save the changes. Now there’s two columns to the form.

Selection_035

 

Top ↑

Modifying CSS Modifying CSS

And, of course, you can also prettify the form with some CSS. Open your theme’s style.css in a text editor of your choice and add the following code:

// Contact 7 Form 

form.wpcf7-form {
	text-align: center;
}

input#formname, #subject, #message {
	width:75%%;
	margin-top: 5px;
	margin-bottom: 5px;
}

input#formname {
	margin-top: 20px;
}

input.wpcf7-form-control.wpcf7-submit{
	margin-bottom: 20px;
	background-color: #fcd2d2;
	width: 50%;
}

.wpcf7 select {
    border: 1px solid #fcd2d2;
    border-radius: 5px 5px 5px 5px;
    margin: 0;
    padding: 15px 10px 15px;
    width: 300px;
    z-index: 100;
}

input.wpcf7-form-control.wpcf7-submit input:hover[type="button"], input:hover[type="reset"], input:hover[type="submit"], .button:hover, .entry-content .button:hover {
	background-color: #f88888;
    float: center;
}

After you save the file and refresh the form it looks a bit different.

Selection_036

Top ↑

Summary Summary

Well done! You have successfully added a new contact form to your website. Now you should be able to create a new contact form when you need it  and modify it to fit your needs.


Top ↑

Exercises Exercises

Add a new contact form to Contact Page of your site or any other location of your choice. Make sure it includes some radio buttons and an acceptance checkbox.


Top ↑

Quiz Quiz

Which of the following is a Contact Form 7 tag?

  1. Your Message

  2. [textarea your-message 40×2]
  3. [“Enter your message” textarea your-message]
  4. form.wpcf7-form {text-align: center;}

Correct answer: 2. [textarea your-message 40×2]

What symbol is used to mark a field is required to answer?

  1. !
  2. /
  3. &
  4. *

Correct answer: 4.*


Top ↑

Additional Resources Additional Resources

  1. Getting Started with Contact Form 7
  2. Contact Form 7: Documentation