New Blogger Widget: Contact Course Of Written Report - Alter Fashion & Install Inward A Static Page

Just a few days ago, Blogger introduced a novel contact shape widget that you lot tin add together to your spider web log easily. At the moment, it is real basic because, at to the lowest degree for now, does non allow sending files or anything other than plainly text.

The contact shape for Blogger has the next features:

• Field for the user name
• Field for email
• Field for the message (textarea)
• Submit Button

The pattern is uncomplicated in addition to the text colors inherit the department where you lot add together it. At the moment, this widget has no configuration options in addition to is non available for dynamic views.

How to Add Contact Form to Blogger

To add together it to your blog, merely direct the Layout tab, in addition to thence click on "Add a gadget" inwards the department you lot desire to demo - for example, inwards the sidebar. Then, direct the More gadgets tab in addition to add together the Contact Form gadget.

Styling Contact Form

Since the background is transparent, the shape volition blend good aesthetically speaking, but even thence it is slowly to alteration using Style Sheets (CSS) to the appropriate selectors. Here's an example:

/* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px company #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

/* Fields in addition to submit push */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit push manner */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit push on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px company #FAFAFA;
}

This is how it volition aspect similar afterward applying the style:

To add together this style, larn to Template > Edit HTML, click on the sideways arrow side yesteryear side to <b:skin>...</b:skin> in addition to glue the code merely above ]]></b:skin> (press CTRL + F to notice it):

How To Add Contact Form In Influenza A virus subtype H5N1 Static Page

First pace is to add together the Contact Form gadget (Layout) in addition to second, to edit the template (Template > Edit HTML) to withdraw well-nigh of the gadget. You accept to search for the id "ContactForm", expand the widget yesteryear clicking on the dark arrow on the left (same amongst the includable) in addition to and thence delete the business office that I accept colored inwards ruby (see below):

Part to hold upwards removed:

  <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>

After you lot accept saved the template, larn to Pages in addition to glue the next code into a novel blank page amongst the championship you lot want:

 <div class='widget ContactForm' id='ContactForm1'>
  <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 *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message *</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>

Messages volition hold upwards sent to the same e-mail that you lot accept registered inwards Blogger.

Here is the demo page where you lot tin bear witness it (this is an line of piece of job concern human relationship for demo purposes only, thence don't aspect whatever reply).

That's it! If you lot accept whatever questions or comments, larn out them below.

Share this post