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’:
then click ‘Update’. It will look like this:
If you want three fields in a row, use
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:
and set the “Input attributes” to:
or for a third sized field, in the “Input attributes” use:
You can also mix and match column widths to get different layouts, like this:
5 thoughts on “Mautic Form Horizontal Layout with CSS”
Great way to customize any mautic form and use it in wordpress. Thanks a lot!
I like the theme. But is there any possiblility to insert a full line?
Great & thanks a lot!
It would be great to have a “two-thirds” command to combine it with a “third” wide field.
When installing the “Mautic Form Horizontal” error appears “The theme you tried to install is missing the following required files and thus could not be installed: html / message.html.twig”
This has been fixed in the latest version.