Form by Mesa: Customize your Form

Mesa Forms can be styled by adding HTML snippets with inline CSS styles. 

Displays on the Shopify Order Status page

Follow the steps below to customize the appearance of your Form on the Shopify Order Status page

1. From your Shopify admin, click on Settings and then Checkout

2. In the Additional Scripts section, paste the copied snippet directly after any code already added in.

3. Save your changes.


Basic Layout Customization

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>

Using Default Styling

By default, every newly created Mesa Form will include a stylesheet in the Form's HTML code. This stylesheet will not be used by default. To use the stylesheet, follow these instructions.

1. View your Mesa workflow.

2. Click Open Form Builder in the Form trigger step and select the Get Code tab in the Form Editor.

3. Find the following section which is located at the top of the code. 

<!-- For a good looking form out of the box, you might want to include Bootstrap: -->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> -->

4. Delete the second <!-- and the ending --> around the <link> tag.

Your code should look something like this now.

5. Click on the Copy all Code button.

6. Paste the Form's HTML into anywhere of your choosing. The most popular location is on Shopify's Order Status page