How to Add an Email Form in Your WordPress Website

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.

FieldField NameField TypeField DescriptionRequired?
Namecontact-nametextUsers Full NameYes
Emailcontact-emailemailUsers EmailYes
Subjectcontact-subjecttextSubject of messageNo
Messagecontact-messagetext areaUsers MessageYes

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.

Comments on this entry are closed.