Destino Solutions

+91 9747866100

How to Make Simple contact form for Blogger

June 15th, 2014

Contact Form is the best solution for blogs and websites, It is Easy to use for Blog Readers and not sharing our email address for readers, So Contact form protect our email privacy. Blogger Users Also available a Contact form Widget, It is flexible to make a contact form page.
Now we can use this widget for making a simple contact form page in your blogger blog (blogspot).

Follow The Steps  

 Note : Backup Blogger Template and After do following Steps.

1.Add Contact Form Widget. 

Go to Blogger Dashboard >  Layout > Add A Gadget > More Gadget > Contact Form

2. Delete Following Code.

Find following code (Ctrl+F), And Delete it.
(This Step for Hide Contact Form Widget in Your blog widget section or don’t like to remove, If You  leave this step.)

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>

3.Create A new Contact Page.  

Go to Blogger Dashboard > Pages > New Page.
Add a Title name on page : Contact or Contact Us 

4.Add Following code.

Then Edit with HTML mode.


<div dir="ltr" style="text-align: left;" trbidi="on">

Paste Following code Just Below of above code.

<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<ul style="text-align: left;"></ul>
<ul style="text-align: left;"></ul>
<div style="background-color: white; border: medium none; color: black; overflow: hidden; text-align: left; text-decoration: none;">
</div>
<div style="background-color: white; border: medium none; color: black; overflow: hidden; text-align: left; text-decoration: none;">
</div>
<span style="color: #674ea7;"><b>Name</b></span><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<span style="color: #674ea7;"><b>E-mail</b></span><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<div style="text-align: right;">
<b><span style="color: #674ea7;">Message &nbsp;&nbsp; </span></b></div>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>

5.Add Some CSS.

Go to Blogger > Template > Edit HTML
Find following html (Ctrl+F).

]]></b:skin>

Just Above Paste Following CSS.

/* contact-form
---------------------------------------------- */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0px auto;
color: #000;
border-radius: 10px;}
.contact-form-name, .contact-form-email {
width: 60%;
margin-bottom: 10px;
border-radius: 5px;
height: 35px;
box-shadow: 0px 0px 3px 2px #E0DEDE inset;}
.contact-form-name {
margin-left: 25px; }
.contact-form-email {
margin-left: 20px; }
.contact-form-email-message {
width: 100%;
max-width: 100%;
border-radius: 10px 10px 0px;
box-shadow: inset 0px 0px 5px rgba(218, 218, 218, 1);}
.contact-form-button-submit {
border-color: #C1C1C1;
background: none repeat scroll 0% 0% rgba(228, 211, 140, 1);
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
float: right;
border-radius: 0px 0px 10px 10px;
height: 40px;}
.contact-form-button-submit:hover{
background: #000;
color: #ffffff;
border: 1px solid #FAFAFA;} 

You’re done! have Any Questions? Please feel free mentioned it below comment box.
 

Categories: BloggerBlogger Widget