# How to style mautics generated forms?
**URL:** https://forum.mautic.org/t/how-to-style-mautics-generated-forms/28004
**Category:** Product Support
**Tags:** mautic-4
**Created:** [May 13, 2023, 10:35pm UTC](https://forum.mautic.org/t/how-to-style-mautics-generated-forms/28004 "2023-05-13T22:35:19Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@peter\_k](https://forum.mautic.org/u/peter_k)
#### Post date: [May 13, 2023, 10:35pm UTC](https://forum.mautic.org/t/how-to-style-mautics-generated-forms/28004/1 "2023-05-13T22:35:19Z")
**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._
---
### Author:  [@IonutOjicaDe](https://forum.mautic.org/u/IonutOjicaDe)
#### Post date: [May 13, 2023, 10:50pm UTC](https://forum.mautic.org/t/how-to-style-mautics-generated-forms/28004/2 "2023-05-13T22:50:06Z")
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?
---
### Author:  [@peter\_k](https://forum.mautic.org/u/peter_k)
#### Post date: [May 13, 2023, 10:59pm UTC](https://forum.mautic.org/t/how-to-style-mautics-generated-forms/28004/3 "2023-05-13T22:59:32Z")
> [@IonutOjicaDe](#):
>
> 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?
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.
> [@IonutOjicaDe](#):
>
> Is there another way?
That’s what I’m wondering.
---
### Author:  [@IonutOjicaDe](https://forum.mautic.org/u/IonutOjicaDe)
#### Post date: [May 14, 2023, 5:30am UTC](https://forum.mautic.org/t/how-to-style-mautics-generated-forms/28004/4 "2023-05-14T05:30:15Z")
> You can’t have two input fields next to each other without unnecessary complex css.
I did this:
by adding only this code inside the style.html.twig:
```auto
.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:
I find this ok.
---
### Author:  [@dirk\_s](https://forum.mautic.org/u/dirk_s)
#### Post date: [May 14, 2023, 8:21pm UTC](https://forum.mautic.org/t/how-to-style-mautics-generated-forms/28004/5 "2023-05-14T20:21:29Z")
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.
---
### Author:  [@peter\_k](https://forum.mautic.org/u/peter_k)
#### Post date: [May 15, 2023, 8:41am UTC](https://forum.mautic.org/t/how-to-style-mautics-generated-forms/28004/6 "2023-05-15T08:41:42Z")
> [@dirk\_s](#):
>
> Actually if you care for optimization, I wouldn’t style the Mautic forms within Mautic. That styles get “inlined”.
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.
---
### Author:  [@joeyk](https://forum.mautic.org/u/joeyk)
#### Post date: [May 15, 2023, 9:03am UTC](https://forum.mautic.org/t/how-to-style-mautics-generated-forms/28004/7 "2023-05-15T09:03:54Z")
You could actually create a template.
Or [use this](https://www.youtube.com/watch?v=xFqANArJa8Y) for designing your forms.
---
### Author:  [@dirk\_s](https://forum.mautic.org/u/dirk_s)
#### Post date: [May 15, 2023, 5:20pm UTC](https://forum.mautic.org/t/how-to-style-mautics-generated-forms/28004/8 "2023-05-15T17:20:31Z")
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)…
---
### Author:  [@diegoom](https://forum.mautic.org/u/diegoom)
#### Post date: [May 31, 2023, 6:46am UTC](https://forum.mautic.org/t/how-to-style-mautics-generated-forms/28004/9 "2023-05-31T06:46:42Z")
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?
---
### Author:  [@IonutOjicaDe](https://forum.mautic.org/u/IonutOjicaDe)
#### Post date: [May 31, 2023, 6:30pm UTC](https://forum.mautic.org/t/how-to-style-mautics-generated-forms/28004/10 "2023-05-31T18:30:58Z")
Default template used for forms by Mautic … good question ! As there is none selected by default.
For emails is blank.
---
### Author:  [@joeyk](https://forum.mautic.org/u/joeyk)
#### Post date: [June 1, 2023, 4:42am UTC](https://forum.mautic.org/t/how-to-style-mautics-generated-forms/28004/11 "2023-06-01T04:42:32Z")
You can also use a plugin for this. Its pretty straight forward:
[ ](https://www.youtube.com/watch?v=xFqANArJa8Y)
---
### Author:  [@peter\_k](https://forum.mautic.org/u/peter_k)
#### Post date: [June 16, 2023, 4:53pm UTC](https://forum.mautic.org/t/how-to-style-mautics-generated-forms/28004/12 "2023-06-16T16:53:14Z")
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:
- [How to Create a Theme for Mautic](https://audienture.com/how-to-create-a-mautic-theme/)
- [How to Style Your Mautic Forms](https://audienture.com/how-to-style-your-mautic-forms/)
---
### Author:  [@joeyk](https://forum.mautic.org/u/joeyk)
#### Post date: [June 17, 2023, 5:18am UTC](https://forum.mautic.org/t/how-to-style-mautics-generated-forms/28004/13 "2023-06-17T05:18:59Z")
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?
---
### Author:  [@system](https://forum.mautic.org/u/system)
#### Post date: [June 18, 2023, 5:19pm UTC](https://forum.mautic.org/t/how-to-style-mautics-generated-forms/28004/14 "2023-06-18T17:19:55Z")
This topic was automatically closed 36 hours after the last reply. New replies are no longer allowed.