The idea of having a Blogger contact form on our blog is to check what information we want to receive from senders. An example for this is to require them to enter their name, email-address and subject matter of the message. With that we can easily track the messages coming from our visitors. Also, by using a Blogger contact form for our blog we can eliminate being scanned on the web and receive spam messages.
After Blogger launched its new contact form widget, many bloggers asking if there is a way they could embed the contact form on a specific page. And absolutely yes, there is a way and that was the main topic of this page. We will embed the default contact form on static page on our Blogger blog.
Advantages of Default Blogger Contact Form
- Blogger Contact Form is secured by Google
- Ads Free
- The Contact Form is free
- Fast in sending and receiving emails
- Simple but Customization in design is allowed
- We can embed it on any static pages instead of putting it on the sidebar
Adding Contact Form on Blogger Blog
Before we can embed the contact form on static page, we must put first its gadget to the sidebar or in the footer. You are free to skip these steps if you have already added the contact form gadget on your blog.- Sign in to your Blogger account
- Then go to Layout
- Now go to Add Gadget link and click More Gadget
- Find Contact form and select it
Hiding the Blogger Contact Form Widget
We already added the Contact Form widget on our blog, so this time will hide it from appearing on our sidebar/footer. To do this we need to add some piece of CSS code on our template.Go to Blogger Template and click Edit HTML button. Find this code
]]></b:skin>, just above it paste the following codes given below.#ContactForm1{ display: none !important; }
Adding Blogger Contact Form to Static Page
This is where the main topic of this post is. We will embed the contact form widget on a specific static page (Contact Us or Contact Me) of our blog. So just follow the steps below.- On your Blogger dashboard, go to Pages
- Create new page
- Name it first, either Contact Us or Contact Me
- Switch to HTML editor mode
- Paste the following codes given below
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="33" type="text" value="" />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="33" type="text" value="" />
<textarea class="contact-form-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" ></textarea>
<input class="contact-form-button" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div style="max-width: 75%; text-align: center; width: 75%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style>
.contact-form-name{
max-width: 295px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNITSN3OwDleT_XuuVZ8jQzFi4Mpd0Mea5Lh679M-OJnS6Arh3CidMv2YnJzX8N5heMP2iWbbr6z068tea_IYkixgED05nzE_LElrCzHu2BCx-OWzYVr3WL44JDMPKpDrruR5V_zatzpp4/s0/author.png) no-repeat 8px 4px;
padding: .4em 0em .3em 2.1em;
border-radius: .3em;
border: 1px solid #A4A4A4;
}
.contact-form-email{
max-width: 295px;
margin-top: 1em;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTeFWtR8H52yindMN40vPbTHGeIY-APdmrBqLq5_d6MqxnqKQnr4TRmDXF2a3DbxBKoUskdZM_IVotEwhPaevMx3miEzQsRdZjhWt4eTks2OUVpigFh1wzJGNzHzsDfSBDPM7WW850hj8/s1600/email.png) no-repeat 8px 5px;
padding: .4em 0em .3em 2.1em;
border-radius: .3em;
border: 1px solid #A4A4A4;
}
.contact-form-message{
margin-top: 1em;
height: 200px;
width: 75%;
border-radius: .3em;
}
.contact-form-button{ background: #DE3F00;
cursor: pointer;
color: #FFF;
width: 15%;
border: 1px solid #9B2C00;
border-radius: 4px;
font-size: 13px;
}
</style>
Possible Questions about Blogger Contact Form
Where can we see if someone message us?
If someone tried to message us through blogger contact form, we can view it on our gmail account associated with our blogger blog. If your blog has a multiple admin then every admin will receive the message.How to reply if I got a message?
The message we received was sent by no-reply@blogger.com that means we can't reply directly in the received mail box through reply button. In order to reply them, we should get their email address used to email us and then sending them a message manually.You are free to use the comment box below to ask if you are facing some problems regarding the tutorial. I promise I will chat you there.
