HTML.form.guide

How to Add an Email Form in Your WordPress Website

contact form 7 email form wordpress email form wordpress

An email form can be considered one of the most essential parts of any website. When users need to be able to contact you with feedback or questions about your service, a web form can become very handy. In this tutorial, you will see how to add an email form into your WordPress website by using the Contact Form 7 plugin.

Installing the Contact Form 7 Plugin

Contact Form 7 is a great WordPress plugin that makes it easy to build your own email forms. Download Contact Form 7 from the WordPress plugins website (link here). After you have downloaded Contact Form 7, open your web browser and point it to the WordPress website. Login to your admin page. When you see the WordPress Dashboard Panel, navigate to the left where there is a list of menus, point your curser to ‘Plugin’ and click it. This will take you to the ‘Plugins’ page. Click the ‘Add New’ button, and then press ‘Upload’.

installing the form plugin

After you have selected Contact Form 7, click the Install Now button. This will install Contact Form 7; however, you cannot use the plugin until you have activated it. Click Activate Plugin. !

After installing the plugin click activate

Video Demo

Video demo for those who like to see how it is done:

Creating the form fields

Once you have installed the Contact Form 7 plugin, let us create the fields. First, we are going to need to decide what we want people to put into the contact form. Typical fields include Name, Subject and Message.

To the right side, find the Contact menu and click on it. This will take you to the Contact Form 7 settings page.
click the contact form link

click the Contact form 1 Link
the default contact us form

The Form panel as you can see is already filled with default settings. We are going to make a new form, so erase everything inside the Form panel. Let’s begin by building the email form. Click on the Generate Tag dropdown button to display a list of all the available field types.
Adding form fields

Since Name is going to be text field, select the Text Field item and enter the details for the field.
Add the name field

Copy the code that has a brown background. Wrap it up with a paragraph tag <p> </p> and put it in the form panel box
Insert the field in to the form panel

Repeat the steps for the remaining fields and we will end up like the image below.
add the fields to the form panel

Click save located at the top of the form panel.

Customizing the Email

Navigate down to Mail Panel and you can see the email  configuration as shown below. This panel contains the email template that will be sent to you when a user submits the form.
customizing the form submission email

Remember the field names that we picked earlier? Update the email template accordingly.
customizing the form email template

Enter your email address in the “To” field (1) Now, let us change the message body:
form submission email message body

After making the updates, press Save.

Embedding the Form in a WordPress page

Now we are ready to place our newly created form into the WordPress Page. First, go to the contact settings page by pressing the Contact link in the left side panel. This will bring up a table of forms that you have recently created. Next to Contact Form 1, you should see the Shortcode for your form.
integrating the form

Shortcode is a piece of code that you can insert into your content and WordPress will interpret the code with an associated function. If you insert the short code for the form into a page or a post, WordPress will replace the short code with your form. Copy the code. Navigate to the left corner and click pages. Press Add New Create a new page called Contact Us. Paste the shortcode into the Contact Us page body
embedding the form in a page

Press preview and see how your form looks online.
wordpress email form online

Once happy with the form, press Publish and make your form online.

See Also