How to add Contact Form to Wordpress Blog | Blog Supporter

January 10, 2016

How to add Contact Form to Wordpress Blog

How to add Contact Form to Wordpress Blog
Website contact form is one of the web forms where allows the visitors contact you direct through your website or blog pages. The contact page will be created to be more effectiveness and working properly and easy to use for your website or blog. Today I will share you how to contact form for Wordpress website and how to add a contact form to Wordpress website. The contact form will use a most popular Plugin instead of HTML form creator. The web form is easy to install and manage multiple web forms and you can customize the form and the mail contents flexibly with simple markup.

How to add Contact Form to Wordpress Blog


Here is a tutorial below and where you can follow step by step


Step 1: Go to the blog and log in it.

Step 2: On the dashboard just looking for the Plugins link and click in it

How to add Contact Form to Wordpress Blog

Step 3: In the Plugin area you may found some plugin that has been installed. But a new plugin that you need to install now is Contact Form 7. Now look to the top of the page,  you will see one button and then click on it.

How to add Contact Form to Wordpress Blog

Step 4: Now you need to search for the Contact Form 7 plugin by typing the "Contact Form 7" in the search column.

Step 5: You got the Contact form 7 plugin and click the install button and then click on "Activate" after completed the installation to active Plugin.

Step 6: Back to the dashboard again find out the Contact link and click on Add New link and Add New button.

How to add Contact Form to Wordpress Blog

Step 7: Now, in this step you need you fill up a contact form title.

How to add Contact Form to Wordpress Blog

Step 8: In the below text which is auto generated when you create this contact form. Now you just delete all this code and text  and replace by the another code which will be released in step #9.

How to add Contact Form to Wordpress Blog

Step 9: Copy this below code and paste in the text area where you deleted in step #8 and then click Save button.
<p><i class="fa fa-user"></i> Your Name *<br />
    [text* your-name] </p>
<p><i class="fa fa-envelope"></i> Your Email *<br />
    [email* your-email] </p>
<p><i class="fa fa-pencil-square-o"></i> Subject<br />
    [text your-subject] </p>
<p><i class="fa fa-comments-o"></i> Your Message<br />
    [textarea your-message] </p>
<p><i class="fa fa-paper-plane-o"></i> [submit "Submit us now"]</p>
Step 10: To use the code you may need to add this below Awesome Font to your website or blog <head> tag, Now on the dashboard just find out the Appearance and click on Editor

At the right-hand side just find out the Header (header.php) and click on it. You will see some HTML Code inside the header, now just copy this below code and paste it anywhere then press Update File button.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Step 11: It is time to set up an email address that will send directly to your inbox when your visitor uses this WordPress contact form. Click on "Mail tab (1)" fill up your email address inside the form then click on Save button.

How to add Contact Form to Wordpress Blog

Step 12: Now scroll to the top and you will see this simple below shortcode and just copy it and paste it into your post, page, or text widget content.

How to add Contact Form to Wordpress Blog

Step 13: Now you are almost done, just follow these few steps. Now you need to create a new Page. Back to dashboard again then click on Pages link then click on Add New. 

Step 14: Now it is time to paste to short cord where you did in step #10. Then review your page that you just created after click Publish button.

Now you are done and you can enjoy to this contact form if you would like to customize the form just use this tutorial.  

Was this article helpful?

Yes
No
Thanks! Your feedback helps us improve blogsupporter.com
Keo Sopherth

I love web and I am a Blogger and Author at Blog Supporter (Siem Reap, Kingdom of CAMBODIA) / www.blogsupporter.com / info at blogsupporter dot com

Advertise Here (330 x 280px)

0 comments:

*** Although every comment is appreciated, due to time constraints I could not be able to respond for some comment. Remember that comments are regulated and could spend sometimes to appear. All spam comments will certainly be removed. Thanks for recognizing!