How to Create Contact Us Page in Blogger?

Create Contact Us Page in Blogger is very important and plays a very big role for any website if you are going to start blogging, or your blogging journey has started.

Here it is very important to have some important pages for your blog or website if you want to make your successful blog or website.

It is a little difficult for Blogger Websites to make a Contact Us Page because Google has not given us any plugins to Blog Sites in Blogger, yes you can Widget Contact Us, but it seems very Simple and Unattractive on the Website.

One thing you get is the Contact Form, as a Widget in Blogger, meaning a Widget you have to put them in the sidebar of your blog and not Page Section.

Most of the websites on Blogger use third-party sites such as jotform, and 123formbuilder for generating Contact Pages. But it’s not easy, you have to charge to use the service of third-party sites. Which cannot be the best option for everyone.

That’s why I’m going to tell you in this article that you can create a contact us page on your blogger website. Which you can create for free and without using a third-party site.

Create Contact Us Page in Blogger

I will tell you in steps how to create a Contact us Page, you have to follow these steps.

There are three Sections for Blogger Contact Page Creation:

  • Add contact gadgets:

First, you have to add the Widget Blogger Contact Form on your Blog,

  1. Go to the dashboard of your blog. Select the layout section of that menu bar.
  2. Now Click Add a Gadget.

When you click on this Gadget Contact Form, you will have a Popup Window Open of Configure Contact Form,

 

  • Now you have to click on SAVE so that Contact Form Widget will add your Blog.
  • Now you have to Add Blogger Contact Form on your Blog, Next, you have to hide this Default Contact Widget so that you can create the Contact Us, Page.

 

  • Hide Contact Gadget:

You have to follow these Steps to Hide the Default Contact Form.

  1. Click on the Theme section in your blogger menu and go to the Edit HTML button.
  2. Now tap the HTML code area and press the Ctrl + F button on the keyboard.
  3. Now a search box will appear, here you Enter it by </b:skin> type.
  4. Now paste a CSS code above this </b:skin>.
div#ContactForm1 { display: none !important; }

Save your template and that’s all you have done. Now you have created a Contact Form Widget in Hide.

  • Add contact gadgets to the contact page:

Now you can create a Contact Us Page in Blogger, Follow these Steps to Create a Contact Us Page.

  1. Go to the Pages section of the Menu Bar and Click New Page this Option.
  2. Now Contact or Contact us Insert it in Page Title and select HTML Tap
  3. Now you have to Copy the code below and Paste this Code into your selected HTML Section.
  4. Now Click Options in Page Setting, Allow Do not in Reader Comment, Select Hide Existing, and Click Done.
  5. Now Publish Page, now you are Contact Us Page is Successfully Created.
<div style="background-color: white; color: fff cornflowerblue; padding: 10px;"><form name="contact-form"><span style="color: #1d79b6;">Name</span><br /> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-envelope-o"></i><span style="color: #1d79b6;"> Email Address</span> <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> <br /> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-keyboard-o"></i><span style="color: #1d79b6;"> Message&nbsp;</span><span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></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>

Now whenever a Person sends a Message with this Contact us Page, it will deliver to the Admin Email.

Also Read: How to Create a Privacy Policy Page?

If you have any queries or advice regarding this post, feel free to write in the comment box, we respect your every comment and are committed to answering your asked questions. If you think this knowledge should be shared with someone else, share it in all your groups, thank you. 

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!