How to Add Blogger contact form and Contact Us Page-labnole.com

How to Add Blogger contact form and Contact Us Page

Today we will talk about how to add a contact form and contact us page to blogger. We know that every website has contact form and contact us page. And it is very important to contact AdSense and contact form and contact page. Any website Visitors can contact the blogger's contact form and contact page. From this contact page and contact form, so we will discuss how to add contact form and contact page to bloggers today. All code will be provided to add contact form and contact us page to blogger. Generally, the blogger will create contact forms and contact pages through HTML, CSS, XML.

Add contact form and Contact Us Page benefits:
  1. Benefits of Visitors.
  2. website professional look.
  3. This is very important for AdSense Approval.
  4. Visitors provide any help.
So let's start the discussion about how to Add Blogger contact form and contact us page. Follow all the steps below to add contact contacts and contact pages.

 Add Blogger contact form and Contact Us Page

How to add Blogger contact form :

 Step1: 

First work login to blogger. Then click on the blogger layout. your layout according to select the area and click on add a gadget. see the Demo image.

add-a-gadget-image-by-labnole.com

Find a contact from page gadget.

contact from gadget

Configure Contact Form Widget, you can Edit your title that's your choice and Save it.

Configure Contact Form Widget

You can see the contact form Demo image But by default, the theme color will be applied your title and send button.
contact form Demo image

I hope you understand, how to add a contact form to Blogger. Have any question ask me.


How to Add Blogger Contact Us Page

Note, please

you need to complete My  Step1  process.
Then go to your theme option and Click Edit HTML option. see image-

theme option image

Press Control+F Button then Search box visible and Find </b:skin> )
Paste this code before </b:skin> CSS code .


.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
}
Next work

Find ( Contact Form ) see the image.
Edit theme code

 <b:includable id=’main’> ... </b:includable> Delete. Then save it.

Next work

Create contact us page click HTML mode. 

Blogger HTML mode
Click HTML mode Demo image
Paste the code below and Publish.

<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="fm_name">
Your Name:
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="fm_email">
E-mail Address *:
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear:both">
</div>
<div class="fm_message">
Message *:
<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>
</div>
</form>
</div>
</div>
</div>
Then blogger Contact Us page is completely created.
See Demo image.
Contact Us page
Have any question about this topic?
Anyone, comments now.
Hopefully, this will be very easy to create contact form and contact us page on Blogger.
 If you like this tutorial, Please subscribe to share and don't forget to comment.

Thank you by Labnole.com

Post a Comment

0 Comments

Follow by Email

Get all latest content delivered straight to your inbox.