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.
After completing this lesson, participants will be able to:
- Explain the purpose of using Contact Form 7 plugin
- Add contact form into pages
- Customize contact forms according to requirements
Who is this lesson intended for? What interests/skills would they bring? Choose all that apply.
- Users
- Designers
- Developers
- Speakers
- All
How much experience would a participant need to get the most from this lesson?
- Beginner
- Intermediate
- Advanced
- Any
Which strategies will be used for this lesson plan? Choose all that apply.
- Demonstration
- Discussion
- Exercises
- Feedback
- Lecture (Presentation)
- Show & Tell
- Tutorial
How long will it take to teach this lesson (in minutes)?
45 minutes
Participants will get the most from this lesson if they have familiarity with:
- Ability to install a plugin from the WordPress.org repository
- Ability to create and edit pages on your WordPress website
- 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 repository?
- Contact Form 7 plugin
- 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.
- What if a participant owns a WordPress.com site that doesn't allow to install a plugin?
- What if a participant doesn’t has a WordPress site to work with?
- What if there's no Internet available?
- What if a participant doesn't own a computer?
- A brief introduction on Contact Form 7
- Demonstrate how to add a contact form to a page
- Demonstrate how to customize a contact form
- Practice exercises to have participants add a customized contact form to a post
Creating a contact form with mandatory fields
Practice creating a form with mandatory fields.
- Create a new form using Contact Form 7
- Customize the form to make below fields as mandatory inputs
- Name
- Email address
- Add the form to any page of your choice
Creating a questionnaire
Practice creating a questionnaire containing five questions.
- Add new contact form using Contact Form 7
- Design a form with five questions that contains below input types
- Radio buttons
- Checkboxes
Creating a booking form with phone number
Practice creating a booking form with phone number to be contacted.
- Add new contact form using Contact Form 7
- Design a booking form with below fields
- Your Name (mandatory)
- Your Email (mandatory)
- Your Phone Number (mandatory, with format of "123-456-7890")
- Booking Time (mandatory, in drop-down menu)
- Message
Which of the following is a Contact Form 7 tag?
- Your Message
- [textarea your-message 40x2]
- ["Enter your message" textarea your-message]
- form.wpcf7-form {text-align: center;}
Answer: 2. [textarea your-message 40x2]
What symbol is used to mark a field is required to answer?
- !
- /
- &
- *
Answer: 4. *
How can I embed a contact form into my template file?
- [contact-form-7 id="1234" title="Contact form 1"]
Answer: 3.
Contact Form 7 is a user-friendly plugin for adding forms to your site, and these forms are not just limited to just contact forms. This plugin uses shortcodes and generator tools to help you create 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 auto fill 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.
Let's try using the default form in Contact Form 7 to add a simple contact form to a post.
- Install Contact Form 7 using the WordPress plugin store and activate it.
- By default, when you first install Contact Form 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.
- Copy the 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.
Check out the result.
You can further customize your form to look more stylish by using HTML or CSS. You can also edit the default template using tags to add or remove fields in the form to suit your needs. If you require more than a form on your site, you can always create a new one and customize it using the methods listed below.
- Go to Contact > Contact Forms and select to Edit our form.
- You can start modifying the form by altering its code and adding fields using tags. 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]. The tags can be added by clicking on the tags button when editing the form or by typing the codes directly into the editing area. Generated tags can be edited to suit various requirements as well.
The basic parts that compose a tag can be found in Using Tags section.
There are also some options available if you want to validate your data input for it to fit some requirements, i.e. phone number format, by using Jquery Validation For Contact Form 7.
- Don't forget to modify the email 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.
You can also check the Mail (2) template checkbox and edit the template of what someone who fills in a contact form will receive. It'll be called as auto-responder. This is useful to send acknowledgement to the person who submitted the form to let them know you have received their inputs from the form.
-
Save the changes.
-
Add the form to a page.
-
Check out the resulting form.
Tags in Contact Form 7 allows you to design and customize your form. You can set a field to be a mandatory field, you can customize an input to a field to be a textbox or drop down list. Tags are pre-defined keywords enclosed in square brackets ([ ]).
Note that order of those parts is important. Here is a list of most commonly used tags that can be used in your forms:
- text, email, textarea - for text fields
- checkbox, radio, select - for checkboxes, radio buttons and drop-down menu
- file - for file uploading and attachment
- captchac, captchar for reCAPTCHA
- quiz for quiz
- acceptance for acceptance checkbox
- submit for submit button.
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.
-
Go to Contact > Contact Forms and select to Edit our form again.
-
Alter the code to look like this:
<table>
<tbody>
<tr>
<td>
Your Name (required)
[text* your-name]
Your Phone Number
[tel* your-phone "123-456-7890"]
</td>
<td>
Select the time we should call you:
[select time-to-call "Business hours" "Evening" "Morning" "As soon as possible"]
Subject
[text your-subject]
</td>
</tr>
</tbody>
</table>
Your Message
[textarea your-message 40x2]
[submit "Send"]
- Save the changes. Now there's two columns to the form.
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;
}
After you save the file and refresh the form it looks a bit different.
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.
Follow with the Exercises and Assessment outlined above.