My Mautic version is: 4.4.7
My PHP version is: 8.0
My problem is: How can I style the forms that mautic generate?
I know/guess that I can set the stylesheet that comes with a form by creating a %mautic%/templates/MyTemplate/html/MauticFormBundle/Builder/style.html.twig file.
But can I influence how mautic renders the actual html code of a form? I’d like to get rid of mautic’s default css classes and use custom css*.
*I know that I can add css to each form element, but that is cumbersone and error prone and not future proof. Implementing style’s for mautics pre-shipped css classes is also possible but not desireable as it adds to the css file size. It feels more like a “hack”/workaround than a real solution.
By itself it’s not that big of a deal. But when you try to optimize your page for speed everything counts.
Additionally: You are a bit limited in how you actually can style your forms, because mautic ships you the rendered form. That leads to the problem that all form elements are stacked. You can’t have two input fields next to each other without unnecessary complex css.
Actually if you care for optimization, I wouldn’t style the Mautic forms within Mautic. That styles get “inlined”. Rather work with the classes and IDs of the form elements and styl them within your central CMS CSS styles, where the forms get embedded. You may still add classes to Mautic elements within Mautic, if needed.
Thanks for your answer. That’s the reason, why I want to know how you can influence the rendered forms markup. I don’t look to edit the ./templates/~theme~/html/MauticFormBundle/Builder/style.html.twig file, which—as you say—gets inlined.
Probably it depends on the skills available in the team: If the “Mautic Person™️” should style forms within Mautic, thats the way to go. If you happen to have a great “CSS artist™️” on you CMS part, they can do all the magic with a bare form sent (maybe request you to add some classes)…