How to Add a Contact Form to Your WordPress Website

WordPress Website Contact Form

One of the main things that appears on any type of website is a contact form. Out of the box, WordPress doesn’t include this, but thankfully there are many WordPress plugins available to easily add contact forms to your website. In this tutorial we will be looking at one of these plugins – ‘Contact Form 7’.

Installing and Activating the Contact Form 7 Plugin

We will be installing the plugin from the admin panel. You can also install the plugin from FTP/SFTP, but we won’t be covering that method in this tutorial. You can check out the FTP/SFTP method in my installing plugins in WordPress tutorial.

From the admin panel you will need to access the ‘Add New‘ menu link from the ‘Plugins‘ menu section.

WordPress Contact Form

Once the page loads you can type either a contact form plugin name or, instead, just something like “contact form”.

Contact Form Plugin

If you used a generic search term like “contact form” you will see loads of highly rated form plugins. I would recommend testing a couple of them until you find one that you like. My personal preference, however, is the ‘Contact Form 7‘ plugin. Once you find the plugin that you want to install, click on the ‘Install Now‘ button.

Contact Form 7 WordPress

After a short wait the button will change to ‘Activate‘; click on this next. When the plugin is activated the admin menu will now have a ‘Contact‘ section. By selecting ‘Contact Forms‘ you can see all forms that have been created. By default, when you install the plugin it will create one form called ‘Contact form 1‘.

How to Add a Contact Form WordPress

Configuring Contact Form 7

Let’s open this form and have a quick look at how it can be configured. Although there are a few configuration options, we will look at the two most important: 1) configuring the form fields and 2) configuring how an email is sent when the form is submitted.

1) Editing the Form Fields

Once the edit form screen has loaded you will see the form contents. This default form will display four fields and a submit button. The actual fields will appear between square brackets. Let’s take the ‘Your Name‘ field as an example. It will appear like this:

 [text* your-name]

The ‘text‘ part relates to the input type. The ‘*‘ means that this input field is required. The ‘your-name‘ is the identifier for this field. You should ensure that this identifier is always unique for your form. This is because when the form is submitted and an email is sent out we need to use this identifier to reference that field’s value.

Adding Optional HTML to Your Form Fields

Outside of this input field code you will see some HTML. On the front end this will display as text next to the form field. In the example I am using, the text ‘Your Name (required)‘ will appear next to the form field.

This next section is completely optional but it’s something I like to do with forms. Rather than use ‘(required)‘ I prefer to use a ‘*‘ and make it a red colour. To achieve this we can add in some HTML and style it with CSS. I would use an HTML span element and have it contain the ‘*’ character. The finished form field would then look like this:

<label> Your Name <span class="required">*</span>
    [text* your-name] </label>

Here you can see the span element which contains the ‘*’ character. I gave the span element a class of ‘required‘ so that I can style it in CSS easily with a red colour. The CSS would look as follows:

.required {
    color: red;
}

Usually I would use the hex code for the colour but in this example I’ve used ‘red’ for clarity.

Using the Toolbar Section to Add Form Fields

Although for a new user it might look difficult to create a form field, the plugin has a nice toolbar section at the top where you can go through the process of creating an input field, rather than typing everything out.

WordPress Contact Form

Let’s create a new text field by clicking on the ‘text‘ button. Once you click it a pop up screen will show where you can fill out information about the field. As a minimum, just fill out the ‘Name‘ section, which is the identifier of the field. In the example below I have given a name and made it a required field.

Form Tag Generator

From here you will need to click on the ‘Insert Tag‘ button to add the field to the form. You can then move the new field wherever you want. I will put it just above the submit button. Remember that this only creates the form field, you will need to manually add the labels. Now we can see how our final form’s configuration will look.

Insert Tag on Contact Form

2) Setting the Email When the Form is Submitted

To configure how an email is sent when the form is submitted you will need to click on the ‘Mail‘ tab.

Contact Form Email Address

Here you can see all of the email configuration options. You can leave most of these with the default values. Important ones to note are ‘To‘ and ‘Message Body‘. The ‘To‘ section will be the email address that you wish the form submissions to be sent to. The ‘Message Body‘ is the content that will display in the email. This is where you will put your field identifiers in square brackets, which will display the values entered by any user who has submitted the form.

In the screenshot below I have added our new text field to the default ‘Message Body‘:

WordPress Contact

And that’s it for the basic configuration of setting up a form on Contact Form 7. You can click on the ‘Save‘ button to save all of your changes. We have only covered the bare minimum so far. But if you want to find out more about configuring Contact Form 7, you can check out their documentation.

Displaying the Contact Form on the Website Front End

Now that we have configured and created our form we need to display it on the front end. To do this we can use shortcodes created by the Contact Form 7 plugin.

In this example I have set up a page called ‘Contact‘. From this page I will go back to the ‘Contact Forms‘ edit page. In the listing there is a ‘Shortcode‘ field which will display the shortcode for our form.

Contact Forms Edit Page

This shortcode needs to be copied and then pasted into the edit screen of the ‘Contact’ page.

Contact Form Shortcode

Once the page is published, and you view the front end, the form should now appear.

Contact Form

In some cases you may want to be more specific about where a form is located. You may want it, for instance, in a specific area of your template files, such as the footer. In this case you will need to execute the shortcode in PHP. If you are comfortable dabbling with code you can use WordPress’ ‘do_shortcode‘ function to output your form’s contents. Below is an example of the form we just created:

echo do_shortcode( '[contact-form-7 404 "Not Found"]' );

Note that this procedure is completely optional and I have only put it in for reference.

Round Up

In this tutorial we have looked at how to add a contact form to your website using the Contact Form 7 plugin. You don’t have to use this plugin as the WordPress plugin repository has many great alternatives. Contact forms are pretty much a must have on websites now, so there is no excuse for not adding one to your WordPress website.

If you have any WordPress tutorials that you would like me to cover, please message in the comments.

Digital Marketing Berkshire

James Connor

James Connor is Co-Founder and Full Stack Developer for DigiPlix. After he graduated from university with a degree in Computer Science he worked as a Web Developer, gaining experience in both front end and back end development. As a freelance developer he has focused on specialising in WordPress development.

Comments

Leave a Reply

avatar
  Subscribe  
Notify of

Need help? Contact one of our specialists to discuss your requirements

Get a free quote