How to create Contact Us Form in Blogger? | HTML and CSS Contact Form

Blogger is a 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 come 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 the blogger’s official contact widget so that it can work on static pages. Creating a separate page for contact purposes is very professional and also makes your blog clean by hiding unnecessary widgets and plugins So, Let’s move further and see How to create a Contact Us page in Blogger.

First Step (Important)

Before Editing, we recommend you make a backup of your template so that anything goes wrong you still have your blog design safe.

Creating A Page (Adding HTML & CSS)

• The First thing you need to do is to login into your Blogger account
• Dashboard Appeare Goto Page Option
• Create A Page With the Name Of Contact Us

• Now find the Option HTML View on the Left Side on the Page Writing Content Option
• Now Copy all the Code Given Below and Paste it on your Page HTML View

<!-- CSS -->
<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>


<!-- HTML -->
<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>

Add Message Box in Blogger Contact Us Page

• Edit HTML and search for the <div class=“contact-form”>tag and just above it paste the following code.
• Replace you desire message on the RED text area.
• You can Change Icon of your Alert message.

<span> <div class="alert-message alert">
<i class="fa fa-info-circle"></i>   Please tell me from which platform you come to me. (Facebook, Linkedin, Insta, Twitter, Pinterest, Google).
	</div></span>

Conclusion

Congratulations !! You have made it. now you have learned that How to create a Contact Us page in Blogger. Visit your blog and check the awesome widget live in action. Hope you liked this article. if you enjoyed it then please share it with your friends. we are working hard to write the most important and awesome articles please stay tuned with Us.

Congratulation You created the Contact us Form on a blogger Page Successfully!!!

How to create Contact Us Form in Blogger? (Video Tutorial)