Mautic Form Layout For WordPress

Mautic form layout

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:

  1. Open your home page
  2. Right-click and select “View Source” or “View page source” (depending on your browser)
  3. Look near the top of the page for a line that starts with
    <link rel='stylesheet' id='bootstrap-css'
  4. 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:

bootstrap grid columns

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:

Mautic form layout

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’:

class="row col-md-6"

then click ‘Update’. It will look like this:

mautic form layout apply row to field

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:

class="col-md-6"

We’re not starting a new row but we are telling WordPress to make the field fill half of the space:

 

mautic form layout apply column to field

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?


For more tips and tricks, sign up for our newsletter

Leave a Reply

Your email address will not be published. Required fields are marked *