Submitting perch forms using Ajax

A common feature on most perch websites is a contact form. The Perch Forms app makes this easy and it works great, but you can make these forms a bit slicker using AJAX to submit the form data without requiring a full page refresh.

In this post we’re going to learn how to hijack the perch forms app, so that our data is submitted using AJAX. We’ll be using jQuery to make the Javascript a bit more accessible.

Our form

In this tutorial we’re going to make use of the contact form on this site. As you’d expect, this is powered by perch forms app and triggers an email which is sent to me.

If you have a Javascript file that is already being used in your project, open that, otherwise you’ll need to create one and ensure it’s included in your page template.

To make life easier, let’s add a variable that references our form:

$(function() {
    // Get the form.
    var form = $('#contact');
});

Next let’s create an event listen that will intercept the submit event. We’ll do this using the jQuery submit method:

$(form).submit(function(event) {
    // Stop the browser from submitting the form.
    event.preventDefault();
});

We’ve passed a function to the submit method and this will execute when the user clicks submit. Within that function, we’ve also told the browser not to perform the default action (i.e. submit the form).

Next we need to serialise the form data. This converts the data the user has provided into key value pairs that can be sent with the AJAX request. We’re also going to capture the ID of the form submitted, as we’ll be needing this later.

    var formData = $(form).serialize(),
        id = $(form).attr('id');

We can write the code that sends the data to perch and receives the response

// Submit the form using AJAX.
$.ajax({
    type: 'POST',
    url: $(form).attr('action'),
    data: formData
})

We’re using jQuery’s ajax method to create a request and passing an object to that request that contains a number of configuration properties:

  • The type property specifies the HTTP method (in this instance POST).
  • The URL property is where we want the data to be sent (which we’re retrieving from the action form attribute provided by perch).
  • The data property is the serialised data we which to submit.

Finally we need to handle the response.

The response provided by the server is is HTML. Therefore, instead of adding lots of logic within our javascript, all we want to do is replace the existing form, with the form that is being returned. This will contain either the success message you’ve specified or error messages based on your validation criterium.

For this technique to work, you need to add show-form="true" to your <perch:success> tag. This ensures that whether the form submission is successful or not, we get back the full form, which is the behaviour we want as this is the content we need to replace.

.done(function(data) {
    // Find the form in perch's response (based on the id specified above)
    var newForm = $(data).find('#' + id);
    // Replace the existing form with the response from the server
    $(form).replaceWith(newForm);
});

Quill Studios demonstrate a more in-depth method on their blog. But for the majority of circumstances, this method should work fine.

All the code above is available in the github repo for this project:


Comments

  1. When the form is bound to the submit event as in the article with:


    $(‘#contact’).submit(function(event) {

    the event does not propagate to the new form after the replacement:


    (form).replaceWith(newForm)

    It’s better to bind the form submit event with jQuery’s on() method:


    $(document).on(‘submit’, ‘#contact’, {}, function(event) {

    when the new form will submit too.

    http://api.jquery.com/on/

Leave a comment