Contact Me is the basic page of a blog or website, If you have a blog of your own then you must have to create this page to get a good ranking from search engines and alexa. There are many ways to create a contact me page. You can give some contact sources manually or embed a widget or a form in your contact page.
Blogger introduce a widget named as Contact Form. You can add it into your blog layout and in this post we will learn how to add this widget into a static page or in a specific post. It is very important for a blogger to add this widget to his blog’s contact page. That users can contact you directly with out accessing any other directory. Let’s start doing work..
It simply looks like this but we customize it and make more beautiful.
How to add contact form widget to blogger blog?
Simply go to the layout of your blogger blog and click on the add gadget option. And then go to the more gadget tab and add a contact form any where in the layout.
2.Change the style of the widget
Go to your blogger template and click on edit HTML and search for the following code ]]></b:skin> and paste the following CSS code just above it.
/* Contact Form Body */
.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;
}Now you have successfully styled your contact me widget and now its time to add it to static page.
It will look like this.
3.How to add contact me form to static page or post?
In the previous step you have successfully styled your widget and in this step we will add that widget into desired static page or post which you want. Go to your template and click on Edit HTML and search for your widget by using CTRL + F (Write ‘Contact Form’ in the field).And expand the code by clicking the black arrow left to the widget row.
Now click on on the includable tag arrow and expand the widget coding and remove the part which I highlighted as red at below.
<b:widget id=’ContactForm1′ locked=’false’ title=’Contact Form’ type=’ContactForm’>
<b:includable id=’main’>
<!-- remove the code at below-->
<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’/>
<!--remove the code upper comment line-->
</b:includable>
</b:widget>After removing your coding which is red above its time to paste another code into the page in which you want to shoe this widget. i.e contact page or any specific post.
Now go to the page in which you want to show this widget and paste the code which is below in the page’s HTML.
<div class=’widget ContactForm’ id=’ContactForm1′>
<div class=’contact-form-widget’>
<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>The contact form will start showing in your page after pasting this code. When someone submit any message to this form it will be sent to your same email which is registered on the blogger.
Visit out contact page and see the demo. If you have any question don’t hesitate to ask and keep visiting our website.
If you like this post then don’t forget to share it with your friends on social media and subscribe us via Email on the top right corner of the blog.
