Now you do not need to further search for paid / free contact form generators / builders because recently first time Blogger introduced their own Contact Us widget. In its features it is absolutely free, easy to install in blog, etc. But as I mentioned in my previous post (How to Insert Simple Contact Form Widget in Blogger) that the form still need some improvements for example; Captcha to prevent blog for spam, some more fields like for Subject, Category, etc., attachment options, customization, etc.
Well In this post we are going to share html / css code for Contact form widget in which you can do customization by changing colors, backgrounds, text, etc. For Demo Look at our blog footer.
Recommended: 30 Ways To Make Money Online
Steps:
Go to blogger blog > Layout > Add a Gadget > HTML / JavaScript and paste the following code:
<style>
#ContactForm1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5urzDuon8sfzZL6P1zZaK2bMngq5Gm_tomRpEc0YwlvNsTPfig26tvkFDablkwdlnKnMFkFsqMECD6kPcGd7GH9soNosmbakRgSL2T8iMsWYFRuer0F9KeOuqMXDrOXMiMKanZPQaACg/s1600/pbt-block-quote.jpg);
margin: 0 2px;
padding: 0px 0px 5px 20px;
}
.contact-form-button-submit:hover {
background: #ff9900;
border: #ff9900;
}
.contact-form-button-submit {
background: #000000;
border: #000000;
}
</style>
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget" >
<div class="form">
<!-- Custom Contact Form by probloggerstricks.com -->
<form name="contact-form">
<div style="text-align: center;">
</div>
<div style="text-align: center;">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="80%" type="text" value="Your Name" onblur='if (this.value == "") {this.value = "Your Name";}' onfocus='if (this.value == "Your Name") {this.value = "";}' />
</div>
<div style="text-align: center;">
<input class="contact-form-email" id="ContactForm1_contact-form-email" value="Your Email ID" name="email" size="80" type="text" onblur='if (this.value == "") {this.value = "Your Email ID";}' onfocus='if (this.value == "Your Email ID") {this.value = "";}' />
</div>
<div style="text-align: center;">
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" type="text" rows="5" value="Message Please..." onblur='if (this.value == "") {this.value = "Message Please...";}' onfocus='if (this.value == "Message Please...") {this.value = "";}'></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
</div>
<div style="max-width: 100%; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
<div class="clear">
</div></div>
For modifications replace Replace image url to use different image as background. Edit color codes to change send button colors. Do change text with desired ones.
The modification steps are quite simple and basic and, I hope now you can easily make a contact form with template match.
No comments:
Post a Comment