Thursday, January 20, 2022
HomeBlogHow To Add Contact Me Form For Blogger Blogs: Change Style And...

How To Add Contact Me Form For Blogger Blogs: Change Style And Add In A Static Page

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 != &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’/>
<!--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.

MOHD AIYUB KHAN
Hello friends, I am AIYUB KHAN and I am Technical Auther & Co Founder of Akdoogle And if I talk about education, I am a Post Graduate Engineer. I love learning and researching new technology and telling and teaching others about them. If you continue to support me in this way, then I will continue to bring such new things to you. Such as Internet, Computer, Technology, Development, Seo Etc ... #We Are Experts!
RELATED ARTICLES

20 COMMENTS

  1. Hello there, just became aware of your blog through Google, and found that it is truly informative.
    I am gonna watch out for brussels. I will be grateful if you continue this in future.
    A lot of people will be benefited from your writing.
    Cheers!

  2. Nice weblog right here! Additionally your website a lot up very fast!
    What web host are you the use of? Can I get your affiliate hyperlink in your host?
    I want my site loaded up as quickly as yours lol

  3. Have you ever considered writing an e-book or guest authoring on other
    blogs? I have a blog based on the same subjects you discuss
    and would love to have you share some stories/information. I know my
    audience would enjoy your work. If you are even remotely
    interested, feel free to send me an email.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Tech News

Latest Videos

Recent Comments

error: Content is protected !!