Blogger Default Customized Contact Form for Footer

Blogger Default Customized Contact Form for Footer

2
data:blog.title
customize the contact form

Blogger Default contact form has gained special attention among Blog users. Almost all Blogger is now using this default contact form. Thought the default thing is might dull looking, however we can customize it by using CSS coding. There are many tricks to place the Blogger default contact form in static pages. But if you wish to use Blogger Default Customized Contact Form in your Blog footer section then it attracts your communicator to communicate with you. However we will simply customize the Blogger default contact form for our Blog footer. Just go through the below steps-

Adding Default Contact Form

This time I will add Blogger default contact for thus I can modify it later by using CSS code.


Step 1 Go to Blogger Dashboard and Select Layout

contact form widget

Step 2 From Layout Click Add a gadget and from popup window select More Gadgets tab in left side.

configure contact form


Step 3 Now click Contact Form and Save it. Now the default contact form will be look like below.

default contact form

Customizing the Default Contact Form

After adding Blogger Default Contact Form now we will add simple CSS code for spice up it. Just go through the below steps-

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

Step 2 Now click on -> Template -> Edit HTML-> Proceed

Step 3 Locate the]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 Paste the below code Before/above ]]></b:skin>

 /* Contact Form by www.bloggerspice.com */
#ContactForm1 {color:#eee}
#ContactForm1 .contact-form-widget input{display:inline-block;width:100%;border:0;padding:5px 0;margin-top:3px}
#ContactForm1 #ContactForm1_contact-form-email-message{width:100%;border:0;padding:5px;margin-top:3px}
#ContactForm1 #ContactForm1_contact-form-submit{background:#289FF2;color:#fff;padding:8px;font-size:90%;letter-spacing:1px;border-radius:3px;cursor:pointer;transition:all .3s}
#ContactForm1 #ContactForm1_contact-form-submit:hover{background:#0A92F1;color:#fff}
#ContactForm1 p#ContactForm1_contact-form-error-message,#ContactForm1 p#ContactForm1_contact-form-success-message {text-align:center;width:100%;display:block;color:#fff;}

Customization

  • For changing the Send Button color please alter the color code background:#289FF2;
  • And for changing the Button hover color please alter the color code background:#0A92F1;
  • For using different font color please alter color:#fff code.

Step 5 Now click Save template button. After applying the code the contact form will be look like below. 


custom contact form


You will see the new look of your Default Blogger Contact form. I hope you would like it. Remember that this widget has customized for Blogger footer section. Generally most of the footer section containing dark color so I have use light widget color. However if your Blogger template footer is white color then the widget won’t be visible properly. For more customization feel free to leave a message below. 
Blogger Default Customized Contact Form for Footer
4 Stars stars - "Blogger Default Customized Contact Form for Footer " Blogger Default contact form has gained special attention among Blog users. Almost all Blogger...

Post a Comment

ভাই blogger lab থিমটাতে contact us গ্যাজেটটা শো করছে না কেন?

Hi Shofiul,
Please first template ta Edit koren, tarpor nicer code ta search koron.

#navbar-iframe,.ContactForm,.comment-content a {display:none !important;}

uporer code theke nicer line ta comma soho remove koren. tarpor save template click koren. ekhon contact us Gadget show korbe. :up

.ContactForm,

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *