How to Customize Contact From Widget In Blogger

Step 1: 

Before following the below tutorial we recommend you to install the contact form widget in your blog, it is a very easy process and can be done in minutes, with a simple click. We have published a tutorial earlier, so you won't face any difficulties. Or you need to add a contact form on your blog. 

Step 2:
The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.

/* ######## Contact Form Widget By Sorabloggingtips.com ######################### */ .contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-widget { max-width: none; } .contact-form-name, .contact-form-email, .contact-form-email-message { background-color: #EBEBEB; border: 1px solid #ccc; } .contact-form-widget .form { } .contact-form-button-submit { max-width: none; width: 100%; height: 35px; border:0; background-image: none; background-color: #00c8d7 !important; cursor: pointer; font-style: normal; font-weight: 400; } .contact-form-name:focus, .contact-form-email:focus, .contact-form-email-message:focus { border: 0; box-shadow: none; } .contact-form-name:hover, .contact-form-email:hover, .contact-form-email-message:hover { border: 0; } .contact-form-button-submit:hover { background-color: #303030; background-image: none; border: 0; }

Now save your template and check the contact us form