One question that gets asked time and again on the Mautic Community is how to modify the default Mautic form layout. In this post, I’ll explain one way a non-coder can achieve a horizontal form layout easily.
The problem with the default Mautic form layout
By default, Mautic forms appear with the fields laid out vertically. While this is okay for short, simple forms, it can look messy with a form with lots of fields. It isn’t really a ‘problem’, it’s just that Mautic applies minimal styling to the forms based on the theme you chose. And none of the themes that ship with Mautic use horizontal styling.
But modifying the default Mautic form layout to achieve horizontal fields in WordPress can be very easy. Depending on the theme you use.
Themes built with Bootstrap
If the WordPress theme you use is built with Bootstrap, horizontal fields are child’s-play. And finding out if your theme uses Bootstrap is child’s-play:
- Open your home page
- Right-click and select “View Source” or “View page source” (depending on your browser)
- Look near the top of the page for a line that starts with
<link rel='stylesheet' id='bootstrap-css'
- If you don’t have that entry, it doesn’t use Bootstrap
Having identified that the theme uses BootStrap, you’re headed for a home run.
Rows and columns
Bootstrap lays out a page using a grid of rows and columns. Each row has a maximum of 12 columns, and Bootstrap CSS defines these like this:
And this is what we’re going to use to get the Mautic form layout we want. Before we get started, we’ll decide how we want it to look, and for this example, I’ll use a simple ‘Contact Us’ form.
We want the form to have:
- Row 1: First and last names
- Row 2: Email address and phone number
- Row 3: Company / business name
- Row 4: Text area for a message
To make it look good, we’re going to put each field (except the message) in a column that is half of the available space. The message field is going to be the full width and the finished form will look like this:
So go ahead and create all the fields for your form and we’ll add the styling next.
Adding styling to achieve the layout
To add the styling, all you need to do is add the relevant Bootstrap CSS class to the form field attributes.
Come back when you’ve done that. Off you go.
Just kidding! This is how you apply the styling.
Open the form and in Mautic and click on the ‘First name’ field to edit it. On the ‘Attributes’ tab, add the following code to the ‘Field container attributes’:
then click ‘Update’. It will look like this:
Effectively what we’ve just done is tell WordPress to start a new row, and make this field fill half of it. For the ‘Last name’ field, we don’t want to start a new row so we’ll use this code:
We’re not starting a new row but we are telling WordPress to make the field fill half of the space:
And that’s it. Every time you want to start a new row on the form, add “class=row col-md-6” to the field container attributes. To just fill half the space without adding a new row, use “class=col-md-6”.
Making the message box occupy the full width is just a matter of adding “class=row col-md-12” to the field container attributes.
Other possible layouts
If you want to use three columns per row, you’d use “class=row col-md-4” in the first field and “class=col-md-4” in the rest.
Why not experiment using the Bootstrap grid layout above for reference?