Contact Form is an essential factor for each and every website, in order to contact a blogger via with his/her visitors about the queries and suggestion, more than dropping in a posts as comments.Contact Form is eternally important for a publisher.
In Blogger Blog we have already available a Installed Plugin Inside the Layout Boxes.In fact, it's not reliable in perfect looking inside the web,Hence our viewers will not able to identify where it's been installed.Moreover type of format is not up to the mark for an informer.
So most of you are concerned with recent gadgets.Here I'm installing a neat described format for you,that can be easily applied over blog blog.More over it can be set at the navigation bar or footer bars.Hence a visitor can easily navigate for contact.
How to Install Contact Form Into Blogger Blog.
Step-1:
Go to Dashboard>Layout>Add a Gadget > More Gadget> Ok.
Step-2:
Go to Blogger>Template>Edit HTML
Search For </head>
Just above this paste the below code.
<style>#ContactForm1{ display:none!important;} </style>
If you installed already contact form on using from above discussed,It will gets disabled and below code will tends to display the proper code for instead of it.
To install Contact Form Successfully.
Step-3:
Go to Dashboard>>Pages>>New Blank Page>>Paste the Below HTML code in HTML format.
<style>.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-subject, .contact-form-country {max-width: 300px;width: 100%;font-weight:bold;}.contact-form-name {display: inline-block;background: #FFF;background-color: #FFF;color: #A1A1A1;font-family: Arial,sans-serif;font-size: 13px;font-weight:bold;height: 30px;margin: 0;margin-top: 10px;margin-left: 10px;padding: 15px 15px 15px 5px;vertical-align: top;border: 1px solid #ddd;box-sizing: border-box;}.contact-form-email {display: inline-block;background: #FFF;background-color: #FFF;color: #A1A1A1;font-family: Arial,sans-serif;font-size: 13px;font-weight:bold;height: 30px;margin: 0;margin-top: 20px;margin-left: 10px;padding: 15px 15px 15px 5px;vertical-align: top;border: 1px solid #ddd;box-sizing: border-box;}.contact-form-subject {display: inline-block;background: #FFF;background-color: #FFF;color: #A1A1A1;font-family: Arial,sans-serif;font-size: 13px;font-weight:bold;height: 30px;margin: 0;margin-top: 20px;margin-left: 10px;padding: 15px 15px 15px 5px;vertical-align: top;border: 1px solid #ddd;box-sizing: border-box;}.contact-form-country {display: inline-block;background: #FFF;background-color: #FFF;color: #A1A1A1;font-family: Arial,sans-serif;font-size: 13px;font-weight:bold;height: 30px;margin: 0;margin-top: 20px;margin-left: 10px;padding: 15px 15px 15px 5px;vertical-align: top;border: 1px solid #ddd;box-sizing: border-box;}.contact-form-email:hover, .contact-form-name:hover{border: 1px solid #bebebe;box-shadow: 0 1px 2px rgba(5, 95, 255, .1);padding: 15px 15px 15px 5px;}.contact-form-email-message:hover {border: 1px solid #bebebe;box-shadow: 0 1px 2px rgba(5, 95, 255, .1);padding: 10px;}.contact-form-email-message {background: #FFF;background-color: #FFF;border: 1px solid #ddd;box-sizing: border-box;color: #A1A1A1;display: inline-block;font-family: arial;font-size: 12px;margin: 0;margin-top: 20px;margin-left: 10px;margin-bottom: 10px;padding: 10px;vertical-align: top;max-width: 500px!important;height: 120px;border-radius:4px;}.contact-form-button {cursor:pointer;height: 30px;line-height: 30px;font-weight:bold;border:none;}.contact-form-button {display: inline-block;zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */*display: inline;vertical-align: baseline;margin: 0 10px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(1,1,1,.3);-webkit-border-radius: .2em;-moz-border-radius: .2em;border-radius: .2em;-webkit-box-shadow: 0 1px 2px rgba(1,1,1,.3);-moz-box-shadow: 0 1px 2px rgba(1,1,1,.3);box-shadow: 0 1px 2px rgba(1,1,1,.3);}.contact-form-button:hover {text-decoration: none!important;border: none!important;}.contact-form-button:active {position: relative;top: 1px;}</style><div class="form"><form name="contact-form"><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' /><p></p><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/><p></p><input class='contact-form-subject' id='ContactForm1_contact-form-email' name='subject' value="Subject" size='30' type='text' onblur='if (this.value == "") {this.value = "Subject";}' onfocus='if (this.value == "Subject") {this.value = "";}'/><p></p><input class='contact-form-country' id='ContactForm1_contact-form-email' name='Country' value="Country" size='30' type='text' onblur='if (this.value == "") {this.value = "Country";}' onfocus='if (this.value == "Country") {this.value = "";}'/><p></p><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == "") {this.value = "Leave Your Message..";}" onfocus="if (this.value == "Leave Your Message..") {this.value = "";}" value="Leave Your Message.."></textarea><p></p><input class='contact-form-button contact-form-button-submit' type='reset' value='Clear'/><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /><br /><div style="max-width: 500px; 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>
Conclusion:
Now you are done..!! You can Now available your best Ever customized Contact Form.
Kindly drop your view on this technique.
Tags
Top Widgets