CSS 09: CONTACT FORM STAND-ALONE V1

Customize Contact Form for Blogger - This is simple customisation for blogger's default contact form. See the following tutorial to customs the default comment form to make stylish comment form.

CSS 09: CONTACT FORM STAND-ALONE V1

Follow step by step tutorials, this is using a default blogger contact form and can be putted on the webpage or article's post.

1. ADD WIDGET: Contact Form Widget

Add widget 'Contact Form' and then HIDE (Not deleted) that widget with editing some source code. Seek the way for yourself for hiding the widgets.

2. HTML

Input this code inside your HTML / Text Area.

<h2 style="text-align: center;">
<b><span style="font-family: Roboto, Verdana, sans-serif;"><span style="color: #f9cb9c;">CONTACT</span> <span style="color: #ea9999;">FORM</span></span></b></h2>

<form name="contact-form">
<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-user"></i> Full Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>

<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> Messages <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div style="max-width: 90%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

NOTE: You must choose only one between 'CSS FOR HTML' or 'CSS FOR EDIT HTML / EDIT BLOGGER TEMPLATE'.

3a. CSS FOR HTML

Input this code inside your HTML / Text Area after previous code (2. HTML).

<style scoped="" type="text/css">
#ContactForm1{display:none}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:300px;height:auto;margin:5px auto;padding:10px;background:#f2f2f2;border:1px solid #ccc;color:#777}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fffff7}#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px auto;padding:10px;background:#f2f2f2;border:1px solid #ccc;color:#777;font-family:Arial,sans-serif}#ContactForm1_contact-form-submit{width:101px;height:35px;float:left;color:#FFF;padding:0;margin:10px 0 3px 0 0;cursor:pointer;background:#5E768D;border:1px solid #556f8c;border-radius:3px}#ContactForm1_contact-form-submit:hover{background:#435c74}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:450px;margin-top:35px}
</style>

3b. CSS FOR EDIT HTML / EDIT BLOGGER TEMPLATE

If you want to save the style (CSS) inside your template, then simply put this code before </b:skin> or in CSS's styling area.

/* CSS Contact Form */ #ContactForm1{display:none}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:300px;height:auto;margin:5px auto;padding:10px;background:#f2f2f2;border:1px solid #ccc;color:#777}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fffff7}#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px auto;padding:10px;background:#f2f2f2;border:1px solid #ccc;color:#777;font-family:Arial,sans-serif}#ContactForm1_contact-form-submit{width:101px;height:35px;float:left;color:#FFF;padding:0;margin:10px 0 3px 0 0;cursor:pointer;background:#5E768D;border:1px solid #556f8c;border-radius:3px}#ContactForm1_contact-form-submit:hover{background:#435c74}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:450px;margin-top:35px}

Save and see the result.