How to style mautics generated forms?

Product Support
1

Your software
My Mautic version is: 4.4.7
My PHP version is: 8.0

Your problem
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.

2

If you would use a custom theme, with a custom content inside the “style.html.twig” file, you would use actually custom css. Right?

Would be the file size of that “style.html.twig” an issue?

I thought, just styling the classes that Mautic already provides for the form elements, is the right solution.
Is there another way?

3

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.

That’s what I’m wondering.

4

You can’t have two input fields next to each other without unnecessary complex css.

I did this:
image

by adding only this code inside the style.html.twig:

	.mauticform-stanga {
		width: 48%;
		float: left;}
	.mauticform-dreapta {
		width: 48%;
		float: right;}

	@media ( max-width: 600px ) {
		.mauticform-pagebreak-wrapper button {
			width:90%;
			margin:0 auto 20px auto;
			display:block;}

		.mauticform-stanga, .mauticform-dreapta {
			width: 90%;
			float: unset;
			text-align: center;
			margin:0 auto 20px auto;}
	}

and by using the classes inside the form fields like this:
image

I find this ok.

5

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.

1 Like
6

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.

I’d like to influence the actual HTML output.

7

You could actually create a template.
Or use this for designing your forms.

1 Like
8

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)…

9

I’m a bit new to this
And I’m on the subject of form design.
One question, by default what is the template used by Mautic?

10

Default template used for forms by Mautic … good question ! As there is none selected by default.
For emails is blank.

11

You can also use a plugin for this. Its pretty straight forward:

1 Like
12

After a lot of reading I found that it is possible to manipulate the rendering of form elements. I distilled my finding into two blog posts:

13

The article about Themes is really great and extensive a lot of new infos. Thank you for that!
Regarding the form templates (which is the topic of this thread), I didn’t see the solution, can you point me at it?

14

This topic was automatically closed 36 hours after the last reply. New replies are no longer allowed.