Forms by MESA

The Forms by MESA app creates Shopify forms with any combination of field types. This makes it possible for customers to send their data, sign up for promotions or other exclusive offers lists, or simply contact specific departments directly such as General Inquiries or Returns & Exchanges.

In the following sections, you will go over important topics regarding our Forms by MESA app.


Build your Forms workflow

1. On the MESA dashboard in the My Workflows tabs, click on the Create New Workflow button. Then, enter the name of your workflow.

2. Select the Forms by MESA app in the app menu under the Popular apps.

3. Once the workflow is created, click on the Open Form Builder button from a Form trigger to design your form in the form builder.

4. Drag and drop field types from the right sidebar to build your form.

5. Hover over a field and click on the Pencil icon to edit those field properties.

For every field, you will want to customize the Label which appears above your form field, and Name which will be the key of the token that you will use to represent this field in the MESA Workflow.

Click the Pencil icon again or the Close button at the bottom to collapse the field details.

6. Click Update to close the Form Builder window and return to edit the workflow.

7. Be sure to save any changes to your workflow.


Test your Forms workflow

To test your Forms workflow, make sure that you enable your workflow. Locate the Form URL field and click on the external link icon to view your Form. Then, make a test submission!


Advanced Settings

The Success Redirect URL field can add your own redirect that displays a success message after a form is submitted.

The generic success message is shown below.

The Captcha field can add a hCaptcha Checkbox to prevent unwanted spam from bots and solicitors.


Basic Styling Customization

By default, MESA adds Bootstrap wrappers and classes and uses its default styling. When setting up a Form, MESA gives you the option to add class names to the Form fields, should you wish to attach custom styles.

This HTML snippet adds a border around the form and ensures that the input fields and buttons have a border outline.

<style>
 #mesa-form {
     margin-top: 25px;
     padding: 1.1428571429em;
     border: 1px solid #D9D9D9;
     border-radius: 4px;
     margin-bottom: -20px;
 }

 #mesa-form button#submit {
    border-color: #D9D9D9; 
 }
</style>

🗒 Note: If your Form needs some styling changes, feel free to reach out to our Customer Success team with our contact@theshoppad.com email. We will be happy to work with you!


Add a form to your store

There are a variety of ways to add a form to your store. Click on the following blue accordions to learn more.

Add a Form to a customer's order status page

1. In the MESA workflow that contains the form, open the Form trigger and click on the copy icon under the Form Embed Code field.

2. From your Shopify Admin, click on Settings and then locate the Checkout settings.

3. Scroll down until you locate the Additional scripts section. Paste the copied Form embed code.

4. Save your changes.

After saving, your Form will appear on the order status page after customers place an order.

You can preview the look of the Form by going to any order on your store. Click the More Actions dropdown and then select View order status page from the drop-down menu.

Add a Form to a 2.0 theme using the Shopify theme editor

🗒 Note: Your theme will need to be an Online Store 2.0 theme in order to add a MESA Form through the Shopify theme editor.

1. In the MESA workflow that contains the Form, open the Form trigger and copy the entire URL under the Form URL field.

2. From your Shopify Admin, click on Online Store under Sales Channels. Locate your preferred theme and click on Customize.

3. In the theme editor, choose a page that you'd like to add the Form to via the dropdown menu at the top.

4. Once a page is selected, click (+) Add section in the left sidebar menu. Then, scroll down to the App blocks and select the MESA Form block.

5. From the lefthand sidebar and under Apps, click on the MESA Form block.

6. Locate the Form URL field and paste the copied Form embed code. You will be able to see the Form in the theme editor as a preview after pasting the URL.

7. Save your changes.

After saving, you can exit out of the theme editor and view the Form on your selected page.

Add a Form to a customer's account order page

1. In the MESA workflow that contains the Form, open the Form trigger and click on the copy icon under the Form Embed Code field.

2. From your Shopify Admin, click on Online Store under Sales Channels. Locate your preferred theme and click on Actions and then Edit code.

3. Locate your theme's customer order file. Each theme varies but a common location would be under the Templates folder: customers/order.liquid file.

4. Paste your copied Form Embed Code anywhere you’d like it to appear on the page.

5. Save your changes. After saving, you can exit out of the theme editor and view the customer account page.


Hosted Feature

Your Form is also available out of the box on your Shopify site. You can click on the export icon under the Form URL to view your hosted Form.

If your workflow is disabled, you will not be able to see your Form.

If the customer is logged in, the payload submitted by the form will also include customer_id.


Advanced Customizations

Pre-populate Field Values from Querystring

You can pre-populate the value of any field by setting the Value parameter in the Form Builder field settings.

Default values can also be passed via a querystring parameter that matches the field's Name property. For example, linking to the url {{form_url}}?email=bob@exmaple.com would pre-populate the email field with the value bob@exmaple.com. The success message can also be overwritten by passing the success_message querystring parameter, for example: {{form_url}}?success_message=Your+return+is+in+process.

Hosted MESA Forms on Shopify support these same querystring parameters.

Move HTML elements in your Form

You can build your form from scratch. Just add a <form> tag with the method set to "POST" and an action set to your Form URL.

<form action="{{form_url}}" method="POST">
   <!-- Form fields go here -->
</form>

If you enabled a Captcha on the MESA Form Configuration, you will see an additional <div class="hcaptcha"></div> and a <script> tag loading an external JavaScript file. You can move these two elements around on the page, but if you delete them users will receive a Captcha error when they try to submit the form. If you disable the Captcha in the MESA Form Configuration, you will also need to delete these elements so the Captcha does not appear on your form.

Forms by MESA JavaScript API

If you would like to build a more interactive form, Forms by MESA has a powerful JavaScript API:

  • GET {{form_url}}.json: (optional) retrieve your Form Builder configuration in a format that can be rendered with the Form Renderer JavaScript library.
  • POST {{form_url}}.json: Post a JSON object representing your form. Example:
curl 'https://dev-www.theshoppad.com/apps/mesa/forms/poulet-sauvage/form_to_email_1.json' \
 -H 'Content-Type: application/json' \
 --data-raw 'name=Bob+Biller&email=bob&message='

Here is an example of a form that is built with the Form Renderer library and submitted via jQuery. To use it, simply change {{form_url}} in the <form> tag to be your Mesa Form URL.

<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) {
   // Validate form first, return early if fails
   if (!$form[0].checkValidity()) {
      return;
   }

   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>