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’.
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 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.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.
| Field | Field Name | Field Type | Field Description | Required? |
| Name | contact-name | text | Users Full Name | Yes |
| contact-email | Users Email | Yes | ||
| Subject | contact-subject | text | Subject of message | No |
| Message | contact-message | text area | Users Message | Yes |
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 1 Link
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 Tagdropdown button to display a list of all the available field types.
Since Name is going to be text field, select the Text Field item and enter the details for the 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
Repeat the steps for the remaining fields and we will end up like the image below.
Click save located at the top of the form panel.
click the Contact form 1 LinkThe 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 Tagdropdown button to display a list of all the available field types.Since Name is going to be text field, select the Text Field item and enter the details for the 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 boxRepeat the steps for the remaining fields and we will end up like the image below.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.
Remember the field names that we picked earlier? Update the email template accordingly.
Enter your email address in the “To” field (1) Now, let us change the message body:
After making the updates, press Save.
Remember the field names that we picked earlier? Update the email template accordingly.Enter your email address in the “To” field (1) Now, let us change the 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.
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 NewCreate a new page called Contact Us. Paste the shortcode into the Contact Us page body
Press preview and see how your form looks online.
Once happy with the form, press Publish and make your form online.
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 NewCreate a new page called Contact Us. Paste the shortcode into the Contact Us page bodyPress preview and see how your form looks online.Once happy with the form, press Publish and make your form online.
Comments