Skip to content

A Stylish Contact Form For Blogger Blogspot

If you are trying to create a “Contact” form for your blogger blog but don’t know how to, this post will guide you through how to create a stylish contact form.

contact form for bloggerEvery blogger needs a contact form in his or her blog, so their readers can get in-touch with them. Contact form can be a life saver on many occasions and trust me; you need it as long as you are a blogger and have a blog.

A Stylish Contact Form For Blogger Blogspot

If you are on the blogger platform, you will know that they don’t have this feature enabled. You can only add a contact form in your sidebar and footer of your blog. But you can’t add it in a page as it is on WordPress, why? Because it is being delivered as a widget and not a standalone page.

Must Read: Easily Remove Your Sidebar Widget On Your Blog Mobile View

But in this post, we’ll show you how to add a standalone contact form on your blogspot blog without using a third-party service.

Steps To Add Contact Form On Blogger Blog

First, go to your blogger blog dashboard >>> click “Layout” >>> click “Add Gadget

Click “More Gadget” >>> click “Contact Form”. Or you can easily search for contact form using the search box.

Once you’ve successfully added the contact form to your widget, >>> click “Template” >>> click “Edit HTML”.

Now search for the below code.

]]></b:skin>

Note: To make your search easy, simply click the HTML editor box and simultaneously press the ctrl + f key to bring out a search box.

Have you seen the short code? If yes, right above the code, simply add the following tag

[code]#ContactForm1{display: none !important;}[/code]

Have you done that? If yes, simply click the “Save” button and you are done with the first step. Now let’s move on to the next step shall me…

Creating contact form for your blog.

Click “Pages” at your blogger menu >>> click “New Page” to take you to your page editor.

In the “Page Title” type what you want your contact to be called. E.g. it could be “Contact Me” or “Contact Us”.

In the compose area, click “HTML” and paste the below code in the compose box

[code]

<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:"";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C4DD83;box-shadow:5em 0 0 0 #F4FCC9,10em 0 0 0 #FDCD78,15em 0 0 0 #ED786F,20em 0 0 0 #D99DBF,25em 0 0 0 #C39EDC,30em 0 0 0 #679DE2,35em 0 0 0 #62C2E3,40em 0 0 0 #F4FCC9,45em 0 0 0 #FDCD78,50em 0 0 0 #ED786F,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:25px 0 0;padding:10px;font-size:15px;color:#ccc;border-color:#E8E8E8;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#EE786F;border:0;border-bottom:2px solid #D4685C;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #D4685C}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none !important;box-shadow:none !important;padding:0 !important;}
</style>

<div class="widget ContactForm" id="ContactForm1"><div class="contact-form-widget"><hr><div class="form"><form name="contact-form"><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="Name" onblur=’if (this.value == "") {this.value = "Name";}’ onfocus=’if (this.value == "Name") {this.value = "";}’  /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="E-mail address" onblur=’if (this.value == "") {this.value = "E-mail address";}’ onfocus=’if (this.value == "E-mail address") {this.value = "";}’/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" value="Type your message here…" onblur=’if (this.value == "") {this.value = "Type your message here…";}’ onfocus=’if (this.value == "Type your message here…") {this.value = "";}’></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Message" /><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></div></form></div></div></div>

[/code]

Have you pasted the code to the HTML composer? If yes, let’s continue with the tutorial.

Now, click “Options” >>> click “Don’t Allow” in the “Reader comments” section >>> click “Done” >>> click “Publish”. See screenshot below.

You have successfully installed a contact form to your blogger blog. Now, you don’t have to receive those annoying spam messages again.

Go try it out and see how it goes… you can check a demo of what we just did by clicking this link.

Back to you

Looks like I have said so much about so much on how to easily install a contact form for blogger blogspot, now it’s time to pass the keyboard to  you.

Must Read: Clean Your Blog And Attract Search Engine Using These Methods

Do you have comments, questions or thoughts you’d love to share with us? Please do use the comment box below.

Remember that your comments, questions, and thoughts are highly welcome and most appreciated.

Be social

Don’t forget to share this post with friends so they can learn something new about the blogger platform.

Don’t also forget to subscribe to our feed for your latest updates on the go.

Save

Save

16 thoughts on “A Stylish Contact Form For Blogger Blogspot”

  1. It is really a great and useful piece of info. I’m glad that you shared this helpful info with us. Please keep us informed like this. Thank you for sharing.

  2. Hi babanature,
    Thanks once again for this amazing tutorial, by the way am using ninja plugin in my wordpress CMS but some of my friends are using blogspot I will like to recommend them to must review this tutorial.

  3. Hi Babanature,

    That sure is a stylish contact form! I wish I knew the tricks of the trade and how to do it all when I was on the Blogger platform, which was years back! But always good to learn even now.

    Thanks for sharing. Have a nice week ahead 🙂

    1. Hello Harleena,

      How I wish the blogger platform has all these feature then, it would have been a lovely experience.

      Thank God some developers are focusing on blogger to give it some good custom upgrade.

      Thanks and have an awesome rest of the week

  4. Currently, I’m using Blogger platform. This is a great and good looking contact form for Blogger platform. Keep sharing more interesting contents with us.

    1. Hello Ansari,

      Good to know that you’re on the blogger platform. This tip will indeed be of great help to you if you decide to carry out the process 😉

      Thanks for your thought on this, I truly appreciate.

      Have a good week ahead…

  5. The code is not working, I have pasted the link on the html editor but since i have pasted then also it is not working and it is seeing as blank.

Leave a Reply

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