Customizing Appearance

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>

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.