Customize Blogger Contact Form

Customize blogger contact form, ie. change the default form to fully responsive contact form by using bootstrap. This tutorial helps you to customize all the elements in the contact form, such as input box, textarea, buttons, error and success messages.

Most of the tutorials doesn't touch the error and success message styling. But we will explain how to change the default style of  the error and success messages.

Our contact form was created by using this method. Take a look at the following link

Demo

1: Include the bootstrap CDN

Go to Theme -> Edit Html -> paste the following code just before the </head> tag.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

2: Add the default contact form through the Gadget.

3: Hide the default contact form

Go to Theme -> Edit Html -> paste the following code just before the ]]></b:skin> tag.

div#ContactForm1
{
     display:none;
}

4: Create a new page

Go to Pages -> New Page

Type the title like "Contact"

copy paste the follwing code to the new page

<div class="ContactForm"><br><div style='text-align: center; width: 100%' class="ContactFormMessages"><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 name='contact-form' class="form-horizontal"><div class="form-group"><label class="control-label col-sm-3">Name:</label><div class="col-sm-7"><input type="text" class="form-control" id='ContactForm1_contact-form-name' placeholder="Enter name..." name="name"></div></div><div class="form-group"><label class="control-label col-sm-3" for="email">Email Address:</label><div class="col-sm-7"><input type="email" class="form-control" id='ContactForm1_contact-form-email' placeholder="Enter email address..." name="email"></div></div><div class="form-group"><label class="control-label col-sm-3" for="email">Message:</label><div class="col-sm-7"><textarea class="form-control" id='ContactForm1_contact-form-email-message' rows="5" name='email-message' placeholder="Enter message..."></textarea></div></div><div class="form-group"><div class="col-sm-offset-3 col-sm-7"><button type="button" class="contact-form-button contact-form-button-submit" id='ContactForm1_contact-form-submit'>Send</button><button type='reset' class="contact-form-button contact-form-button-submit">Clear</button></div></div></form></div>

5: Add styling to the contact form

Go to Theme -> Edit Html -> paste the following code just before the ]]></b:skin> tag.

.ContactForm .contact-form-button.contact-form-button-submit { margin:0px; padding: 3px 15px 3px 15px; height:auto; } .ContactForm .ContactFormMessages p { font-size:14px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; box-shadow:none; } .ContactForm .ContactFormMessages p.contact-form-success-message-with-border { color:#005200; border:1px solid #81e181; background-color: #e2f4c6; padding:10px; } .ContactForm .ContactFormMessages p.contact-form-error-message-with-border { color: #dd0000; border:1px solid #e8b7b7; background-color: #fff1f1; padding:10px; } div#ContactForm1 { display:none; } .FollowByEmail .follow-by-email-inner .follow-by-email-address { height:30px; }

Done!