How to Add A Unique Blogger Contact Form On Static Pages
Here at smart income Technology, we believe to bring to you daily or weekly report/ Tutorial that we know that can change your life for good in terms of IT and Capacity Building Technique that can propel you to be your own BOSS. check our Free Gift Here or Tutorial Store Here
Today post is going to Unique How to Add A Unique Blogger Contact Form On Static Pages . So Sit tight and Let Ride on.
Many bloggers All over the Blogging Community don't want to add this Contact
Form on blog's sidebar widget. They love to put a contact form on a
static page or post pages. Now I will show you with this tutorial how to
give beautiful style and install Unique Blogger Contact Form widget
on a static page or on the post. Follow the given below easy tips:Step#1: Add Contact Form On Sidebar
Go to Blogger Dashboard » Layout » Click On Add a
gadget » More » Contact Form widget. See screenshot given below for more
information.
Step#2: Styling Contact Form
Go to Template » Edit HTML, click on the sideways arrow next to <b:skin>...</b:skin> and paste the code just above ]]></b:skin> (Press CTRL + F to find it):
Note - It will look like given below screenshot after applying the style./* Contact Form Container */.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}
Step#3: Add Contact Form In A Static Page
First of all make sure you added a Contact Form Gadget (Layout) on sidebar. Now, edit the template (Template » Edit HTML). Press Ctrl+F and search for the id "ContactForm", expand the widget by clicking on the black arrow on the left and then remove the part that I have colored in green (see below):
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<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 + "_contact-form-name"' 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 + "_contact-form-email"' 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 + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Now save your blogger template and then go to Pages and paste the following code into a new blank page with the title you want:
<div class='widget ContactForm' id='ContactForm1'> <div class='contact-form-widget'>It's all done. Now you will receive messages from senders to the same email that you have registered in Blogger.
<div class='form'>
<form name='contact-form'>
<p>Name<p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>E-mail *</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Message *</p>
<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'/>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</form>
</div>
</div>
</div>
We hope that you found this tutorial
helpful. always visit Smart
Income Technology For more Blogger and SEO tips, For
any query or difficulties you may have about this article please leave a
comment below. and we shall respond to it as quickly as possible. Email us @
onyemadotshedrach@yhaoo.com or connect us on facbook @ http://www.facbook.com/onyema.shedrach@yahoo.com
.
Get our E-book on Wealth Creation By clicking HERE
Subscribe to:
Post Comments
(
Atom
)
2 comments :
Thanks a lot @webdesign 4 stoping by to read our Tutorial, we hope u wil come back as u said.
than you alot
it help me lot
Post a Comment