in Blogger

How to Add and Customize Contact Form in Blogger Blog

Last year 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 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 in 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;.

  1. Go to blogger dashboard of your blog > layout.
  2. Click ‘Add a Gadget’.
  3. A window will open titled ‘Add a Gadget‘.
  4. Go to More Gadget > Contact form.
  5. Edit the title if you require.
  6. Click Save.
  7. You may drag and move the ‘contact form‘ gadget in layout page of the blogger dashboard to a suitable position.

By doing this, the gadget will be loaded in every page. If CSS codes available; it will adapt to the existing style of your blog. If you want to use any of the customized styles given below for show gadget in every page of the blog then:-

  • Copy the CSS code and paste it before </head>. Or; Copy the CSS code without the <style> and </style> and paste 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 template.

But it is not wise to show contact-form is every page of any website or blog as it will attract spammers.

How to Properly Add Contact Form Gadget in a Static Page of Blogger Blog

Actually this is how the any website or blog uses the contact form. The contact-form is show in 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:-

  1. Go to Blogger dashboard > Pages.
  2. To create a page Click ‘New page‘ or click edit an existing one if you already have one for contact page).
  3. 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.
  4. Copy the CSS and HTML codes for the contact-form(given below the default one along with few customized).
  5. Edit the page settings on the right of the post editor.
  6. Click Save or Update.

Then edit the Blogger template:-

  1. Before proceeding backup your template.
  2. If have already added a contact form then remove it by Blogger dashboard > layout > click the Contact Form gadget > on the opened window click remove.
  3. Go to Blogger dashboard > Template.
  4. Find </body> and paste the following code.
    <b:if cond='data:blog.url == &quot;;'>
    <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'/>
  5. Replace with your blog’s static page URL.
  6. Click ‘Save template‘.

Thats it you have done it. Go to your created contact page and try it out.

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 requires to run the default ‘Contact Form‘ gadgets.

After removing widget.js you will be able to add the ‘Contact Form‘ gadget in 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 in 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 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/Gadget

Clear button allows the user to start over in case of any mistake. For adding a clear button to your existing contact form gadget;

  1. Go to Blogger dashboard > Template.
  2. Find <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'> in template editor of the blogger.
  3. Inside it look for something like this <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>.
  4. Just below it paste the following code
  5. Click ‘Save template’.

All the customized gadgets below are equipped with one.

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

How to Add and Customize Contact Form in Blogger Blog

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 -->
<div class='contact-form-widget'>
    <div class='form'>
        <form name='contact-form'>
            <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value='' />
            <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>

            <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value='' />
            <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>

            <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5' />
            <input class='contact-form-button contact-form-button-submit button-color' type='reset' value='Clear' />
            <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button' />
            <div style='text-align: center; max-width: 222px; width: 100%'>
                <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;' />
                <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;' />

Blogger Customized Contact form #1

How to Add and Customize Contact Form in Blogger Blog

Here is beautiful customized contact form which contains an additional clear button. See the screenshot below and the codes.

CSS code

.form, .contact-form-email-message, .contact-form-email, .contact-form-name {max-width: 500px;width: 100%;font-family: cambria;font-size: 13px;}
.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;}

HTML code

<div class='form'>
    <!-- Blogger Customized Contact form #1 by -->
    <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 == &quot;&quot;) {this.value = &quot;Full Name&quot;;}' onfocus='if (this.value == &quot;Full Name&quot;) {this.value = &quot;&quot;;}'
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'
        <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 == &quot;&quot;) {this.value = &quot;Leave Your Message...&quot;;}' onfocus='if (this.value == &quot;Leave Your Message...&quot;) {this.value = &quot;&quot;;}'></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="" target="_blank">blogger contact form by techinfoknow</a>

Hope all the information here has helped you. I will post more Customized forms so subscribe, bookmark and follow.

Related Posts