Friday, 12 December 2014

Add Contact Form in Static Page in bloggers blogs

Add Contact Form in Static Page in bloggers blogs. Also customized your contact form as per your need.
Add contact form in static page in blogger

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

Add contact form in static page in blogger

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&nbsp;</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.


3 Discussion

  1. Thank You For The Article :)
    Can you help me in changing the shape and color of submit button? I am not able to figure it out
    Thanks.

    ReplyDelete
    Replies
    1. Actually its quite easy just add this css code and alter it as per requirement #ContactForm1_contact-form-submit {
      float: left;
      background: #CF4D35 none repeat scroll 0% 0%;
      color: #FFF;
      margin: 10px auto;
      vertical-align: middle;
      cursor: pointer;
      padding: 10px 18px !important;
      font-weight: 700;
      font-size: 14px;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-radius: 4px;
      border: 0px none;
      transition: all 0.8s ease 0s;
      }
      #ContactForm1_contact-form-submit:hover {
      background: #E45A40 none repeat scroll 0% 0%;
      color: #FFF;
      }
      :cool: :victory:

      Delete
  2. Thanks Tushar Sharma, it works perfectly on my site.

    regards,
    Carroleen Wood.

    ReplyDelete

Note : All comments will be moderated. Do Not Spam.