Stylish Contact Form For Blogger Part 2

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.

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

<style type="text/css">
 .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}
 </style>
 
 <div class="widget ContactForm" id="ContactForm1"><div class="contact-form-widget"><h2 class="contact-title">Get in touch.</h2><div class="form"><form name="contact-form"><div class="contactf-name"><div class="name-icon"><img src="https://3.bp.blogspot.com/-TgreeOjV9hc/WC8lF19LbaI/AAAAAAAABq4/E5U-ahjjFcYBpgZd49O1BwTLelkqVGhgQCLcB/s1600/avatar%25281%2529.png" width="16" height="16" /></div><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"><div class="email-icon"><img src="https://4.bp.blogspot.com/-AuOlsNet-oA/WC8lCTFCY_I/AAAAAAAABq0/7eKfEB9TINkHQ_-ug5oqM7LTl9YBXjevQCLcB/s1600/envelope%25281%2529.png" width="16" height="16" /></div><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" /><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>

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