How to Add Contact Form (Contact Us Page) In Blogger
How to Add Contact Form (Contact Us Page) In Blogger
Search for ]]</b:skin>
4. Just above the ]]</b:skin>, paste the below code :
4. Just above the ]]</b:skin>, paste the below code :
div#ContactForm1 {
display: none !important; }
Add contact us page in Blogger
Now, We will add the contact form to blogger pages.
1. Go to blogger.com and click on pages and click on Add new
2. Give the page a title like Contact Us or me
3. Click on HTML of page editor, Paste the below code in the content box.
<div id="custom_ContactForm1"
class="widget ContactForm">
<div class="contact-form-widget
<p>Get in touch with us by fillin
out the form below.</p>
<div class="form">
<form name="contact-form">
<p></p>
Name
<br>
<input type="text" value="" size=
name="name"
id="ContactForm1_contact-form-
name" class="contact-form-name
<p></p>
<span style="font-weight:
bolder;">*</span>
<br>
<input type="text" value="" size=
name="email"
id="ContactForm1_contact-form-
email" class="contact-form-email
<p></p>
Message
<span style="font-weight:
bolder;">*</span>
<br>
<textarea rows="5" name="email
message" id="ContactForm1_con
form-email-message" cols="25"
class="contact-form-email-
message"></textarea>
<p></p>
<input type="button" value="Sen
id="ContactForm1_contact-form-
submit" class="contact-form-butt
contact-form-button-submit">
<p></p>
<div style="text-align: center; m
width: 222px; width: 100%">
<p id="ContactForm1_contact-for
error-message" class="contact-f
error-message"></p>
<p id="ContactForm1_contact-for
success-message" class="contac
form-success-message"></p>
</div>
</form>
</div>
</div>
<div class="clear"></div>
<span class="widget-item-contro
<span class="item-control blog-
admin">
<a title="Edit"
target="configContactForm1"
onclick="return
_WidgetManager._PopupConfig
(document.getElementById
("ContactForm1"));" href="//
www.blogger.com/rearrange?
blogID=8799058979810298021&wi
ContactForm&widgetId=ContactF
action=editWidget§ionId=sid
right-1" class="quickedit">
<img width="18" height="18" src
img1.blogblog.com/img/
icon18_wrench_allbkg.png" alt=""
</a>
</span>
</span>
<div class="clear"></div>
</div>
Important: This code is not written by me. The code credits go to Ankit Singla from Bloggertipstricks.com.
Post a Comment