Learn how to add a contact form to your website using the Contact Form 7 plugin in WordPress with this thorough tutorial.
This exercise is excerpted from Noble Desktop’s past WordPress training materials and is compatible with WordPress updates through 2020. To learn current skills in WordPress, check out our WordPress Bootcamp and coding bootcamps in NYC and live online.
Topics Covered in This WordPress Tutorial:
Installing the Contact Form 7 Plugin, Adding the Form to a Page
Exercise Preview
Exercise Overview
Plugins are blocks of code that allow you to easily add special functionality to your site. They can help you build an ecommerce store, back up your website, and create slideshows. The official WordPress plugin repository alone has over 12,000 plugins for you to choose from. In this exercise, you will be adding a contact form using the Contact Form 7 plugin.
If You Did Not Do the Previous Exercise
- In a web browser, go to localhost:8888/mrp/wp-admin (Mac) or localhost/mrp/wp-admin (Windows) and log in if prompted.
- On the left of the Dashboard, mouse over Appearance and click Themes.
- Click the Add New button.
- Click the Upload link, then the Browse (or Choose File) button.
- Navigate to Desktop > Class Files > WordPress.org Class and double–click mrpTheme-ready-for-contact-form.zip to open it.
- Click Install Now, then click Activate.
Installing Contact Form 7
Contact Form 7 is a great contact form plugin available in the WordPress plugin repository. It generates a contact form based on options you set in the plugin’s settings. Let’s investigate.
- Go to:
- Mac: localhost:8888/mrp/wp-admin
- Windows: localhost/mrp/wp-admin
If necessary, log in to the site.
On the left side of the Dashboard, go to Plugins > Add New.
In the search field, type: contact form 7
Hit Return (Mac) or Enter (Windows).
-
There will be many results. Look for Contact Form 7 by Takayuki Miyoshi (the version number may be newer).
Click More Details to find out more about the plugin.
Here you can find screenshots, installation instructions, and a link to the plugin homepage. You can also see how many times the plugin has been downloaded. This particular plugin has over 23 million downloads!
-
Click the large Install Now button.
WordPress will now automatically install the plugin to the correct directory in the Monteith Restoration & Performance site.
-
When it is finished installing, click the Activate Plugin link.
In the middle of the left side of the Dashboard, a new menu called Contact was added.
Adding the Form to a Page
-
On the left, click Contact, then click Contact form 1.
These are all the options for the plugin. This is where you can change the email address that it submits to and the message options.
-
The first section of this page contains an excerpt of code that will generate a contact form in a post, page, or text widget. Highlight the code (the id may be different): [contact-form-7 id=
"36"title="Contact form 1"]
Hit Cmd–C (Mac) or CTRL–C (Windows) to copy it.
On the left side of the screen, click on Pages.
Click Contact to edit the page.
In the top-right corner of the post section, click the Text tab.
-
At the end of the content after the phone number paragraph, paste the contact form code as shown below:
Call us at 717-964-3345 to make an appointment. [contact-form-7 id="36" title="Contact form 1"] -
It would be nice to add a title to the form, so before the contact form code, add the following bold heading:
Call us at 717-964-3345 to make an appointment. <h2>Send Us a Message</h2> [contact-form-7 id="36" title="Contact form 1"] Click Update to save the changes.
At the top of the page, click the Monteith Restoration & Performance link.
-
In the site navigation menu, click the Contact link and scroll down to see the form. Nice and easy!
The form won’t work on the local server, but it will work once our site is uploaded to a real server.