Skip to main content
Noble Desktop Publishing Team/3 min read

Adding a Contact Form

Install Contact Form 7

1

Plugins → Add New

From the WordPress Dashboard sidebar.

2

Search 'contact form 7'

Look for Contact Form 7 by Takayuki Miyoshi.

3

Click Install Now

WordPress installs to the correct directory automatically.

4

Activate & Add Form to Page

Configure form fields in plugin settings, then embed shortcode in any page.

Master WordPress at Noble Desktop

Noble Desktop's WordPress Bootcamp teaches themes, plugins, and custom site development.

Learn how to add a contact form to your website using the Contact Form 7 plugin in WordPress with this thorough tutorial.

Topics Covered in This WordPress Tutorial:

Installing the Contact Form 7 Plugin, Adding the Form to a Page

Exercise Preview

adding contact form

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

  1. In a web browser, go to localhost:8888/mrp/wp-admin (Mac) or localhost/mrp/wp-admin (Windows) and log in if prompted.
  2. On the left of the Dashboard, mouse over Appearance and click Themes.
  3. Click the Add New button.
  4. Click the Upload link, then the Browse (or Choose File) button.
  5. Navigate to Desktop > Class Files > WordPress.org Class and double–click mrpTheme-ready-for-contact-form.zip to open it.
  6. 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.

  1. Go to:
    • Mac: localhost:8888/mrp/wp-admin
    • Windows: localhost/mrp/wp-admin

  2. If necessary, log in to the site.

  3. On the left side of the Dashboard, go to Plugins > Add New.

  4. In the search field, type: contact form 7

  5. Hit Return (Mac) or Enter (Windows).

  6. There will be many results. Look for Contact Form 7 by Takayuki Miyoshi (the version number may be newer).

    contact form 7

  7. Click More Details to find out more about the plugin.

  8. 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!

  9. Click the large Install Now button.

    WordPress will now automatically install the plugin to the correct directory in the Monteith Restoration & Performance site.

  10. 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

  1. 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.

  2. 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"]

    contact form 1

  3. Hit Cmd–C (Mac) or CTRL–C (Windows) to copy it.

  4. On the left side of the screen, click on Pages.

  5. Click Contact to edit the page.

  6. In the top-right corner of the post section, click the Text tab.

  7. 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"]

  8. 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"]

  9. Click Update to save the changes.

  10. At the top of the page, click the Monteith Restoration & Performance link.

  11. 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.