Tech Magazine

Another Custom Contact Form For Your Blogger Blog

Posted on the 20 March 2017 by Babanature @proudlyonenaija

Many bloggers using the blogger platform are searching for a custom contact form to complement their blog design. And many people want a custom contact form because they are tired of using a third contact form.

Another Custom Contact Form For Your Blogger Blog

I am from Nigeria, and many people from this part of the world create their blogs on the blogger platform. After creating the blog, they won't have a "contact me" page so loyal readers, business owners, can reach out to them.

Must Read: How To Add "Read More" Link To Blogger Blog

Hey, if you do not have a contact form, you just don't know what you're missing... every blogger needs a professional touch to the design of their blogs, and if your blog doesn't have that professional touch, you won't unleash the full potential of your blog.

Another Custom Contact Form For Your Blogger Blog

Unlike before, you now have the option to design your blogger blog the way you want, why? Developers have started focusing and building more features for the blogger platform.

Tell me, what feature do you see on the WordPress platform that you would like to be on your blogger blog? Just make the search and you'll see it.

A,B,C Steps on How To Add Custom Form to your Blogger blog

I have dropped how to add a stylish contact form on your BlogSpot on this article and the video tutorial. But if you are lazy to click those links, you can follow the below procedure to create your very own contact form

  1. Go to your BlogSpot dashboard and click on "Layout"
  2. Click "Add Gadget"
  3. And click "More Gadget"
  4. Then click "Contact Form". Or you can easily search for contact form using the search box.
  5. Once you've successfully added the contact form to your widget, click "Template"
  6. Now click "Edit HTML".

Now search for this 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

#ContactForm1{display: none !important;}

Have you done that? If yes, simply click the " Save " button and you are done with the first step.

Doing the above steps will make the contact form invincible on the widget area but works well on the page you're adding the below code to.

Next Stage

  1. Clicking "Pages" at your blogger menu
  2. Press"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

&amp;amp;amp;lt;style type="text/css"&amp;amp;amp;gt;
 .contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px;background:#fff}.contact-title{text-align:center;font:41px fantasy;color:#121212;margin-bottom:25px}.contactf-name,.contactf-email{float:left;width:47%}.contactf-name{margin-right:6%}.name-icon img,.email-icon img{background:transparent!important;border:medium none!important;box-shadow:none!important;padding:11px 0!important}.name-icon,.email-icon{position:absolute;z-index:1}.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:0 0 25px;padding:10px 10px 10px 25px;font:bold 16px cursive;text-shadow:0 1px 2px #ddd;color:#121212;background:transparent!important;border-color:#121212;border-width:0 0 2.5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message,.contact-form-email-message:hover,.contact-form-email-message:focus{padding:10px!important}.contact-form-email-message{height:150px;border-width:2.5px!important}.contact-form-button-submit,.contact-form-button-submit:hover{background:#121212!important;width:30%;height:37px;font:bold 13px "Lucida Grande";letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important}
 &amp;amp;amp;lt;div class="widget ContactForm" id="ContactForm1"&amp;amp;amp;gt;&amp;amp;amp;lt;div class="contact-form-widget"&amp;amp;amp;gt;&amp;amp;amp;lt;h2 class="contact-title"&amp;amp;amp;gt;Get in touch.&amp;amp;amp;lt;/h2&amp;amp;amp;gt;&amp;amp;amp;lt;div class="form"&amp;amp;amp;gt;&amp;amp;amp;lt;form name="contact-form"&amp;amp;amp;gt;&amp;amp;amp;lt;div class="contactf-name"&amp;amp;amp;gt;&amp;amp;amp;lt;div class="name-icon"&amp;amp;amp;gt;&amp;amp;amp;lt;img src="" width="16" height="16" /&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;&amp;amp;amp;lt;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 = "";}'  /&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;&amp;amp;amp;lt;div class="contactf-email"&amp;amp;amp;gt;&amp;amp;amp;lt;div class="email-icon"&amp;amp;amp;gt;&amp;amp;amp;lt;img src="" width="16" height="16" /&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;&amp;amp;amp;lt;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 = "";}'/&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;&amp;amp;amp;lt;div style="clear:both"&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;&amp;amp;amp;lt;div class="contactf-message"&amp;amp;amp;gt;&amp;amp;amp;lt;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 = "";}'&amp;amp;amp;gt;&amp;amp;amp;lt;/textarea&amp;amp;amp;gt;&amp;amp;amp;lt;input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" /&amp;amp;amp;gt;&amp;amp;amp;lt;div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;&amp;amp;amp;lt;div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;&amp;amp;amp;lt;/form&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;

Now, click " Options" >>> click " Don't Allow" in the " Reader comments" section >>> click " Done" >>> click " Publish ". See screenshot below.

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

Back to you

Do you like the post? Then do drop your thoughts using the comment box below. Remember that your comments, questions, and thoughts are highly welcome and most appreciated.

Be social

Be sure to share this post with your friends using the social share button below this post... I am sure they would want to learn how to add a custom contact form to their blogger blog.

Must Read: Show Widgets On Blogger Mobile View Using This Trick

Remember that sharing this post is also one way of keeping alive.

Was the post interesting? Then do subscribe to our feed so you can be getting most fresh and exclusive delivered to your email for free.

You Might Also Like :

Back to Featured Articles on Logo Paperblog

These articles might interest you :

  • My Umbrella and I


    I bet each one of you has an umbrella story (or several) to tell. My first memory of an umbrella is probably from the time I was five-or younger-huddling under ... Read more

    The 17 July 2018 by   Vidyasury
  • Downward Causation

    Downward Causation

    I've argued for the idea that social phenomena are generated by the actions, thoughts, and mental frameworks of myriad actors (link). This expresses the idea... Read more

    The 17 July 2018 by   Dlittle30
  • Ikk Panjab Rajouri Garden Food and Restaurant Review #FoodReview

    Ikk Panjab is a synonym of the blissful dining experience. Nothing falls short of expectation here. A place to rediscover lost recipes. There are many factors t... Read more

    The 17 July 2018 by   Jaideep Khanduja
  • A Food-Lover’s Guide to Greece

    Food-Lover’s Guide Greece

    Ah, Greek food! Just the thought of a warm filo pastry with a mizithra cheese stuffing and a cup of dark Greek coffee brings back near-perfectly preserved... Read more

    The 17 July 2018 by   Niviya Vas
  • 2018 Monsoon Must Haves

    The monsoons have arrived and along with its relief, have come a few of monsoon’s undesired experiences. We tend to not put on our best clothes during the... Read more

    The 17 July 2018 by   Meet Rv
  • SAAM Arcade: Game Spaces

    What does "Game Spaces" mean to me? When we began discussing our plans for this year's Independent Developer Showcase, we knew that we wanted to focus on... Read more

    The 17 July 2018 by   Americanart
  • “There Was No Significant Association Between Saturated Fat and Cardiovascular...

    Does eating saturated fat increase the risk of heart disease? Or is something else the culprit? And which risk markers should we look at when investigating whic... Read more

    The 17 July 2018 by   Dietdoctor