Add a post-purchase survey on your checkout page

MESA Workflow: 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 workflows provides a great window of opportunity for valuable marketing solutions, 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 Knowledge Base.

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

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 copy the Form Embed Code which you’ll need to reference in the next step(s).

Forms by MESA configuration

Basic Set-up

3. The easiest way to add your post-purchase survey to your Shopify store is to place the Form Embed Code directly onto your checkout settings. 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 page with your Form Embed Code. It’s that simple!

Adding Form Embed Code

Advanced Set-up

If you’d like to customize your form and have decent back-end knowledge, this next step is for you. It’s similar to the previous step, but with a few more additional details.

Access your additional scripts by clicking 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 page with the following code:

<form id="mesa-form" class="mt-3" style="display: none;" action="" 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>

<script src=''></script>
<script src='[email protected]/dist/form-render.min.js'></script>

<script src="" async defer></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:
  $.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);

  // Bind an AJAX POST call to the #submit button
  $('#submit', $form).bind('click', function(event) {
    $(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`
      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);

Before finishing this step, you’ll also need to change the action URL to the Form URL you built in Step 2.

Shopify Checkout: Additional Scripts
Shopify Checkout: Additional Scripts

Below is what the default survey would look like on the order status page after checkout.

Shopify order status page survey
Shopify Order Status Survey

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. Give it a try with our 100% free 14-day trial. Other popular workflow templates that work with Forms by MESA include:

Complete more tasks without more effort.

Simplify your team’s tasks by adding workflows that are always on.

smarter shopify automations
smarter shopify automations