How to Create Cool Contact us page in Blogger 2020

How to Create Cool Contact us page in Blogger 2020

Posted by Tech Blogger

Sunday, October 13

Blogger Tips Short codes Widgets

Blogger or Blogspot is exceptionally powerful and simple to work with CMS Plate-form, you don't need to be a nerd to work on your dashboard or internal settings. In any case, with ease, there comes a Many Limit, By default you can't make a Contact us page in your blogger widgets, you need to possibly use some other hosts to utilize any third party code or need to change bloggers authentic contact gadget, so it can chip away at static pages. Making a different page for contact intention is proficient and furthermore makes your blog or website clean by covering up excess gadgets and modules So, Lets get proceed to further & learn how to make a Contact Us page in Blog or Blogger.

Our First Step is slightly important

Before follow the below mention example or exercise we prescribe you to introduce the contact form widget in your blog, it is very simple process and should be possibly done in less than 2 minutes, with basic snap. We have posted an instructional exercise before, so you won't faces any obstacles or challenges. If it's not too much trouble pursue How to Add Contact Form Widget In Blogger And Blogspot Blogs.

First visit blogger.com and login to your blog account which you want to add form. If you are running many blogs, you only need to select the blog from your blog lists. simple as you can see below:



After Successfully follow the Step 1 lets head to next step: Click on the Layout option from the left sidebar to open a option to add gadgets (as exactly shown in below image).



Now in advance to step 3: You can here see Add a widget link on the panel of the right hand. and Clicking on it will show you a list of all widgets as shown below example



After following all the above steps now get to last step: now choose from the left hand list. you will see Contact Us Form. Now you Just have to add the same in your template. easy.

Hiding The widget >>How to Add CSS<<

Before proceeding to edit the theme of your website, first kindly make a backup of your theme or template, so is anything goes to wrong side you still have a copy of your blog or website structure safe. that you can install anytime.

First of all you need to do is to login to your Blogger account using your gmail id & password and go to ---- Templates ---- Edit the HTML and type Ctrl+F shortcut key for open search box for the ending ]]></b:skin> CSS tag and just above it paste the following mention code.

.sidebar .widget.ContactForm {
    display: none!important;
}

Creating a Page ( Adding HTML ) 

Before proceeding to edit the theme of your website, first kindly make a backup of your theme or template, so is anything goes to wrong side you still have a copy of your blog or website structure safe. that you can install anytime.

First of all you need to do is to login to your Blogger account using your gmail id & password and go to ---- Templates ---- Edit the HTML and type Ctrl+F shortcut key for open search box search for the ending ]]></b:skin> CSS tag and just above it paste the following mention 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>

End of Tutorial

Hurrey !!! You have successfully made it to the end. after that visit your blog or search your blog address to the address bar and check the Classy widget live in action, This is the Part- III of the our Tutorial, I think you liked above describe detailed tutorial, if you still having trouble kindly comment below, i'am happy to help you

If you find this above article helpful kindly don't forget to share with others (maybe your One share help someone)