MESA Docs
MESA Homepage
  • Welcome to MESA
    • Installing MESA
    • Dashboard
    • Core Concepts
    • Getting Help
  • Templates
    • Template Library
    • Installing & Editing
  • Workflow Builder
    • Triggers
    • Actions
    • Fields
      • Variables
      • Formatting Variables
      • Liquid Templating
    • Testing
  • Workflow Activity
    • Tasks
      • Troubleshooting
      • Replay
    • Logs
    • Time Travel
  • Best Practices
    • Set Titles & Descriptions
    • Track Time Saved
    • Enable Failure Notifications
    • Avoid Infinite Loops
  • Going Further
    • Plans & Billing
    • Notifications
    • Credentials
    • Understanding the Queue
    • Export & Import Workflows
    • Platform Thresholds & Limits
  • Built-in Tools
    • Activity Log
    • AI
    • API
    • Approval
    • MCP
    • Custom Code
      • Libraries
        • MESA SDK
        • Filter
        • Loop
        • Transform
        • oAuth
        • Shopify
        • ShopifyGraphql
      • FAQ
    • Data
    • Delay
    • Email
    • Filter
    • Form
      • Configure
      • Going Further
      • Technical Notes
    • FTP
    • Image
    • Loop
    • Package Tracking
    • Paths
    • Schedule
    • Scraper
    • SMS
    • Transform
    • Virtual Output
    • Weather
    • Web Request
    • Webhook
  • Apps
    • Airtable
    • Amazon S3
    • Asana
    • Blog Studio
    • ChannelApe
    • Claude
    • ChatGPT
    • Dall-E 2
    • Delighted
    • Digital Humani
    • Discord
    • DocuSign
    • Dropbox
    • Etsy
    • Facebook
    • Fera.ai
    • Gatsby
    • Gmail
      • Send Email
    • Google Analytics 4
    • Google Analytics UA
    • Google Calendar
    • Google Drive
    • Google Forms
    • Google Sheets
      • Add Row
      • Query Rows
      • Update Row
      • Row Created
      • Row Updated (Advanced)
      • Creating New Spreadsheets
      • Technical Notes
    • Gorgias
    • Govalo
    • Help Scout
    • Hubspot
    • Infinite Options
    • Intercom
    • IPDetective
    • Judge.me
    • Katana
    • Klaviyo
      • API Deprecation
    • Loop Returns
    • Loyalty Lion
    • Mailchimp
    • Mailgun
    • Mandrill
    • Mantle
    • Notion
    • Odoo
    • Omnisend
    • Page Studio
    • Pinterest
    • Printful
    • PrintNode
    • QuickBooks
    • Rebuy
    • Recharge
    • Remove.bg
    • Returnly
    • Rivo
    • Salesforce
    • Segment
    • Sendlane
    • Shippo
    • ShipStation
    • Shopify
      • Technical Notes
        • Configuring Your Payload
        • Modifying and Filtering Get Lists
        • Parameters
        • Error Codes
        • Accuracy of orders_count Variable
        • Accuracy of Count Products Action
        • Using the Gift Cards API
        • How to Find a Specific Record in the Testing Interface
        • Order, Customer, and Product Updated Trigger Frequency
    • Shopify Flow
    • Shopify Plus
    • Shopify Retail POS
    • Skio Subscriptions
    • Slack
    • Smartrr
    • Smile.io
    • Square
      • Updating Inventory
      • Frequently Asked Questions
    • Stamped.io
    • Stripe
    • Thanks.io
    • TikTok
    • Tracktor
    • Twilio
    • Uploadery
    • Wonderment
    • Xero
    • Yotpo
    • Yotpo Loyalty
  • For developers
    • Admin API
    • Command Line Interface
    • Embedding templates
  • Frequently asked questions
    • Why isn't the log search returning logs with the search I entered?
    • Is it possible to handle errors or retry steps?
    • How do I handle a failed task?
    • Does MESA auto-save workflows?
    • Can I Use Apps That Don't Have a MESA Connector?
    • Why is my workflow action adding the same data each time it occurs?
    • How do I cancel automations that are already in progress?
    • How do I cancel my MESA subscription or 7-day trial?
    • Can you import code from npm in custom code?
    • Do you have a Slack Community?
Powered by GitBook
On this page
  • Add to Shopify's order status page
  • Add a form via the Shopify theme editor
  • Add to the customer account order page
  • Hosted Forms
  • Styling your form
  • JavaScript API

Was this helpful?

  1. Built-in Tools
  2. Form

Going Further

PreviousConfigureNextTechnical Notes

Last updated 5 months ago

Was this helpful?

Add to Shopify's order status page

1. Open the Form trigger and click on the copy icon on the right of 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 Order status page 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 in your store. Click the More Actions dropdown and then select the View order status page from the drop-down menu.

Add a form via the Shopify theme editor

1. Open the Form trigger and copy the entire URL to the right of 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, select a page to which you'd like to add the Form using 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. 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 the theme editor and view the form on your selected page.

Add to the customer account order page

1. Open the Form trigger and click on the copy icon to the right of 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 is 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 Forms

Your form is also available on your Shopify site out of the box. To view your hosted form, click on the export icon under the Form URL.

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.

Styling your form

When setting up a form, MESA gives you the option to add class names to the form fields.

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>

Scripts do not apply the same styling universally and may require adjustments based on the location of the Form.

JavaScript API

If you would like to build something more interactive, Form has a powerful JavaScript API:

  • POST {{form_url}}.json: Post a JSON object representing your form. Example:\

curl 'https://mymesa.site/mesa-example/forms/form_shopify_order_return.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>

Your theme must be an in order to add a MESA Form through the Shopify theme editor.

GET {{form_url}}.json: (optional) retrieve your Form Builder configuration in a format that can be rendered with the JavaScript library.

Online Store 2.0 theme
Form Renderer