Saturday, January 04, 2014

Make A Contact Page In Your Blog

When it comes to encouraging visits to your blog, by people who need help, a properly presented "Contact" form is a very useful feature.

Some time ago, I used a comment form, and a specially written post, "Contact Me" (titled "Leave Comments Here"), to provide private contact. For this blog, with comment moderation before publishing, I simply read the unpublished comments published against my post "Contact Me", without publishing them.

Time moved on, however - and various changes made by Blogger made my unpublished comments based contact form less useful.

Recently, Blogger released a new blog accessory - their "Contact" gadget. Just over a month ago, I added a Contact gadget to this blog, and made it display in the same way as my Topics index displays. Look in the Link Bar at the top of this page. To the right of "Topics", you'll see "Guestbook" and "Contact".

Like my labels gadget ("Topics"), I made my "Contact" gadget display as part of a static page, and positioned the gadget in the main part of the blog.

My Contact gadget, like my Labels gadget, displays as part of a static page, and is seen in the same location as the posts would be seen. This gives the Contact gadget the appearance of having its own page.


Note: You may find it easier get this working with the blog using a non dynamic template, with the Contact gadget initially located in the sidebar.

This is a surprisingly simple task, and makes a good demonstration of a separately documented technique, conditionally displaying a template object.
  1. Publish a static page, "Contact Me".
  2. Add a Contact gadget using the "Layout" wizard "Add a Gadget" - and position the new gadget above "Blog Posts".
  3. Edit the template, unfold widgets as necessary, and make the Contact gadget display conditionally, when the static "Contact Me" page is displayed. Similar to my Welcome post example, add two simple lines of code - but around the internal code in the Contact gadget.
    <b:widget id='ContactForm1' locked='false' title='Contact Me' type='ContactForm'>
    <b:includable id='main'>
    <b:if cond='data:blog.url == &quot;http://blogging.nitecruzr.net/p/contact-form.html&quot;'>
      <b:if cond='data:title'>
        <h2><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 + "_contact-form-name"' 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 + "_contact-form-email"' 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 + "_contact-form-email-message"' name='email-message' rows='5'/>
            <p/>
            <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/>
              <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
            </div>
          </form>
        </div>
      </div>
        </b:if>
      </div>
    </b:if>
        <b:include name='quickedit'/>
    </b:includable>
    </b:widget>
    

Having done that, I invite you to examine the results.

>> Top

3 comments:

Tito Dutta said...

Excellent, it is working like magic.

John said...

Contact form gadget not work!
Email not sent.
Please fix the issue..

Chuck Croll said...

John,

We can help you a lot easier, given some details.

Can you start a topic, in Blogger Help Forum: Get Help with an Issue, so we can get some details about your problem?