Missing error messages using Craft contact form plugin

Question

I've got a small site for a B&B, entirely based on a single Craft structure.

Every page uses the same entry template, which extends a layout template. This layout template has header, sidebar, and footer includes. The site’s navigation is generated direct from the structure.

All this works well.

The entry template makes extensive use of matrix blocks to create different page layouts, and one of these matrix blocks is a checkbox which adds an enquiry form to the page. The template for this is based on the Craft contact form. (I started this project a while ago as a learning exercise, and I’m still on contact form version 1.4).

The problem is that I can’t get the error messages on the email and message fields to work. If there’s an error in the form: on submit, the browser re-loads the page and doesn’t create an email, but there are no error messages. (If there are no errors: the email is created ok, and the 'thanks' page is loaded ok.)

I’ve re-tested by copying the form into a single stand-alone html page, and it works perfectly like this. This isn’t a good solution, however, as I want to be able to drop the form into pages, and to make use of structure’s navigation.

Any pointers to where I’ve gone wrong?

Many thanks!

    {% macro errorList(errors) %}
      {% if errors %}
        <ul class="errors">
          {% for error in errors %}
                <li>{{ error }}</li>
          {% endfor %}
        </ul>
      {% endif %}
    {% endmacro %}

    {% from _self import errorList %}

    <form method="post" action="" accept-charset="UTF-8">

      <input type="hidden" name="action" value="contactForm/sendMessage">
      <input type="hidden" name="redirect" value="thanks">

      <div class="row">
        <div class="compact-2 columns">
          <div class="radio-group">Subject</div>
        </div>
        <div class="compact-10 columns">
          <input type="radio" name="message[Subject][]" value="Booking">
          <label class="radio">Booking</label>
          <input type="radio" name="message[Subject][]" value="Enquiry">
          <label class="radio">Enquiry</label>
          <input type="radio" name="message[Subject][]" value="Anything else"><label class="radio">Anything else
          </label>
        </div>
      </div>

      <div class="row">
        <div class="compact-2 columns">
          <label for="fromName">Name</label>
        </div>
        <div class="compact-10 columns">
          <input type="text" id="fromName" placeholder="Your name" name="message[Name]" value=""> 
        </div>
      </div>

      <div class="row">
        <div class="compact-2 columns">
          <label for="fromEmail">Email</label>
        </div>
        <div class="compact-10 columns">
          <input type="text" id="fromEmail" placeholder="Your email address (required)" name="fromEmail" value="{% if message is defined %}{{ message.fromEmail }}{% endif %}">
          {{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}
        </div>
      </div>

      <div class="row">
        <div class="compact-2 columns">
          <label for="phone">Phone</label>
        </div>
        <div class="compact-10 columns">
          <input type="text" id="phone" placeholder="Your phone number" name="message[Phone]" value=""> 
        </div>
      </div>

      <div class="row">
        <div class="compact-2 columns">
          <div class="radio-group" for="studio">Studio</div>
        </div>
        <div class="compact-10 columns">
          <input type="radio" name="message[Studio][]" value="Studio 1 double">
          <label for="Studio 1 double" class="radio">Studio 1 double</label>
          <input type="radio" name="message[Studio][]" value="Studio 2 double">
          <label for="Studio 2 double" class="radio">Studio 2 double</label>
          <input type="radio" name="message[Studio][]" value="Studio 2 twin"><label for="Studio 2 twin" class="radio">Studio 2 twin</label>
        </div> 
      </div>

      <div class="row">
        <div class="compact-2 columns">
          <div class="radio-group" for="studio">For</div>
        </div>
        <div class="compact-10 columns">
          <input type="radio" name="message[For][]" value="Two people sharing"><label class="radio">Two people sharing</label>
          <input type="radio" name="message[For][]" value="Single occupancy"><label class="radio">Single occupancy</label>
        </div> 
      </div>

      <div class="row">
        <div class="compact-2 columns">
          <label for="arrival">Arrival</label>
        </div>
        <div class="compact-5 columns end">
          <input type="text" id="arrival" placeholder="Date of arrival" name="message[Arrival]" value=""> 
        </div>
      </div>

      <div class="row">
        <div class="compact-2 columns">
          <label for="nights">Nights</label>
        </div>
        <div class="compact-5 columns end">
          <input type="text" id="nights" placeholder="Number of nights" name="message[Nights]" value=""> 
        </div>
      </div>

      <div class="row">
        <div class="compact-2 columns">
          <label for="message">Message</label>
        </div>
        <div class="compact-10 columns">
          <textarea rows="10" cols="40" id="message" name="message[body]" placeholder="Your message here (required)" name="message" value="">{% if message is defined %}{{ message.message }}{% endif %}</textarea>
          {{ message is defined and message ? errorList(message.getErrors('message')) }} 
        </div>
      </div>

        <input id="preferredKitten" name="preferredKitten" type="text">

        <div class="row">
          <div class="small-3 compact-offset-2 columns end">
            <button type="submit" class="button button-primary">Send Message</button>
          </div>
        </div>

    </form>

Answer 1

Sorry guys: It was me -- I had cached the form, and the error message works fine when I removed this. Took me a day to find. I've got a lot to learn!

Answer 2

Pretty sure you just need to update to Contact Form 1.7.0:

Added the ability to access individual message fields values via message.messageFields when a validation error occurred. For example, the value of the input message[Phone] can now be accessed via message.messageFields['Phone'].