Forms: Sync Email Addresses & Handles to Gatsby

MESA allows customers to submit their email address and handle from the Shopify Order Status page. 

Follow the steps below to get this set up for your store!

1. In the MESA dashboard, click  Create New Workflow.

2. Under the Popular Apps tab, click on Forms by MESA app. 

3. Click on the Open Form Builder button in the Form Trigger.

4. Drag the Text Field and Hidden Input fields onto the left-hand side within the Form Builder. 

5. For the Text Field, click on the pencil icon and rename the Label to Instagram Handle or whatever you'd like. Make sure that the field is marked as Required so that you actually receive information from your customers.

6. For the Instagram Handle's Name field, rename the value to "handle".

7. For the Hidden Input, click on the pencil icon and rename the Name value to "email-address". 

For the Value field, make sure that you enter: {{customer.email}}

It is extremely important to enter this so that your Gatsby contact gets created with the customer's email address.

8. Then, click on the Update button within the Form Builder. 

9. Add Gatsby as your next step in your workflow.

10. Log into your Gatsby account > Integrations > Webhook > Create a new webhook. Click Save on the webhook default settings which should look like the below.

11. Click on the clipboard icon to the right of the URL. Paste the URL you copied into the Webhook URL field in MESA, in the Gatsby Create Contact Step.

12. Locate the Email and Instagram Handle fields and click on the {+} icon to use MESA's Token feature. Tokens are representations of data. Select the appropriate tokens for both Email and Instagram Handle

13. Save your workflow and enable your workflow! Check this document out for best practices

14. Next, we will add this Form to your Order Status page. Scroll up in your workflow and click the clipboard icon to copy the Form URL

15. From your Shopify Admin, click Settings in the lower left-hand corner of your Shopify admin, and then click the Checkout icon.

16. In the Additional Scripts section, copy and paste the following snippet of code.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<form id="mesa-form" class="container" style="display: none;" action="{{form_url}}" method="POST" name="mesa-form">
  <div id="form-content"></div>
    <div class="form-group">
      <div class="hcaptcha"></div> <!-- Remove this line to hide the captcha -->
    </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/formBuilder@3.4.0/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>

16. Locate this line of code.

<form id="mesa-form" class="container" style="display: none;" action="{{form_url}}" method="POST" name="mesa-form">

17. Replace    {{form_url}} in the <form> tag with your pasted URL. 

18. Save your changes and it should look like this now!

19. Follow this document to add a basic layout to your form

20. That's it! Test your form by making a small purchase on your site, or doing a Test Order.