Example Contact Form

1) contact.liquid

{% block enquiry %}
  <form id="enquiry_form" action="{{ contents.enquiries.api.create }}" method="post">
    {% editable_long_text 'welcome' %}
      <h3>Got an enquiry?</h3>
      <p>Please fill in the form below and we will get in touch as soon as possible.</p>
    {% endeditable_long_text %}
    <fieldset>
      <div id="error_message">No Errors</div>
      <ol>
        <li>
          <label for="name">Name</label>
          <input type="text" id="name" name="content[name]" />
        </li>
        <li>
          <label for="email">Email</label>
          <input type="text" id="email" name="content[email]" />
        </li>
        <li>
          <label for="enquiry" class="textarea">Enquiry</label>
          <textarea id="enquiry" name="content[message]"></textarea>
        </li>
        <li class="submit">
          <button type="submit">Send Enquiry</button>
        </li>
      </ol>
    </fieldset>
  </form>

  <div id="enquiry_thanks">
    {% editable_long_text 'thanks' %}
      <h2>Thankyou</h2>
      <p>Your enquiry has been delivered successfully. We will be in touch shortly.</p>
    {% endeditable_long_text %}
  </div>
{% endblock %}

2) contact.js

// Requires jQuery and jQuery Validate

$(function(){
  $("form#enquiry_form").validate({
    rules: {
      'content[name]':    {required: true},
      'content[email]':   {required: true, email: true},
      'content[enquiry]': {required: true}
    },
    success: function(label) {
      label.text("Success!").addClass("success");
    },
    invalidHandler: function(form) {
      form_error(form.currentTarget, "Please fill in the required fields.")
    },
    submitHandler: function(form) {
      if($(form).valid()) {
        $.ajax({
          url:      $(form).attr('action'),
          data:     $(form).serializeArray(),
          type:     "post",
          success: function(data) {
            if (data.errors == null) {
              $('#enquiry_form').fadeOut(function(){
                $('#enquiry_thanks').fadeIn();
              })
            } else {
              form_error(form, "Sorry, something went wrong. We will look into this as soon as possible.")
            }
          },
          error: function(data) { 
            form_error(form, "Sorry, something went wrong. We will look into this as soon as possible.")
          }
        })
      }
      return false;
    }
  });
});

function form_error(form, message) {
  $(form).find('#error_message').show().html(message)
}