How Creat a Contact Page in My Blog

The Easy Way to Create a Contact Page on Blogger

You have 2 ways to add a Contact Page to Blogger. The first method uses the native Blogger contact widget. This method is great because it’s easy to set up and you don’t have to sign up for any outside services or apps. The main limit is that you can’t add any extra fields or use an email other than the email associated with your Blogger account.

The second method shows you a free service you can use to embed a custom form into your site and receive emails at any email address you want.

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!