Contact Form 7

Almost every website contains a way for the user to get in touch with the owner. Simply putting your email on a page is not the best option as there are website crawlers that ‘harvest’ emails and you would find yourself the recipient of an ever growing amount of spam mail. Best practice is to use a contact form where your email address is never revealed.

One of the most popular contact form plugins is “Contact Form 7′ and is our go-to for basic forms. It’s relatively simple, lightweight and dependable.

Screenshot of the Contact Form 7 listing on the WordPress Add Plugin page.

Let’s have a look at the basics of the plugin so you have an idea how simple it is!

After installing you will find ‘Contact’ in the main WP Admin menu. An important concept to grasp is that forms are created here and not on the editor for the page you want them to appear, on the page editor we simply tell it which of the forms we want displayed.

The plugin comes with one example form, and often we just use this. Hover over the form title (Contact form 1) then click the Edit link that appears:

Screenshot showing list of contact forms

The form edit page has four tabs, the first deals with the form itself. It is a mixture of text, html tags (using <>) and shortcodes (using []). This form will create four boxes where text can be entered and a submit button:

Screenshot showing the code to create a form

The second tag deals with the email that you receive when someone completes the form. The message is formed from the four text input areas and some site defaults:

Screenshot showing the email details

To add a form to a page, if you use WordPress blocks you will find there is conveniently now a Contact Form 7 block available in the Widgets section:

Screenshot showing the Contact Form 7 WordPress block

Once the block is added you will then get to choose which of your forms you want to display:

Screenshot showing the contact form selector

If you use the Elementor Page Builder plugin there is not (yet) a built in option to add form, we have to do it the old fashioned way using a shortcode:

Screenshot showing the Elementor plugin shortcode option

The shortcode that you need to add can be found on the form edit page:

screenshot of the shortcode on the edit contact form page

After saving our page we can view it to see how the contact form looks. For many purposes the sample given is perfectly adequate!

Screenshot of contact form on page

Our next tutorial will show you how to create a new form. If you need help with Contact Form 7 – or any other aspect of WordPress – the Nerds are here to help!