Blogger just recently launched their contact form by which you can easily contact and send your questions and queries to the admin OR author of the blog / site and this very helpful for admins be'coz many professional bloggers had to purchase the hosting and then they created their own contact form by using PHP languages OR many of us use free third party contact form where we have create account and also had to spend long time to create them but after all you couldn't get any professional look but in today's tutorial you will easily design your contact form in just 5 min with free cost and it will for life long. .PNG)
Live Demo
Add Contact Form On Blogger
- Login to Blogger > Dashborad
- Click on Drop Down Menu and select Layout
- Add Gadget
- Click on More Gadget
- Select Contact Form
- Now Give a Name to your Contact Form as we recommend you should give Contact Form
- Now save it.
Customize Contact Form
- login to Blogger > Dashborad
- Click on Drop Down Menu and select Template
- Backup your Template before making any changes to your blog
- Now Search for </head>
- Paste below code just before </head>
<style>/*---- Compatible contact Form by TTH -----*/.contact-form-name, .contact-form-email, .contact-form-email-message { max-width: 220px; width: 100%; font-weight:bold; } .contact-form-name { background:#FFF url(http://2.bp.blogspot.com/bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 8px; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family:Arial,sans-serif; font-size: 12px; font-weight:bold; height: 24px; margin: 0; margin-top:5px; padding: 5px 15px 5px 28px; vertical-align: top;} .contact-form-email { background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 10px; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family: Arial,sans-serif; font-size: 12px; font-weight:bold; height: 24px; margin: 0; margin-top: 5px; padding: 5px 15px 5px 28px; vertical-align: top;}.contact-form-email:hover, .contact-form-name:hover{ border: 1px solid #bebebe; box-shadow: 0 1px 2px rgba(5, 95, 255, .1);padding: 5px 15px 5px 28px;}.contact-form-email-message:hover { border: 1px solid #bebebe; box-shadow: 0 1px 2px rgba(5, 95, 255, .1); padding: 10px; }.contact-form-email-message { background: #FFF; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family: arial; font-size: 12px; margin: 0; margin-top: 5px; padding: 10px; vertical-align: top; max-width: 350px!important; height: 150px; border-radius:4px; }.contact-form-button { cursor:pointer; height: 32px; line-height: 28px; font-weight:bold; border:none; }.contact-form-button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .contact-form-button:hover { text-decoration: none; } .contact-form-button:active { position: relative; top: 1px; }.TTH-btnLogin{-moz-border-radius:2px; -webkit-border-radius:2px;border-radius:15px;background:#a1d8f0;background:-moz-linear-gradient(top, #badff3, #7acbed);background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";border:1px solid #7db0cc !important;cursor:pointer; padding:11px 16px;font:bold 11px/14px Verdana, Tahomma, Geneva;text-shadow:rgba(0,0,0,0.2) 0 1px 0px; color:#fff;-moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; margin-center:12px; float:center; padding:7px 21px;}.TTH-btnLogin:hover,.btnLogin:focus,.btnLogin:active{background:#a1d8f0;background:-moz-linear-gradient(top, #7acbed, #badff3);background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";}.TTH-btnLogin:active{ text-shadow:rgba(0,0,0,0.3) 0 -1px 0px; }</style><!--[if IE 9]> <style> .contact-form-name { background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 0px; }.contact-form-email { background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 6px; }</style> <![endif]--> <style> @media screen and (-webkit-min-device-pixel-ratio:0) {.contact-form-name { background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 6px; padding: 15px 15px 15px 28px;}.contact-form-email { background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 8px; padding: 15px 15px 15px 28px;}.contact-form-email:hover, .contact-form-name:hover{ padding: 15px 15px 15px 28px; }.contact-form-button { height: 28px;}}</style>
- Now Save it
Add Contact Form On static Page
- Login to Blogger > Dashborad
- Click on Drop Down Menu and select Pages
- Click on New Page
- Select Blank Page
- Now Click on HTML an Paste below code in it.
<div class='form'>
<!-- Custom Contact Form By TTH Starts -->
<form name='contact-form'>
<!-- Name Field -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' />
<p></p>
<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/>
<p></p>
<!-- Message Field -->
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Leave Your Message..' onblur='if (this.value == "") {this.value = "Leave Your Message..";}' onfocus='if (this.value == "Leave Your Message..") {this.value = "";}'></textarea>
<p></p>
<!-- Clear Button -->
<input class='TTH-btnLogin' type='reset' value='Clear'/>
<!-- Send Button -->
<input class='TTH-btnLogin' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>
<!-- Validation -->
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
<!-- Custom Contact Form By TTH Ends -->
</div>
- Now publish that page.
Hide Contact Form From Sidebar
- Now here comes the part how to hide that contact form from sidebar or layout widget. Login to Blogger > Dashborad Click on Drop Down Menu and select Template Backup your Template before making any changes to your blog. Now search for the id "ContactForm". expand the widget by clicking on the black arrow on the left (same with the includable) and then delete the part that we have coloured in red (see below):
- Part to be removed:
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
- Next search for </head> and above it paste the below code
<style> #ContactForm1{ display:none!important;} </style>
- Now save the template.
So here you get your newly made customized contact form widget provided by blogger.Take a look on your widget and share your view about this with us.
|
|
Articles You May Like |
About The Author
This does make contacting you easier for your readers.
ReplyDeleteyes absolutely :)
DeleteContact forms are very essential to any blog or website. Thanks for sharing! :)
ReplyDeleteThanks for sharing your view Czjai :)
DeleteHonestly, I don't like to use Google Contact Form because it has no ANTI-SPAM PROTECTOR. That is why I have a post about this http://www.palraine.com/2013/05/a-free-contact-form-for-blogger-with.html
ReplyDeleteYes that is one of the biggest drawback of this contact form.hope blogger will introduce that feature soon.
DeleteThis is very useful :) Contact forms are a great way to reach a blogger :)
ReplyDeleteAwesome Share Debarpan Brother :)
ReplyDeleteWill Must Add This Contact Form in My Blog!
Thanks (y)
it is an awesome form...
ReplyDeleteI have tried it on my blog..
u can see it here
http://www.totalmedianews.com
just checked your blog,it's working nice there.thanks for giving this a try. :)
DeleteThanks Dbarpan Works great! This is the first blog I have ever subscribed by email to :P
ReplyDeleteCheck out my blogs zetasilon.blogspot.com
wemakeblogs.blogspot.com
Thanks buddy for giving us such priority :) Checked you blog.
DeleteNice information
ReplyDeleteWeb Designer in Bangalore
Thanks! This was a great help!
ReplyDeleteI've done all the steps and the contact form link shows beautifully. My problem is that the 'submit' button doesn't work. The message is not sent. So, i am not sure what am I missing? Can anyone help me?! I feel there is a missing link between the contact form and where I want the messages to be sent to.
ReplyDeletePlease give us your blog url,so that we can check this out. :)
DeleteHello Debarpan, thank you for your quick response. My url is www.gr8tdesigns.com . Any help will be much appreciated. :)
ReplyDeleteThe problem is you are using blogger dynamic view template,revert it to simple and then try this out.Hope now it'll work fine with you. :)
DeleteHi Debarpan, Thanks for the advice. I didn't realize that Dynamic Views template was the underlying problem of many changes I tried to apply and never worked! What a shame...thanks a lot.
DeleteWe are not receiving any emails, then where the emails are going to ?
ReplyDeleteI guess you have done something wrong while inserting the code just remove it all and reinsert. :)
Deletenice trick......how to add custom domain email address in contact form to receive the email
ReplyDeleteWe'll discuss about it in our coming tutorials,so stay connected :)
Deletehey i cant found the contact for in "more widgets"
ReplyDeleteplease help me
thanks
It's just at the top,check it out more carefully.
DeleteCan we Add another Field? like Phone number?
ReplyDeleteStill now there is no such options buddy. :(
DeleteVery well explained! Thanks :)
ReplyDeleteThank for help Debarpan. I implemented it successfully.
ReplyDeletethis is very useful information i will add on this my blog page thankyou very much my blog url www.hdforwall.blogospot.com
ReplyDeleteHey. I tried this, its working. But it leaves a blank rectangle behind. In LAYOUT, I placed the CONTACT FORM gadget below POPULAR POSTS. I followed all above steps. Saved the work after deleting the code from HTML Template. When I viewed blog, I could see a small rectangle placed right below POPULAR POSTS. It has no heading or any content. Do you know what must be the problem?
ReplyDeleteYour blog URL please.
DeleteSorry, was a bit busy. Here's the URL http://ecomaffiliates.blogspot.in/p/contact-us_7.html
ReplyDeleteI placed CONTACT FORM widget below POPULAR POSTS in LAYOUT.
Check the right side of the blog. A small empty box.
Checked your blog,it's happening due to your template.You can also see the same error occuring in your blog in case of popular post widget and navbar widget as well.First fix that error then try.
DeleteThanks for shareingTunesbd44
ReplyDeleteHi installed the contact form on my page but how can i retrieve the messages sent to me
ReplyDeleteoops sorry dont worry it was going in spam mails should have checked it is there way that my contact from mails dont to my spam folders ...
ReplyDeleteYou need to change your mail settings buddy :)
Deletevery nice thanks a lot for sharing
ReplyDeletehow can I change the color of the form and the direction of the text right to left?
To change the background colour of contact form,search for '#ffffff' and change it to your desired colour and for text search for 'text-align:centre' code and change centre as per your desire.
DeleteHi.. Thanks for this great tutorial.
ReplyDeleteI have installed it also on my blog. Here it is, take a look.
http://vehicleinfomagazine.blogspot.com/p/contact-us.html
btw, can you do something about the "Send Thing"? I think it would be great if after pressing the "Send Button" there will be a message saying the something like "Message Sent" and the text boxes would be automatically cleared.
And there is a problem, I don't receive the messages. I tried it a lot of times.
Thanks again..
You just need to check the spam folder of your mail id for those messages.
Deletethanks a lot .. its helpful.. :)
ReplyDeletethank you bro it is done ! bundle of thanks...
ReplyDeletehttp://i-rashid.blogspot.com/
Great method! Thanks for posting.
ReplyDeleteIss work good but
ReplyDeleteafter 1day give me error
Message could not be sent. Please try again later. ?
Just reinstall the contact form widget.
Deletei installed the contact form on my blog and check it but i can't retrieve any messages
ReplyDeleteYou need to check the spam folder of your mail inbox.
DeleteI am a beginner for the blog spot. And your tutorials helping me lot... You are doing great job.... And Contact Form is perfectly working.......
ReplyDelete