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 :

  • Vegetarian Meatballs with Fried Napa Cabbage

    How to make meatless 'meatballs' that actually taste fantastic and satisfy both vegetarians and meat lovers? We'll let you in on a secret... or actually two:... Read more

    8 hours, 43 minutes ago by   Dietdoctor
  • What I Wore: Cropped Wide-Leg Jeans

    What Wore: Cropped Wide-Leg Jeans

    Just call me a hypocrite, or maybe a convert. Just a few short months ago I told a reader to get rid of a pair of high-waisted cropped wide-leg jeans and now... Read more

    8 hours, 52 minutes ago by   Wardrobeoxygen
  • Supporting Someone with Dementia

    Dementia can be a sad, stressful disease for the victim, but also for their family, friends, and carers. A diagnosis of dementia is not the end of the world... Read more

    9 hours, 4 minutes ago by   Steve Bradley
  • Oh Pep! – ‘Your Nail and Hammer’

    Pep! ‘Your Nail Hammer’

    Australian duo Oh Pep! have released ‘Your Nail and Hammer’, the third single from their upcoming second album. The short and sweet song finds the band... Read more

    9 hours, 21 minutes ago by   Spectralnights
  • Kaduna State University Postgraduate Admission List – 2018/2019

    KASU Postgraduate Admission List for the 2018/2019 academic session has been released. Candidates who applied for admission into the Postgraduate programmes of... Read more

    9 hours, 45 minutes ago by   Naijapary
  • The Trouble with Mary Pinnock

    Trouble with Mary Pinnock

    You know me, I can never leave anything alone. I am always up for a challenge and possibly the worst thing anyone can say to me is 'you probably won't find... Read more

    9 hours, 47 minutes ago by   Kirsty Stonell Walker
  • MAUTECH Yola Admission List – 2018/2019 Out

    MAUTECH 1st batch admission list for the 2018/2019 academic session has been released. Candidates who appkied for admission in the university are by this... Read more

    9 hours, 50 minutes ago by   Naijapary