Onenaija Blog

The People's Blog

  • Home
  • Blogging
    • Blogger
    • WordPress
    • Google Adsense
    • Video
  • Computer/Internet
    • Tips & Tricks
    • Mobile Tips/ Tricks
    • Pc Tips/ Tricks
  • Tech
    • Android
    • Facebook
    • Youtube
    • Reviews
  • Others
    • Making Money Online
    • Entertainment
    • Forum
  • About Me
    • Contact Me
  • Hire Me
  • Advertise With Us
  • Guest Post
Home » Blogging » Blogger » Stylish Contact Form For Blogger Part 2

Stylish Contact Form For Blogger Part 2

March 20, 2017 By: babanature4 Comments

Facebook
Twitter
Pinterest
Linkedin
Bufferapp

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

Stylish Contact Form

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 Stylish 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

Steps

  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;/style&amp;amp;amp;gt;
 
 &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="https://3.bp.blogspot.com/-TgreeOjV9hc/WC8lF19LbaI/AAAAAAAABq4/E5U-ahjjFcYBpgZd49O1BwTLelkqVGhgQCLcB/s1600/avatar%25281%2529.png" 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="https://4.bp.blogspot.com/-AuOlsNet-oA/WC8lCTFCY_I/AAAAAAAABq0/7eKfEB9TINkHQ_-ug5oqM7LTl9YBXjevQCLcB/s1600/envelope%25281%2529.png" 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 onenaijablog.com 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.

 

Save

Don't Miss Any Post Again. Subscribe To Our Feed And Be Updated

Enter your email address below:

 

Powered by OnenaijaBlog

Facebook
Twitter
Pinterest
Linkedin
Bufferapp

About babanature

I am a researcher and internet consultant. I love designing web sites, building blogs, doing tutorials, playing with codes, watching cartoons, writing articles, blogging, singing and lots more...
You can always hook me up on Facebook, twitter, YouTube and Google+

Comments

  1. RajKumar Jonnala says

    March 22, 2017 at 7:51 pm

    Hello,

    Well I’m a big fan of blogger widgets since almost all of them are free and easy to use. I mean we can easily add them to our blogs. Will surely check this widget now.

    Thanks
    RajKumar Jonnala recently posted…How to Remove Shaded SkyDrive Pro from Your Right-Click Context MenuMy Profile

    Reply
    • babanature says

      April 3, 2017 at 10:15 pm

      Hello Jonnala,

      You’re right about that, the blogger widgets are mostly free… you could get the widget you’re looking for online for free… that’s one reason to love the blogger platform 😉

      Thanks for your comment.. do have a beautiful week ahead…
      babanature recently posted…How To Use VLC Player As Audio And Video ConverterMy Profile

      Reply
  2. Bello says

    March 24, 2017 at 6:59 pm

    This contact form looks stylish as well and has more swag to the previous one you published…

    Thanks for the code sir, your post are awesome.

    Have a good weekend start…

    Reply
    • babanature says

      April 3, 2017 at 10:17 pm

      Hello Bello,

      I just wanted to bring more options for bloggers to chose a good stylish contact form for their blogs.

      Thanks bro… have a good day
      babanature recently posted…How To Add Google Adsense Matched Content To Your BlogMy Profile

      Reply

Leave a Reply Cancel reply

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

CommentLuv badgeShow more posts

Search The Blog

DO YOU WANT TO PROMOTE YOUR PRODUCT?

Do you have a product that you would like us to review here at onenaijablog? If you already have a post written for your product, would you like us to publish it to our unique blog readers? Then take the advantage of our low cost plan by . Contacting Us Today

Recent Reviews

  • InnJoo Halo
  • Infinix Hot 2 (X510)
  • InnJoo Fire

RSS Contents From Babanature Blog

  • Don't download latest Windows 10 update if you own one of these popular laptops
  • The new Android 11 features that will actually change your phone
  • The new PlayStation 5 looks like a giant broadband router
  • 5 secure smartphone settings that’ll protect you from hackers
  • Facebook's new tool reveals if you're being scammed

FOLLOW ONENAIJA BLOG

Icon IconIcon Follow Me on Pinterest

Translate to Your Language

Friend Us On Facebook

Copyright © 2021 · Proudly Onenaijablog Re-Touched By, Babanature | Google+