Blogger is very robust and easy to operate CMS platform, you don't have
to be a geek to operate the dashboard or settings. But with easiness,
there comes some limitations, By default you can't create a Contact us
page, you have to either you have to use any third party plugin or have
to tweak blogger's official contact widget, so that it can work on
static pages. Creating a separate page for contact purpose is very
professional and also makes your blog clean by hiding unnecessary
widgets and plugins So, Lets move further and see How to create Contact Us page in Blogger .
First Step (Important)
Before following the below tutorial we recommend you to install the contact form widget in your blog, it is very easy process and can be done in minutes, with simple click. We have published a tutorial earlier, so you won't face any difficulties.Hiding The widget ( Adding CSS )
Before Editing we recommend you to make a backup of your template, so
that anything goes wrong you still have your blog design safe.
The First thing you need to do is to login into your Blogger account and
go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.
.sidebar .widget.ContactForm {
display: none!important;
}
Creating A Page ( Adding HTML )
Before Editing we recommend you to make a backup of your template, so
that anything goes wrong you still have your blog design safe.
The First thing you need to do is to login into your Blogger account and
go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.
<style>
#contact{
background-color:#fff;
margin:30px 0 !important
}
#contact .contact-form-widget{
max-width:100% !important
}
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{
background-color:#FFF;
border:1px solid #eee;
border-radius:3px;
padding:10px;
margin-bottom:10px !important;
max-width:100% !important
}
#contact .contact-form-name{
width:47.7%;
height:50px
}
#contact .contact-form-email{
width:49.7%;
height:50px
}
#contact .contact-form-email-message{
height:150px
}
#contact .contact-form-button-submit{
max-width:100%;
width:100%;
z-index:0;
margin:4px 0 0;
padding:10px !important;
text-align:center;
cursor:pointer;
background:#27ae60;
border:0;
height:auto;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
text-transform:uppercase;
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
-o-transition:all .2s ease-out;
-ms-transition:all .2s ease-out;
transition:all .2s ease-out;
color:#FFF
}
#contact .contact-form-button-submit:hover{
background:#2c3e50
}
#contact .contact-form-email:focus,#contact .contact-form-name:focus,#contact .contact-form-email-message:focus{
box-shadow:none !important
}
</style>
<div class="contact-form">
<div class="contact section" id="contact" style="display: block;">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div style="text-align: center; width: 100%;">
<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>
</div>
</div>
Conclusion
Congrats !! You have made it. now you have learned that How to create Contact Us page in Blogger Visit
your blog and check the awesome widget live in action, This is the Part
-III of the Tutorial, Hope you liked this tutorial, if you enjoyed then
please share it with your friends, we are working hard to develop more
such awesome widgets please stay tuned with Us. Vaarwel !! (Goodbye in Dutch!! hahaha).
If you like this post then don't forget to share with other people. Share your feedback in the comments section below.
You are welcome to share your ideas with us in the comment!