Mautic Form Horizontal Layout with CSS

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

Mautic settings for 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”.

choose and install Mautic theme

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:

Mautic form horizontal layout grid

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.

3 thoughts on “Mautic Form Horizontal Layout with CSS

  1. Great & thanks a lot!
    It would be great to have a “two-thirds” command to combine it with a “third” wide field.
    Cheers

Leave a Reply

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