Happy Eid-ul-Adha 2025: Eid Mubarak Wishes, Quotes, Images, and Celebrations

How to Customize Contact From Widget In Blogger in 2019

How To Add Contact Form Widget In Blogger And Blogspot Blogs. Now in this article we are going to understand How to Customize Contact From Widget In Blogger. Basically this is the second part of that article. Most of the blogger who are using blogspot platform doesn't use official contact form widget due to its looks, It doesn't looks professional and attractive, also it doesn't match with custom blogger template designs. So, Lets move further and see How to Customize Contact From Widget In Blogger.

First Step
Before following the below tutorial we recommend you to install the contact form widget in your blog, it is very easy process and can be done in minutes, with simple click. We have published a tutorial earlier, so you won't face any difficulties. Please follow How To Add Contact Form Widget In Blogger And Blogspot Blogs.

Customizing Process ( Adding CSS )
Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

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.


<form> <textarea rows="5" cols="40" onClick=select() readonly>/* ######## 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; }.

Conclusion
Congrats !! You have made it. now you have learned that How to Customize Contact From Widget In Blogger Visit your blog and check the awesome widget live in action,