A contact form widget is a must have widget for every blogger. It helps in getting direct feedback from readers as well a good means of...
A contact form widget is a must have widget for every
blogger. It helps in getting direct feedback from readers as well a good means
of communication between readers and the blogger.
In this post, I will be sharing with you on how you can
easily add an awesome contact form widget in
blogger.
blogger.
Although, there are several contact form you can use as a
blogger, but I would really recommend that you this widget because it doesn’t slow
down blog loading time and it is simple to use.
How to Get Started
=> Firstly, log in to your blogger dashboard
=> Go to “Template”
and then search for ]]></b:skin>
by typing Ctrl + F
=> Paste the code
below immediately before ]]></b:skin>
=> Save the Template
=> Click on Pages,
then New Page
=> Select Blank page
=> In the Page title,
Type Contact us
=> In the body,
select HTML and paste the code below
<div id="contact_wrap">
<h3>Contact Us</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>
<h3>Contact Us</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>
=> After adding the above code, Publish the page
You have successfully added a contact form widget Blogger.
Hope it helps...
If you face any difficulty setting up your contact page, don't hesitate contact me using the comment form below this post.
Cheers!
In order not to miss my next post, feel free to subscribe here. It is absolutely free!
Oladipupo Olutayo
FACEBOOK – www.fb.com/olutayo.segun
or www.fb.com/teyusfreedom
TWITTER – www.twitter.com/teyusthedon
2GO - Teyus
TWITTER – www.twitter.com/teyusthedon
2GO - Teyus
Thank you!
Read my post on:
