blogger introduced the ‘Contact Form‘ widget/gadget and it got very popular to the blogger users.
Most Blogger user uses the ‘Contact Form’ gadget as it gives the blog a professional look without any expense of time, energy and money of yours.
Messages received by this form go directly to your inbox so that you can reply quickly and easily. This will be a long post containing all possible way of adding and customizing your blog’s contact form.
In this post we will look;
This can easily be achieved in a Blogger blog by following the instructions below:-
First, we have to create a static page:-
Many Blogger users comment outs the widgets.js as it makes the blog load faster. However, if you have removed the default widget JavaScript from blogger (widgets.js) then the ‘Contact Form‘ will not work. The widgets.js is required to run the default ‘Contact Form‘ gadgets.
After removing widget.js you will be able to add the ‘Contact Form‘ gadget on your blog but it will not function. You will not receive any messages via it as visitors will unable to send any message.
If you want to use the ‘Contact Form‘ gadget on every page of the blog then you cannot remove the widgets.js.
But if you show the contact form in a different and separate static page in your blog then you can remove widgets.js using conditional tags and a little clever thinking. If you are interest and/or facing any problem regarding this I suggest you read ‘Solution to Problems Created by Removing Default Widgets JavaScript(widgets.js) in Blogger’ section in one of my posts about widgets.js.
Except for the removal of widgets.js; the ‘Contact Form‘ gadget will work fine.
The clear button allows the user to start over in the case of any mistake. For adding a clear button to your existing contact form gadget;
Now; here are few examples of the contact form with CSS and HTML code. The implementation settings are given above for the whole blog or a static page.
CSS code
Most Blogger user uses the ‘Contact Form’ gadget as it gives the blog a professional look without any expense of time, energy and money of yours.
Messages received by this form go directly to your inbox so that you can reply quickly and easily. This will be a long post containing all possible way of adding and customizing your blog’s contact form.
In this post we will look;
- How to add the ‘contact form‘ gadget in blogger blog in a simple way.
- How to show the gadget in a particular page/static page/URL of the blogger blog.
- Customizing the style and layout of the gadget.
Add and Show Contact Form Gadget on Every Page of Blogger Blog
If the nature of your blog requires you to show the contact form in every page then follow the instructions below;.- Go to blogger dashboard of your blog > layout.
- Click ‘Add a Gadget’.
- A window will open titled ‘Add a Gadget‘.
- Go to More Gadget > Contact form.
- Edit the title if you require.
- Click Save.
- You may drag and move the ‘contact form‘ gadget in layout page of the blogger dashboard to a suitable position.
- Copy the CSS code and paste it before
</head>.Or; Copy the CSS code without the<style>and</style>and paste it before</b:skin>. - For the HTML part;
- Go to Go to Blogger dashboard > Template.
- Find
- It will look something like this.
- Replace it with the given HTML codes and save the template.
How to Properly Add Contact Form Gadget in a Static Page of Blogger Blog
Actually, this is how any website or blog uses the contact form. The contact-form is shown on a separate page which also contains some text about rules for contacting.This can easily be achieved in a Blogger blog by following the instructions below:-
First, we have to create a static page:-
- Go to Blogger dashboard > Pages.
- To create a page Click ‘New page‘ or click edit an existing one if you already have one for contact page).
- Click ‘HTML‘ tab in the post editor for HTML editing mode. Do not switch to Compose mode while adding or editing the contact form. If you want to add some texts do that before adding the codes for contact-form.
- Copy the CSS and HTML codes for the contact-form(given below the default one along with few customized).
- Edit the page settings on the right of the post editor.
- Click Save or Update.
- Before proceeding backup your template.
- If have already added a contact form then remove it from Blogger dashboard > layout > click the Contact Form gadget > on the opened window click remove.
- Go to Blogger dashboard > Template.
- Find
</body>and paste the following code.<b:if cond='data:blog.url == "http://www.techinfoknow.com/p/contact-us.html"'> <b:section class='contact' id='contact' showaddelement='yes'> <b:widget id='ContactForm1' locked='true' title='Contact Form' type='ContactForm'> <b:includable id='main'> <div class='contact-form-widget'/> </b:includable> </b:widget> </b:section> </b:if> - Replace
http://www.techinfoknow.com/p/contact-us.htmlwith your blog’s static page URL. - Click ‘Save template‘.
When the Contact Form Widget/Gadget Will Not Work
I should inform about the possible causes when the ‘Contact Form‘ widget/gadget will not work. Frankly, there is no problem as your ‘Contact Form‘ gadget will work fine almost all the time and in any customized template.Many Blogger users comment outs the widgets.js as it makes the blog load faster. However, if you have removed the default widget JavaScript from blogger (widgets.js) then the ‘Contact Form‘ will not work. The widgets.js is required to run the default ‘Contact Form‘ gadgets.
After removing widget.js you will be able to add the ‘Contact Form‘ gadget on your blog but it will not function. You will not receive any messages via it as visitors will unable to send any message.
If you want to use the ‘Contact Form‘ gadget on every page of the blog then you cannot remove the widgets.js.
But if you show the contact form in a different and separate static page in your blog then you can remove widgets.js using conditional tags and a little clever thinking. If you are interest and/or facing any problem regarding this I suggest you read ‘Solution to Problems Created by Removing Default Widgets JavaScript(widgets.js) in Blogger’ section in one of my posts about widgets.js.
Except for the removal of widgets.js; the ‘Contact Form‘ gadget will work fine.
Customized Styles of Blogger Contact Form Gadget
Add a Clear button in Contact form Widget/GadgetThe clear button allows the user to start over in the case of any mistake. For adding a clear button to your existing contact form gadget;
- Go to Blogger dashboard > Template.
- Find
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>in template editor of the blogger. - Inside it look for something like this
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>. - Just below it paste the following code
- Click ‘Save template’.
Now; here are few examples of the contact form with CSS and HTML code. The implementation settings are given above for the whole blog or a static page.
Default Contact Form Gadget
This is the default contact form gadget’s codes which have been slightly edited to add a clear button to it:-
<!-- Blogger default Contact form customized by techinfoknow.com -->
<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 button-color' type='reset' value='Clear' />
<p/>
<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>
Blogger Customized Contact form #1
Here is beautiful customized contact form which contains an additional clear button. See the screenshot below and the codes.
CSS code
<style>
.form, .contact-form-email-message, .contact-form-email, .contact-form-name {max-width: 500px;width: 100%;font-family: cambria;font-size: 13px;}
.contact-form-name {background:#FFF url(data:image/gif;base64,R0lGODlhEAAQAPeOAGG5/mK5/ql7Tqh7TerMq/fUr/3794pID4VMFfb4+/n6/fr7/UJQiB9MxB9JxSlIqriXfIdLEZlYEptYEpBLEHJEGauBW/bQp6vI/NTi9F+2/5ZPElSg/XNqf6qVhsbX9lhmn1Wj//Py9OS3im5AFe7Np3I/D5dLD4DB/2Gy/niu+OqzeJuw11us/1ml/s9+K9Gpf7igkJit1BxIvHLU//jMnF9/x6+80zVgv/z7+lOe/UpepHq3/650NKdtNJJQHGk/FoCp/p602oKPvJNTEWNjiLacjPbPpSRJsSZIrRxGvlqo/iZKru+8g4dLDytMrYc+DFCf//bQqO66gm3H/tbk9l6x/mO2/6SViK6BV/fo2Wi//mS5/pjR/+7Kpsp4K/v8/URUirzJ4f79+4JJGqTk/2PA/4S79WnJ/zhVqpSes6xwL3WDoGU+HOjPtPf4+857KMPW89F+Kk6X/vX19sh3LXVBEp9YEs+CNGtFIqJpLzFNp0ON/+7fzVmo/opKD1ei/u24flOc/l2s/urTunF8mYdKD6S53/HFl3qX0siccd+1iWC3/+W7jv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAI4ALAAAAAAQABAAAAjGAB0JHEiwoEEjPygcIOPB4MAYGyZIIGLIBBaHjk7c+eMkAgI7bTBCgTBCEYkKeYDkcKhHC6JGMBb1WTPGoQUvBC5IIVAii8MFbHzUKFDgSI9CbwoqEDIjg4ABAwTEUSIjAcFDDaqUoYHGjAYUHxywACNQTBgMXahs4WLFDwceQRjcEPhihRpGV1IMcqFjDp8hgeoIlDMFxJkWSwAJChFFxY4mXwQSglMEB4AAmAEAQNIBj5uBBugkSvOESZIHe2yIMICxtaOAADs=) no-repeat 5px 8px;border: 1px solid #ddd;box-sizing: border-box;color: #000;display: inline-block;height: 30px;margin: 0;margin-top: 5px;padding: 8px 5px 8px 25px;vertical-align: top;}
.contact-form-email {background: #FFF url(data:image/gif;base64,R0lGODlhEAAQAPeTAPn8//r8//n7/fX5/GB9qu3z+FCMyOrz/vf6/MDb/Ja14+fx/vn7/+Dq+ePs+eHt/eTv/tTm/U6JxPP2+1GLx97o9zxzvN3q/kWAw9jp/Zy/7VCMyfz9/16Kt+Ts9Ze24+zy+KnF6k+DxafF7FGFxcLa+KK/6fj6/VyIuvj7/T5ttdbn/fX5/6C/6dDh+Iqu4vH3++z0+IWq4kqExObu+T1wvt7s/VGMyLzQ7Pv8/9vq/drp/dnk8VyMydbk+c3g+Nvr/tLj+aC33FeJx2WQzO30/lGIwOzx93yd03CW0LnP7LfX/EyIxNjo/cbf/N/s/vb5/LLM8cTb+N7r/uXt+VuIttPl/fP3+1CNyN7p+ff5/KTD7L3V9O7z+Nfo/WOPzI2w42GPy57B8FmLyEN9wlB9xYeo3Exyr93n91aEtpi24/D1++71/vH1/E2IxOrv+Iup17PL6lSHxvb6/9/r/kiCw6vG7VCJxOPr84mq3EZ2wmaOzPf6/16Nytzq/Z2z1luGyc7a63KZ0b3T9Ja04z95v1OHw/v9/9zo+fL2+7PK69zr/tDh+fH3/rDK65W88LHN8cne9/T4+////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAJMALAAAAAAQABAAAAjTACcJHEiwoMGDBP/AEUTkS5g+PcYMkUNChCEUBIScaAOgI4AAIHMc4jDhTQckiQghYrPDj40HEBbMaSCDx40kAiApyNII5oIDfBy8eBTDwB4BVqIoaMDiQBEGVMCIWVLAACABXiLYyeOAQQAaZjQkSFC1jIAMjBSNUIOmwoctIUo4KYBFT4ogSlys4NLCxKAIkRxJAbGhxgAcPp7QmQJk0QUdTX7EwUPhTBcPa2BckTRgABQtCBAcCVSFgAoLhchgqDODiRsJEu4YSUMAoe3buG8HBAA7) no-repeat 5px 8px;border: 1px solid #ddd;box-sizing: border-box;color: #000;display: inline-block;height: 30px;margin: 0;margin-top:10px;padding: 8px 5px 8px 25px;vertical-align: top;}
.contact-form-email-message {background:#FFF url(data:image/gif;base64,R0lGODlhEAAQAOZ6APPWWvfjj/PUUPntt/TZYvjllf/9+v377/Xdd/XddvTZZPjnnf778PTbbf378OJ9Af79+vnprPrqreqYN+OBCPjNl/TRnvzz0fbGjPjpqPTbbPz22/fhhv/9+fzz0+aVNeunVfjjtPXIk/rSovCtXe2+YOu7Vu2jSuueQP7ftuWKGvfjkPDDg/nuuvDHcuuvWuuvR/TFjOinS/fKkvjnnPCyZfC5eeSFEfbfgPvxyPnmtuafMvS6duSNIfHRleieRvjllvXffvjoovPUUfLSSPntsv377v334fnqqvvuuvPWW/nts/fhh/vvvt95APnttPXChfvwwOGBCvbff+qjTfvwxPDGbuutVfG2bu28W+KMIOKMHvfhiOODEvTabPPSSeysXfDKeP788O6oU/vuu+OJGeu6TvLRQuiPI+7CfeutXvnoo/333eeaPv799/S/fv3csumrO+62cfnRnPrtsuurXemULOB9A/bMl//++v///wAAAAAAAAAAAAAAAAAAACH5BAEAAHoALAAAAAAQABAAAAepgHqCg4SFhoeGKSNzFTMYUG88WDUkhHB5mJgQBpgGY4R4HQwMYkYHBw4ObieEIkdIawtAK1w4CDkohDFsQgsFAUxTCA1VE4Q2GzS/HEEJDQpRdoRyFmEuViUJGgpKTWiEaiweF3RZXgQAQ0kqhGBXMBESJugCXwM3hHUhO3EZZgACiJx5QoEQCB0+ZLxIQ6bFgCVFHhCi8qPNhy1aepTpIuWOE0QgQx4KBAA7) no-repeat 5px 8px;padding: 8px 5px 8px 25px;border: 1px solid #ddd;box-sizing: border-box;color: #000;display: inline-block;font-family: cambria;margin: 0;margin-top:10px;vertical-align: top;height: 150px;border-radius:4px;}
.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {border: 1px solid #00C2FF;box-shadow: 0 1px 2px #1375A3;}
.contact-form-button {height: 28px;line-height: 28px;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;color:#fff;text-align: center;font: 14px/100% Cambria, sans-sarif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0, 0, 0, .3);-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);text-decoration: none;}
.contact-form-button:active {position: relative;top: 1px;}
.Tsg {float: right;text-align: right;font-size: 11px;margin: 0;padding: 0;color: #000;text-decoration: none;font-style: italic;display: none !important;visibility: none !important;}
.contact-form-button-submit, .button-color {margin-top:10px;border: solid 1px #0F9696;background-color: #07DBCA;background: linear-gradient( to top, #07DBCA, #0B8681 );}
.button-color:active, .button-color:hover {border: solid 1px #09A20F;background-color: #0B8681;background: linear-gradient( to bottom, #07DBCA, #0B8681 );}
#ContactForm1_contact-form-error-message {color: #fff;background-color: #F52121;background: linear-gradient( to top, #A2151B, #F52121 );text-align: center;}
#ContactForm1_contact-form-success-message {color: #fff;background-color: #06F00F;background: linear-gradient( to top, #06F00F, #278624 );text-align: center;}
</style>
HTML code<div class='form'>
<!-- Blogger Customized Contact form #1 by techinfoknow.com -->
<form name='contact-form'>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Full Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Full Name";}' onfocus='if (this.value == "Full Name") {this.value = "";}'
/>
<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 = "";}'
/>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' type='text' 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>
<input class='contact-form-button contact-form-button-submit button-color' type='reset' value='Clear' />
<input class='contact-form-button contact-form-button-submit button-color' id='ContactForm1_contact-form-submit' type='button' value='Send' />
<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>
<a class="Tsg" href="http://www.techinfoknow.com" target="_blank">blogger contact form by techinfoknow</a>
</form>
</div>
Hope all the information here has helped you. I will post more Customized forms so subscribe, bookmark and follow.
No comments:
Post a Comment