Add a post-purchase survey on your checkout page

Mesa Forms and Shopify

MESA is an automation platform for retailers on Shopify. You can create new customer experiences and better capture data along the way. For example, a post-purchase survey provides a great window of opportunity to receive valuable marketing information, like where a customer first heard about the product(s) they just purchased.

This article shows you how to do just that using the built-in Forms app. Install MESA on your Shopify store to start your 14-day free trial. Contact us for any help getting this workflow setup!

###

This tutorial will show how to set up a post-purchase survey directly onto your Shopify store checkout page using Forms by MESA. In a matter of minutes, you can set up the customizable form to give you a wealth of customer insights.

Step-by-step instructions:

1. On your MESA dashboard, click the green Create New Workflow button to the right of the Search apps and templates field.

MESA workflow builder
Create new workflow in MESA

On the next page, click the Forms by MESA icon under When this happens, which will be the first step in your workflow.

automation step
First step of the no-code workflow builder

2. Click on the first step in the workflow, Form. You can build a form from scratch, or copy the HTML code from our Form Builder, modify it, and use it on any page on the web. More details can be found on MESA Forms here.

Click the Open Form Builder button to start editing your Form.

Forms by MESA configuration
Forms by MESA

Using the right-hand column of different field types, you can drag and drop different fields on your Form and tailor it as you wish.

A common one to use is the Radio Group option, which will allow you to ask a question and provide various options to choose from. Below is an example of what a post-purchase survey might look like. Click the green Update button when complete.

Forms by MESA Editor
No-code form builder

Before moving on, you need to make a note / copy the Form URL which you’ll need to reference in the next step.

Forms by MESA URL configuration
Forms by MESA configuration

3. Next up, you’ll need to add a script in the checkout settings to get this form to appear on the order confirmation page. This might sound daunting, but don’t worry; this tutorial will break it down for you.

To access additional scripts, click Settings in the lower left-hand corner of your Shopify admin, and then click the Checkout icon. Under the Additional Scripts section, you’ll want to update the Order Status box with the following code:

<form id="mesa-form" class="mt-3" style="display: none;" action="https://mymesa.site/shoppad-ops/forms/new_workflow_1" method="POST" name="mesa-form">
  <div id="form-content"></div>
    <div id="error"></div>
    <div class="formbuilder-button form-group field-submit">
      <button type="submit" class="btn-primary btn" name="submit" id="submit">Submit</button>
    </div>
  </div>
</form>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/form-render.min.js'></script>

<script src="https://mymesa.site/forms/hcaptcha.js" async defer></script>
<script>
jQuery(document).ready(function($) {
  var $form = $('#mesa-form');
  var mesaFormUrl = $('#mesa-form').prop('action') + '.json';
 
  // Render the form from the fields configured in the Mesa Dashboard Form Builder with FormRender:
  // https://formbuilder.online/docs/formRender/options/
  $.getJSON(mesaFormUrl, function(data) {
    jQuery('#form-content', $form).formRender({
      formData: data
    });

    // If this is a Shopify Checkout page, support auto-populating the customer-id field
    if (typeof Shopify !== 'undefined' && typeof Shopify.checkout !== 'undefined') {
      jQuery('#form-content input[name=customer-id]').val(Shopify.checkout.customer_id);
    }
    $form.fadeIn();
  });

  // Bind an AJAX POST call to the #submit button
  $('#submit', $form).bind('click', function(event) {
    event.preventDefault();
    $(this).prop("disabled", true);

    // Post to the Mesa Forms JavaScript API url, which is: "{{form_url}}.json"
    // Mesa Forms will accept these Content-Types: `application/json`, `application/x-www-form-urlencoded`
    $.ajax({
      type: "POST",
      url: mesaFormUrl,
      data: $form.serializeArray(),
      success: function() {
        $('#mesa-form').html('<div class="alert alert-success" role="alert">Thank you for your submission.</div>');
      },
      error: function(jqXHR) {
        console.log(jqXHR, status, error);
        $('#error').html('<div class="alert alert-danger" role="alert">Sorry, there was an error submitting your form: ' + jqXHR.responseJSON.error.message + '. Please try again.</div>');
        $('#submit', $form).prop("disabled", false);
      }      
    }).done
 
  });
});
</script>

Before finishing this step, you’ll also need to change the action URL to the Form URL you built in Step 2. After complete, click the green “SAVE” button in the top right.

Shopify Checkout: Additional Scripts
Shopify Checkout: Additional Scripts

4. Depending on your Shopify store theme, you might want to stylize some form elements for formatting purposes. To make sure things look picture perfect on your checkout page, you may need to change things like spacing or font sizes.

5. Now that you’ve got your post-purchase survey up and running, what’s next? Adding another step in the workflow to capture submission data is critical for later analysis. By clicking Add Step after your Form step, you’re able to integrate the next app in the workflow.

automation step: Forms by MESA
Adding your next automation step…

Maybe you’d like to have everything go to a Google Sheet. Simply click on the icon and follow the set-up instructions to get it up and running.

automation step: Google Sheets
Adding Google Sheets to your workflow
Google Sheets configuration
Google Sheets configuration

Or perhaps, you’d like to send a team Slack every time a submission happens. Click on the icon, follow the set-up instructions and keep everyone in the loop. 

automation step: Slack
Adding Slack to your workflow
Slack Configuration

Last Step: The most important

6. Once complete, scroll back up to the top of the page and click the Enable button in the top right-hand corner. 

Workflow Wrap Up

Now you’re ready to create a post-purchase survey on your checkout page using Forms by MESA. Every step in the workflow is 100% customizable. Change an event, add a step before/after or adjust the default settings.

MESA is a great way to get your apps working altogether so that you can work smarter. We’d love to discuss how it could help connect your data or create that awesome experience for your brand. Give it a try with our 100% free 14-day trial. Other popular workflow templates that work with Forms by Mesa include:

Get more done today with the Shopify expansion pack

Shopify App Store Badge

★★★★★5.0 Rating