How to change Blogger Official Contact Form With CSS coding

How to change Blogger Official Contact Form With CSS coding
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;
}
  • Customized Contact Form would be like below image


CSS

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

You may like these posts

  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up