How to make & create Contact Form | Contact Pages | In google Blogger ? The Knowledge Guide

How to  Add & Create a Contact Page on Google Blogger?

So, let’s get started and add a Contact Page to your Blogger site.

Native Blogger Contact Widget

This method uses the default Blogger Contact Widget. But rather than placing it in the sidebar, we’re going to add it to a page for a much more professional look.

Step 1: Add Widget to Sidebar

1. Login to your Blogger Dashboard.
2. Go to the Layout page.
3. In a sidebar area, click the Add a gadget link.
4. In the Add a gadget popup, click on the More gadgets link.
5. To add the Contact Form to your widget area, click the blue plus icon.
6. In the Configure Contact Form Widget popup window, you can ignore the widget title.
7. If you’re using one of the newest default Blogger templates, you may see a checkbox option that says “Visible – Show contact form”. If you see this option, check it. If you don’t see this option, don’t worry about it, we will take care of this with some code.
8. Click the Save button to save your widget.

Step 2: Hide the Widget

If your widget has the “Visibility – Show contact form” option, skip this step.

1. On the Blogger Dashboard, go to the Theme page.
2. Click the Edit HTML button. The theme code window will open.
3. Press the [Control + F] or [Command + F] keys to open the search box in the code window.
4. Search for: ]]></b:skin>
5. Press the Enter key to search.
6. Paste the following code right BEFORE the ]]></b:skin> code.
7. Code to add:

   div#ContactForm1 { 
   display: none !important; 
   }

8. Click the Save theme button to save your changes.

Step 3: Add Code to Page

1. On the Blogger Dashboard, go to the Pages page.
2. Create or open your Contact Page.
3. Add any content you want like a heading, image or text to the top of the page in Compose mode.
4. Switch to HTML mode. Click on the HTML button.
5. Paste the code below into the code window below your content.

6. Code to add:<!-- Contact Form Code -->
   <style>
   .page-contact-form input,
   .page-contact-form textarea {
   width: 100%;
   max-width: 100%;
   margin-bottom: 10px;
   }
   
   .page-contact-form input.contact-form-button.contact-form-button-submit {
   padding: 10px;
   background: #000; /* Button background color */
   color: #fff; /* Button text color */
   border: none;
   }
   
   .page-contact-form input.contact-form-button.contact-form-button-submit:hover {
   background: #777; /* Button background hover color */
   color: #fff; /* Button text hover color */
   }
   
   </style>
   <div class="contact-form-widget page-contact-form">
   <div class="form">
   <form name="contact-form">
   Name:<br />
   <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
   E-mail: <span id="required">*</span><br />
   <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
   Message: <span id="required">*</span><br />
   <textarea class="contact-form-email-message" cols="25" 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" type="button" value="Submit" />
   <br />
   <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>
   </form>
   </div>
   </div>
   
   <!-- End Contact Form Code -->

7. Click the Publish or Update button to save your changes.

Huzzah, you now have a Contact Page on your Blogger site!

About Blogger:

History:-
On August 23, 1999, Blogger was launched by Pyra Labs. As one of the earliest dedicated blog-publishing tools, it is credited for helping popularize the format. In February 2003, Pyra Labs was acquired by Google under undisclosed terms. The acquisition allowed premium features to become free. In October 2004, Pyra Labs' co-founder, Evan Williams, left Google. In 2004, Google purchased Picasa; it integrated Picasa and its photo sharing utility Hello into Blogger, allowing users to post photos to their blogs.

On May 9, 2004, Blogger introduced a major redesign, adding features such as web standards-compliant templates, individual archive pages for posts, comments, and posting by email. On August 14, 2006, Blogger launched its latest version in beta, codenamed "Invader", alongside the gold release. This migrated users to Google servers and had some new features, including interface language in French, Italian, German and Spanish. In December 2006, this new version of Blogger was taken out of beta. By May 2007, Blogger had completely moved over to Google-operated servers. Blogger was ranked 16 on the list of top 50 domains in terms of number of unique visitors in 2007.

On February 24, 2015, Blogger announced that as of late March it will no longer allow its users to post sexually explicit content, unless the nudity offers "substantial public benefit," for example in "artistic, educational, documentary, or scientific contexts." On February 28, 2015, accounting for severe backlash from long-term bloggers, Blogger reversed its decision on banning sexual content, going back to the previous policy that allowed explicit images and videos if the blog was marked as "adult".

tags;- how to create contact page in google blogger, create contact page, add contact page in blogger, make contact page in blogger, in blogger to set up contact pages,