In a previous post, I covered how to lay out Mautic forms using horizontal styling if your WordPress theme uses Bootstrap. But a client recently needed me to get a Mautic form horizontal layout in a WordPress theme that doesn’t use Bootstrap. So I created a form theme for Mautic, which I’ve made available to buy here.

Installing the Mautic form horizontal layout theme

Once you’ve downloaded the theme, you need to install it. From your Mautic dashboard (or any other page), click the gearwheel in the top right and select ‘Themes”:

From there, click on “Choose File” and navigate to the folder containing the downloaded file. Select it and click “Open”, then click on “Install”.

That’s as hard as that part gets. Not too bad, huh?

The horizontal form layout theme comes with two widths of fields, as you can see below:

Note: If you add a checkbox group or radio group, you’ll get three in a row by default.

Using the theme to layout horizontal fields

Getting the form fields to appear horizontally is now just as easy as it is with Bootstrap.

Edit the form in Mautic and set the theme for the form to “Horizontal Fields”:

 

Once the theme is set, you can edit each field to set the layout. To do that, in the ‘Attributes’ tab, add the following code to the ‘Field container attributes’:

class="mauticform-column-half"

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

If you want three fields in a row, use

class="mauticform-column-third"

instead.

If you have a field on a row of it’s own but only want it to take up half of the row, use the following:

class="mauticform-column-half-last"

and set the “Input attributes” to:

style="width:50%;"

like this:

or for a third sized field, in the “Input attributes” use:

style="width:32%;"

You can also mix and match column widths to get different layouts, like this:

Get the Mautic form horizontal layout theme

You can purchase the Mautic form horizontal layout theme from our template store for just $4.95.