How to Customize Contact From Widget In Blogger

Previously we have shared a tutorial about 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. 

Also Check :- How to add Whatsapp sharing button 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.

/* ######## 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, This is the Part -II of the Tutorial, in next part we will teach you, how can you add the contact widget in static pages or posts, to create a separate contact page like wp blogs. Hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us. Vaarwel !! (Goodbye in Dutch!! hahaha).