Making Website in Blogger Platform is Very Easy, But in Blogger you don’t have any Plugins support which can help you in customizing your website and in boosting your website speed. Recently the Google has completely changed the Blogger Interface and people is finding difficulty in the Add Contact Us page.

Making the Stylish Contact Us page in Blogger website is Very You just need to add some of the Code in your Blogger website coding and you can easily set up a New Contact Us Page in Blogger Website.

Today I will tell you How to Create Contact Us page in Blogger Website 2020, and I will also provide the Code of Stylish Contact Us Form which you can add on your Blogger website.

Why Contact Us Page is Important for any Blog or Website?

It is very important to have, Contact us Page on your Blog or Website, it helps your readers and website users to Contact you about there Problems and Suggestions. Here are some Benefits of Contact Us Page in Your Blog or Website –

  • It allows the user to contact Blog Owner in No time and also Delivers message to the Owners Email id Safely.
  • In the Blogger website, it is easy to Customize the Contact us Page if you know about Cascade Style Sheet (CSS) language.
  • Users don’t need to Find your Email or Contact Number to Contact the Website Owner, they can easily Contact it through Contact Us Page.
  • If you need a Google Adsense Approval then Your website must have to Contact us page according to new Adsense Policies.

Every Blog or Website should have a Contact Us page that makes their blog readers comfortable in Contacting the Blog owner.

Create a Contact Us page in Blogger (New Interface) Website 2020

Adding the Contact Us in Blogger website is not so difficult, you need to add some code in your website HTML and always take a Backup while Editing the HTML of your Blogger website.

Here I have created some Parts that will help you to know about How to Create Contact Us page on the Blogger website.

create contact us Page in Blogger

Part – 1: Adding the Contact us Widget in Your Theme

I this Part we will add Contact Widget which is already available in Widget sections in your Blogger website.

Step -1: Login to Blogger.com and choose your Blog in Which you want to add the Contact Us Page.

Step – 2: Now Click on Layout Button from the Menu given on the left side of the Blogger.

Step – 3: Now Click on an Add a Gadget Button and Select Contact Form.

Step – 4: Then Click on Save Button.

These Steps will Add a Contact Form in your Blogger Theme but we need to add it on Page.

Also Read – 5 WordPress Plugins that will help you to Increase the Speed of your Website

Part – 2: Hiding the Contact Form

After Adding the Contact Form in a Blogger Theme, Now we need to Hide it. Follow these Steps to Hide a Contact Form from Blogger Theme.

Step – 1: Click on a Theme Button on Menu given on a Left side of Blogger.

Step – 2: Click On a Three Dots and Choose Edit HTML/Javascript

create contact us page in Blogger website

Step – 3: Now you will see the Coding of your Blogger website, Now Click anywhere in the Coding section and Press Ctrl + F Button from your keyboard, and you will see a search bar on the Top.

Step – 4: Next Search for ]]></b:skin> and Paste the Given Code at the before ]]></b:skin>.

div#ContactForm1 {
display: none !important;
}

Step – 5: Now Click On Save Button.

These Steps will hide the Contact Form From the Blogger FrontPage and from the widget section.

Part – 3: Setting up and Designing the Contact Us Page

Now we will create and Setup the Contact Us Page, here I have shared the Two Designs of Contact us page you can choose your favorite one and can add on the Contact Us Page. Now follow these steps,

Step – 1: Now Click on a Pages Option on a Menu Given on the Left Side of the Blogger Dashboard.

Step – 2: Click on the New Page option given in the Top Left Corner.

Step – 3: Click on a Pencil ✎ Button given on the Left Side and Choose Edit Html.

create contact us page on Blogger 2020

Step – 4: Now Copy and Paste the Design HTML Code that you want on your Contact Us page. Here I have provided the 2 Designs of the Contact form.

Design – 1

contact us Form Blogger

Code – 

