JavaScript API

If you would like to build a more interactive form, Forms 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 '' \
 -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="" 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 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=''></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) {
   // Validate form first, return early if fails
   if (!$form[0].checkValidity()) {

   $(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);


Last updated