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 '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>