Contact form was very new addition provided in blogger. This widget really help the bloggers who searching different contact form plugin before introduction of this widget. Since after its introduction it really helpful for the readers as well.But since it can be only added as a widget, it does not give the professional look to the blog. Most blogger have separate contact page for their readers so they could find every detail on single page itself. Therefore we have to use work around method to get it done.
This method is quite simple and does not require any coding knowledge, just copy and paste.
Before proceeding make sure to back up your template if any thing goes wrong you can restore it to original state.
Steps:
1: Go to Blogger > Layout > Add a gadget
Add contact form and place it above or below Blog widget as shown in the following image and save the layout
2: Go to Blogger > Template > Edit HTML
Click on "Jump to Widget" and select "Contact Form1"
Replace that complete code of the widget with following code
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'><b:include name='quickedit'/>
</b:includable>
</b:widget>
3: Save this template and go to pages and create new page. In that page click on Options and for readers comments check "Don't allow". Now click on HTML button below title and add this following code in it. Now click on compose and change it's text as per your requirement. Finally it's Done, see it was quite simple.
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<span style="font-size: large;">Welcome to our Contacts Us page </span></div>
<br />
<div style="text-align: left;">
<i>Hello Friends you can contacts us by using this below form. Your Email ID is required but it is not shared with anyone. You can give your advice, suggestion or even order request by using this form. We are Always here for help.</i></div>
<br />
<div class="contactform-eu">
<form name="contact-form">
<span style="color: #666666; font-family: Oswald, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400;">Name</span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
<br />
<span style="color: #666666; font-family: Oswald, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400;">Email Address <span style="color: red; font-weight: bolder;">*</span></span><br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
<br />
<span style="color: #666666; font-family: Oswald, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400;">Your Message <span style="color: red; font-weight: bolder;">*</span></span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="send" /><br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<style>#ContactForm1,.entry-meta{display:none}#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:300px;height:auto;margin:5px auto;padding:10px;background:#fff;color:#666;border:1px solid #e9e9e9;transition:all 1s ease-in-out}#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px 0;padding:10px;background:#fff;color:#666;font-family:Roboto,sans-serif;border:1px solid #e9e9e9;transition:all 1s ease-in-out}#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{outline:0;border:1px solid #ccc}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:450px;margin-top:35px}.contactform-eu{margin:0 auto}</style>
</div>
If you face any problem feel free to ask, we are always here for help.
0 comments:
Post a Comment