HOT!Buy Ready-Made Authority WebsitesClick Here

Making Blogger Professional, Important Updates !!

Hello SoraBloggingTips Readers, If you are reading this, then we would like to appreciate your efforts for being supportive. We know its har...

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).
How to Customize Contact From Widget In Blogger How to Customize Contact From Widget In Blogger Reviewed by TemplatesYard on May 30, 2018 Rating: 5

11 comments:

  1. Is it possible to change the color of the "send" button? And if so, how?

    ReplyDelete
    Replies
    1. .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;
      }

      Change the color code.
      You can pick color from here.
      https://www.sorabloggingtips.com/p/color-picker.html

      Delete
  2. how to make 'tittle' in contact form ??

    ReplyDelete
  3. Hi, I need to update my sora-contact-widget to submit to a new email address. How do I update the "email send to" data?

    ReplyDelete
    Replies
    1. I think you saying to change the old email contact form to new one.

      Delete

Note : -We have stopped giving support to free version users, please read this article Making Blogger Professional, Important Updates !!. If You Are Facing Any Problem While Setting Up The Free Theme, Then We Recommend You To Read Our FAQ(Frequently Asked Question) Page.