Home
Blogger

How to change Blogger Official Contact Form With CSS coding

How to change Blogger Official Contact Form With CSS coding
1 min read
contact form

We have already discuss about blogger’s official contact form but it is very simple which is not eye-catching to your visitors. So I have tried to add some spice thus you can make it more attractive. If you want to change any default widget you must use CSS coding so I have used some CSS trick to change the looks better. This is the part 1 of the tutorial and in my next tutorial I will discuss how you can transfer in Blogger pages.

How To add Blogger default Contact Form?

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "More Gadgets" .

Step 4 Now Select the "Contact Form" Gadget.


widget

Final Output of the Contact form will be like below-- 
blogger widget

How To Customize the Default Contact Form?


Step 1 Log in to your blogger account and Click on Template  ->

Step 2 Now click on Edit HTML-> Unfold code  ►

Step 3 Now find ]]></b:skin> by Pressing  Ctrl + F

Step 4 And Paste the below code above ]]></b:skin> and save your template

/*Contact Form With CSS by www.bloggerspice.com*/
.contact-form-widget {
width: 280px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #04BDFA;
color: #000;
}
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-button-submit {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-button-submit {
border-color: #004065;
background: #005C91;
color: #fefefe;
}

Click To Tweet

  • Customized Contact Form would be like below image


CSS

If you have any query just feel free to contact with me. 

Post a Comment