Categories
WordPress

How to add a contact form to WordPress using a plugin

Introduction

These instructions explain how to add a contact form to WordPress using the Contact Form 7 plugin. This will allow you to easily add a customised contact form and avoid getting spam.

Requirements

  1. WordPress 4.9 or higher.
  2. WordPress Admin account with permission to install Plugins.

Skill Level

Intermediate knowledge of WordPress.

More Info

Contact Form 7 plugin page: https://en-gb.wordpress.org/plugins/contact-form-7/

Instructions

Time needed: 10 minutes.

  1. Log into WordPress Admin.

    This is usually accessed via yourdomain.com/wp-admin.

  2. Click Plugins.

    Plugins button in the WordPress Admin menu - screenshot

  3. Click Add New.

    Add New button on the Plugins page - screenshot

  4. Search for the Contact Form 7 plugin.

    In the Search plugins… field, enter Contact Form 7.Search plugins field wtih Contact Form 7 - screenshot

  5. Install the Contact Form 7 plugin.

    In the Contact Form 7 listing, click Install Now.Install Now button for Contact Form 7

  6. Activate the Contact Form 7 plugin.

    After the plugin has installed, click Activate in the Contact Form 7 listing.Activate button for Contact Form 7

  7. Click Settings.

    Click Settings in the Contact Form 7 listing.Settings link for Contact Form 7

  8. Edit Contact form 1.

    Click Edit in the Contact form 1 listing.Edit link for Contact form 1 - screenshot

  9. Edit the Form details.

    Edit the content of the form as required. The pre-populated content is suitable for a general purpose form. For more info, see the Contact Form 7 Admin screen guide: https://contactform7.com/admin-screen/
    Click Save.
    Form content and Save button - screenshot

  10. Click Mail.

    Mail tab for Contact form 1 - screenshot

  11. Edit the Mail details.

    Edit the fields as required. The pre-populated content is suitable for a general purpose form, but you will probably want to edit the To field. For more info, see the Contact Form 7 Admin screen guide: https://contactform7.com/admin-screen/
    Click Save.Mail fields and Save button for Contact form 1 - screenshot

  12. Copy the Shortcode.

    At the top of the page, copy to code snippet starting [contact-form-7…Shortcode value for Contact form 1 - screenshot

  13. Go to the Post or Page where you want to add the contact form.

    These instructions assume that a Page called Contact Us is used.

  14. Click the + button.

    + button on Page - screenshot

  15. Add a Shortcode Block.

    In the Search for a block field enter Shortcode.
    In the Widgets section, click Shortcode.Search for a block field and Shortcode button - screenshot

  16. Add the Shortcode for the contact form.

    In the Shortcode field, enter the Shortcode for the contact form that you copied.
    Save the changes by clicking Save Draft, Publish (or Update if you’ve already published the page).Shortcode field and Save Draft and Publish buttons - screenshot