Aug 28, 2019

How To Add Contact Us Form (Contact Us Page) in Blogger?

How To Add Contact Us Form (Contact Us Page) in Blogger?

How To Add Contact Us Form Contact Us Page In Blogger

How To Add Contact Us Form (Contact Us Page) in Blogger? If you want to add Contact Us Form in your blog but you don't know how to add then don't worry about anything because today In this article, I will show you how you can add Professional Looking Contact Form (Contact Us Page) in your Blogger blog with step by step guide.

Because adding a Contact Form in Blogger is a tedious task as it does not support plugins like WordPress that's why you cannot make Professional Contact Us Page easily in Blogger But today, you are going to learn how to add Professional Looking Contact Us Page in Blogger by copying and pasting a bit of provided codes.

Having a Professional Looking Contact Us Page can take your blog to the next level.

A Contact Page Can Help You:


  • Connect with your readers
  • Connect with brands and sponsors
  • Connect with other bloggers who might want to collaborate
  • Acquire leads if you offer services


Ways To Add Contact Us Page:


I’m going to teach you 2 ways to add a Contact Us Page to Blogger. The first method is very easy you just need to copy and paste the provided codes This method is great because it’s easy to set up and you don’t have to sign up for any outside services & apps.

The second method shows you a free service that 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 Us Page to your Blogger site.

Method 1:


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.

Part 1: Add Widget to Sidebar


Follow the steps given below to add a contact us gadget on your blogger site.

Step 1: Log in to your Blogger Dashboard.
Step 2: Go to the Layout page.
Step 3: In a sidebar area, click the Add a Gadget link.
How To Add Contact Us Form Contact Us Page In Blogger
Step 4: In the Add a Gadget popup, click on Contact Form to add the Contact Form to your widget area.
How To Add Contact Us Form Contact Us Page In Blogger
Step 5: In the Configure Contact Form Widget popup window, you can ignore the widget title.
Step 6: 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.
How To Add Contact Us Form Contact Us Page In Blogger

Step 7: Click the Save button to save your widget.

Also Read: 10 Most Popular Recent Post Widget For Blogger

Part 2: Hide the Widget


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

Step 1: On the Blogger Dashboard, go to the Theme page.
Step 2: Click on the Edit HTML button. The theme code window will open.
How To Add Contact Us Form Contact Us Page In Blogger
Step 3: Press the [Ctrl + F] keys to open the search box in the code window.
Step 4: Search for: ]]></b:skin>
Step 5: Press the Enter key to search.
How To Add Contact Us Form Contact Us Page In Blogger
Step 6: Paste the following code right BEFORE the ]]></b:skin> code.
Step 7: Code to add:
div#ContactForm1 {
display: none !important; }
Step 8: Click the Save theme button to save your changes.
How To Add Contact Us Form Contact Us Page In Blogger

Part 3: Add Code to Page


Step 1: On the Blogger Dashboard, Go to Pages and click on New page.
Step 2: Create or open your Contact Page.
How To Add Contact Us Form Contact Us Page In Blogger

Step 3: Add any content you want like a heading, image or text to the top of the page in Compose mode.
How To Add Contact Us Form Contact Us Page In Blogger
Step 4: Switch to HTML mode. Click on the HTML button.
Step 5: Paste the code below into the code window below your content.

Step 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 -->
Step 7: Click the Publish or Update button to save your changes.
How To Add Contact Us Form Contact Us Page In Blogger

Also Read: How To Add Stylish Floating Social Media Icons In Blogger

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

  • I have added a bit of style to the form. You can change the submit button background and text colors if you want them to better match your site. The CSS code is annotated.


Method 2:


Embed a JotForm, JotForm is an online form builder and form creator. By using JotForm you can create your Form with a drag and drop creation tool. 

It is FREE up to:

  • 100 monthly form submissions
  • 5 forms
  • 1,000 monthly form views
  • 500 stored forms
  • JotForm branding on form

So, if you’ve got a crazy busy Contact Form, this may not be the solution for you and you may want to stick to Method above which is totally unlimited. But if you anticipate less than 100 contacts per month, this is a great option.

It Offers Some Really Handy Features Like:

  • Thank You Page creation
  • Custom fields
  • Choose the email for delivery
  • Send an automated reply to contactees
  • Custom styling
  • and more!

Part 1: Create a JotForm Form


Step 1: Signup for JotForms.
Step 2: In the JotForms Dashboard, click the Create Form button.
How To Add Contact Us Form Contact Us Page In Blogger
Step 3: Choose Classic Form (all fields on one page) or Card Form (one field per page). Click the Create a Form button under the style of your choice.
How To Add Contact Us Form Contact Us Page In Blogger
Step 4: Next, choose whether you want to start from a Blank Form, Use Template, Request a Form or Import Form. I recommend using a Template.
How To Add Contact Us Form Contact Us Page In Blogger
Step 5: Choose the template that best fits your needs. There are several Contact Form options. You can always edit fields, text and style later.
Step 6: Once you select your template and click Continue, you will be able to edit a preview version of your form.
Step 7: Click the Add Form Element button if you need to add another field, more text, etc. I have added a Phone Number field in my example.
How To Add Contact Us Form Contact Us Page In Blogger

How To Add Contact Us Form Contact Us Page In Blogger
Step 8: To edit the styles of your form, click on the Blue Paint Roller Icon. You can edit colors, fonts, choose color schemes or even pick one of their pre-made themes.
How To Add Contact Us Form Contact Us Page In Blogger
Step 9: When you’re done Building your form, click on the Settings tab. Under this tab you can set Conditional Logic (show hide fields, etc.) as well as set Notifications (emails to you) plus autoresponder message to the person who contacted you.
Step 10: Under Settings, you can also integrate your form with services like MailChimp and add a Thank You page (great idea!).
How To Add Contact Us Form Contact Us Page In Blogger
Step 11: Once your Settings are complete, it’s time to Publish your form. Click on the Publish tab.
Step 12: Click on the Platforms tab on the left side of the page.
Step 13: You will find an option for Blogger.
How To Add Contact Us Form Contact Us Page In Blogger
Step 14: The embed code will be displayed. Click anywhere in the Code Box and Select all the Code and Copy the Form Code.
How To Add Contact Us Form Contact Us Page In Blogger


Part 2: Add Contact Form to Your Page


Step 1: In the Blogger Dashboard, go to the Pages page.
Step 2: Click on the page you wish to edit.
How To Add Contact Us Form Contact Us Page In Blogger
Step 3: In Compose mode, add any content you wish to add to the Contact Page.
How To Add Contact Us Form Contact Us Page In Blogger
Step 4: Switch to HTML mode.
Step 5: Under your content, Paste The Form Code you copied.
How To Add Contact Us Form Contact Us Page In Blogger
Step 6: Click the Update or Publish button to save your page.

  • Yeah, you will now have a custom form embedded in your Contact Page. Emails will be delivered to your inbox according to your settings.

You Now Have a Contact Page on Blogger!


Having a dedicated Contact Page makes your blog look more professional and also makes it easier for your readers, potential sponsors and others to contact you.

Important Tip – Turn off the comments for your contact us page and make sure you add it to your menu so that it is easily accessible.

I hope this Article was helpful to you. You would also like to read about the Top 5 Famous Bloggers in Pakistan and What Is Blogging In Urdu/Hindi? - How To Start Blogging in 2019

Don’t forget to share this post with your blogger friends and also leave a comment below sharing your thoughts.

Happy Blogging!

Post a Comment

Whatsapp Button works on Mobile Device only

Start typing and press Enter to search