Header Ads Widget

How To Convert Blogger Contact us Form into Contact Us Page

Blogger contacts us widget is very easy to add in blogger's sidebar or widget area's, but sometimes it looks bad or affects your blogger's layout beauty so, this tutorial show you how to move the contact us widget to the contact us page. In the previous post we describe how to add contact us widget in specific contact us page, now this is another method to add this widget if the previous method not working in your blog.
Add Contact Form Widget:
  • First, add contact us widget Go to layout > Add new gadget > More gadgets > Contact form.


How To Convert Blogger Contact us Form into Contact Us Page

How To Convert Blogger Contact us Form into Contact Us Page
  • Go to Template > Edit HTML > Jump to Widget > ContactForm1 or Search Contactform1 in template code area by CTRL+F

How To Convert Blogger Contact us Form into Contact Us Page

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
  • Now go to the Pages > Create new page > Page HTML and paste below code and save your page.
<div id='ContactForm1' class='widget ContactForm'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name:</p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail: <span id="required">*</span></p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message: <span id="required">*</span></p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>

 

  • Go to Template > Edit HTML and find ]]></b:skin>, Above ]]></b:skin> add the following CSS.
/* CUSTOM CONTACT FORM BY ITSATBLOGGER */
.contact-form-widget {
width: 500px; /* CHANGE WIDTH OF CONTAINER */
max-width: 100%;
padding: 10px;
background: #FFFFFF; /* CHANGE BACKGROUND COLOUR OF CONTAINER */
color: #000; /* CHANGE TEXT COLOUR OF CONTAINER */
border: 0px solid #EEEEEE; /* CHANGE BORDER OF CONTAINER */
margin: 0 auto; /* REMOVE IF YOU DON'T WANT IT CENTERED */
}

.contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 500px; /* CHANGE WIDTH OF FORM ENTRIES */ }

.contact-form-button-submit {
border: 1px solid #999999; /* CHANGE BORDER OF SEND BUTTON */
background: #EEEEEE;  /* CHANGE BACKGROUND COLOR OF SEND BUTTON */
color: #333333;  /* CHANGE TEXT COLOR OF SEND BUTTON */
width: 30%;  /* CHANGE WIDTH OF SEND BUTTON */
margin: 10px 0px;
}

.contact-form-button-submit:hover{
border: 1px solid #999999; /* CHANGE BORDER OF HOVER SEND BUTTON */
background: #666666;  /* CHANGE BACKGROUND COLOR OF HOVER SEND BUTTON */
color: #FFFFFF;  /* CHANGE TEXT COLOR OF HOVER SEND BUTTON */
}

.contact-form-widget #required {color: red; /* CHANGE ASTERISK COLOR */}
.contact-form-widget p { margin-bottom: 5px; /* CHANGE SPACE BETWEEN TEXT AND FIELD */}
.contact-form-cross {margin-left: 5px !important;}

.contact-form-error-message-with-border {
background: #eeeeee; /* CHANGE BACKGROUND OF OF ERROR MSG */
border: 1px solid #333333; /* CHANGE BORDER OF ERROR MSG */
bottom: 0;
box-shadow: none;
color: #666;  /* CHANGE TEXT COLOR OF ERROR MSG */
font-size: 12px; /* CHANGE FONT SIZE OF ERROR MSG */
padding: 5px; 
font-weight: bold; /* CHANGE WEIGHT OF ERROR MSG */
text-align: center; 
}

/* END CUSTOM CONTACT FORM BY ITSATBLOGGER */

You can customize text color, font size, borders, button's color and text color, asterisk color, and others. To select color code view this post.

Save your Template and open your contact form page to check that all is done.

That's all.......
There is another method coming soon if this does not work.

Post a Comment

0 Comments