<div dir=”ltr” style=”text-align: left;” trbidi=”on”>
<form name=”contact-form”>
<i class=”fa fa-pencil-square-o”></i> Name <br />
<input id=”ContactForm1_contact-form-name” name=”name” size=”30″ type=”text” value=”” /> <br />
<br />
<i class=”fa fa-envelope-o”></i> Email Address <span style=”color: #f56954; font-size: x-small; font-weight: bold;”>important</span> <br />
<input id=”ContactForm1_contact-form-email” name=”email” size=”30″ type=”text” value=”” /> <br />
<br />
<i class=”fa fa-keyboard-o”></i> Content <span style=”color: #f56954; font-size: x-small; font-weight: bold;”>important</span><br />
<textarea cols=”25″ id=”ContactForm1_contact-form-email-message” name=”email-message” rows=”5″></textarea> <br />
<input id=”ContactForm1_contact-form-submit” type=”button” value=”Send” /> <br />
<div style=”max-width: 222px; text-align: center; width: 100%;”>
<div id=”ContactForm1_contact-form-error-message”>
</div>
<div id=”ContactForm1_contact-form-success-message”>
</div>
</div>
</form>
<br />
<style scoped=”” type=”text/css”> #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:95%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:’Open Sans’,sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit{font-family:’Open Sans’;float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style></div>

Design – 2

contact us page blogger

Code – 

<div dir=”ltr” style=”text-align: left;” trbidi=”on”>
<script>var blogId = ‘3409355017628108656’;//this number should be mandatorily edited. //The below message 5 Strings can also be edited var contactFormMessageSendingMsg =’Sending…’; var contactFormMessageSentMsg = ‘Your message has been sent.’; var contactFormMessageNotSentMsg = ‘Message could not be sent. Please try again later.’; var contactFormEmptyMessageMsg =’Message field cannot be empty.’; var contactFormInvalidEmailMsg = ‘A valid email is required.’ var widgetLoaded=false; function sendEmailMsg() { if(widgetLoaded== false) { _WidgetManager._RegisterWidget(‘_ContactFormView’, new _WidgetInfo(‘ContactForm1’, ‘sidebar’, null, document.getElementById(‘ContactForm1’), {‘contactFormMessageSendingMsg’: contactFormMessageSendingMsg , ‘contactFormMessageSentMsg’: contactFormMessageSentMsg , ‘contactFormMessageNotSentMsg’: contactFormMessageNotSentMsg , ‘contactFormInvalidEmailMsg’: contactFormInvalidEmailMsg , ‘contactFormEmptyMessageMsg’: contactFormEmptyMessageMsg , ‘title’: ‘Contact Form’, ‘blogId’: blogId, ‘contactFormNameMsg’: ‘Name’, ‘contactFormEmailMsg’: ‘Email’, ‘contactFormMessageMsg’: ‘Message’, ‘contactFormSendMsg’: ‘Send’, ‘submitUrl’: ‘https://www.blogger.com/contact-form.do’}, ‘displayModeFull’)); widgetLoaded=true; document.getElementById(‘ContactForm1_contact-form-submit’).click(); } return true; } </script> <br />
<form name=”contact-form”>
<div>
Your Name : </div>
<input class=”contact-form-name” id=”ContactForm1_contact-form-name” name=”name” size=”30″ type=”text” value=”” /> <br />
<div>
Your Email: <em>(required)</em></div>
<input class=”contact-form-email” id=”ContactForm1_contact-form-email” name=”email” size=”30″ type=”text” value=”” /> <br />
<div>
Your Message: <em>(required)</em></div>
<textarea class=”contact-form-email-message” 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” onclick=”sendEmailMsg()” type=”button” value=”Send” /> <br />
<div style=”max-width: 450px; 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 dir=”ltr” style=”text-align: left;” trbidi=”on”>
<div class=””widget” contactform=”” id=””custom_ContactForm1″”>
<div class=””contact-form-widget””>
<b style=”font-size: xx-large;”><br /></b></div>
</div>
</div>
</div>

These are two designs you can choose your favorite one and Paste it on the Html Section of the Page.

Step – 5: Now Click on Publish Button.


Now your Contact Us Page is Ready, you can easily add it in the Menu of your Blogger website and You will receive all the Mails of the Contact us Page in the Gmail account from which you have registered you Blogger Account.

Conclusion

Here We Learned about How to Create a Contact Us Page in Blogger (New Interface) Website 2020. You just need to add some code in your Blogger website and your contact us page will be created automatically. Contact Us page is very important for every website, with the help of contact us page Users of your website can easily contact you.

If you are facing any problem in the code, then you can comment on the Problem in the comment section below.

LEAVE A REPLY

Please enter your comment!
Please enter your name here