How to Style Your Mautic Forms

Worried your Mautic forms are turning away potential customers because of their dull design? Let's change that! Learn how to properly style Mautic forms.

First impressions matter. One element that often makes the first contact with potential customers are your forms. They may seem simple, but forms play a crucial role in gathering valuable customer data, generating leads, and driving conversions.

While Mautic enables you to create forms easily, the real challenge lies in designing them in a way that grabs attention and persuades users to fill them out. This is where styling comes into play. The question is: How would you do it properly?

In this comprehensive guide, we'll take you step-by-step through the technical process of styling your Mautic forms. The creative part is not covered. Let's dive in and start transforming your Mautic forms into conversion magnets.

Mautic's Inline CSS Shipping Is a Problem

Lead generation relies heavily on Mautic's functionality to include forms into your website—and Mautic let's you do that easily. However, by default, Mautic's form styling comes with inline CSS code. This is not optimal for several reasons.

• Firstly, browsers do not cache inline CSS. That means the data is transferred with every page load, consuming valuable bandwidth (your users and yours) and slowing down load times.
• Secondly, your website probably utilizes a CSS framework that already comes with pre-styled forms. The inline CSS in Mautic forms can conflict with these styles. This results in forms that visually stand out, and not necessarily in a positive way.
• Lastly, the presence of duplicate CSS code not only eats up additional bandwidth each time it's loaded, but also complicates maintenance due to redundant code. Where did I override the Mautic form styling? Why aren't my changes reflected?

Luckily, there is a solution to this problem.

How to Customize or Remove Inline CSS Styles

If you don't like the default shipping of inline CSS styles, you're not alone. Luckily, you've several options at your disposal to get rid of it—and replace it with an external stylesheet.

1. Creating a Template File for Inline Styles

The most straightforward way to style your forms is to create a template file for the inline styles in your Mautic theme.

The template file responsible for rendering the inline style is located at:

• [MAUTICROOT/themes/YOURTHEME/]html/MauticFormBundle/Builder/style.html.twig

While this approach can solve most of your styling needs, it won't necessarily address the issue that you've got multiple sources of styling and that you're delivering inline CSS to your site visitors.

2. Leveraging the Render style from Template? Setting

Each form in Mautic has a Render style from Template? setting. Setting it to No suppresses the inline CSS, giving you full control over your form's appearance outside of Mautic.

However, this method isn't foolproof. If you're aiming to eliminate inline CSS entirely, toggling it off can be a tedious task. Moreover, it's not really future-proof, as a future editor might forget to set it to 'No' during future form creation or accidentally switch it back to 'Yes'.

3. Creating an Empty style.html.twig Template File

If you want to remove inline CSS altogether: Simply create an empty style.html.twig (same location as above) template file. This allows you to manage the form styles within the CSS framework of your site.

That way you've got a single source of truth for your CSS. This my recommendation.

4. Alternative: Creating a General CSS File for the Theme

If—for some reason— you really need the CSS styling to remain within your Mautic theme, the following steps could be your solution:

• First, create a general CSS file for the theme, located at [MAUTICROOT/themes/YOURTHEME/]assets/css/styles.css.
• Next, create (an empty) style.html.twig file.
• Add only this line to it:

<link rel="stylesheet" href="{{ getAssetUrl('themes/'~template~'/css/style.css')}}" type="text/css">

What are we doing here?

We're basically replacing the inline styles with a link to an external stylesheet that belongs to our theme.

While this method still results in multiple sources of styling (meh), it does give you full control over styling and caching.

What Classes Do I Need to Style?

Mautic defines several CSS classes that you can use to target Mautic form elements specifically. To find out, which classes exist, you can

• create a form with the Blank theme, open https://mautic.mysite.com/form/ID and inspect the page's source code or
• open the file located in MAUTICROOT/app/bundles/FormBundle/Views/Builder/style.html.php or
• open this link.

All three should give you the same content, and the CSS classes defined by Mautic.

Sometimes simple styling/overriding of CSS classes isn't enough. Say, you use tailwind CSS (or any other utility-first CSS framework). Then you might not want to use Mautic's default CSS classes, but leverage the utility-first approach.

Although, not really documented, you can do it easily with Mautic's theming engine.

How to Get Full Control And Customize Every Form Element

Mautic themes are good for styling general parts like landing pages and the surroundings of a form. But you can't modify a specific form element.

(Yes, you can set custom HTML attributes to form fields in the form builder, but you're not really modifying the form elements.)

Turns out, you can't modify the form elements from the form.html.twig file. But you can modify any form element. Every.Single.One.