Hi!
Anyone has insights on how to change the button? style, font, size, etc. using attributes? I’ve tried but failed…
You can add a CSS style statement to the input attributes, such as:
style="color: #fff;background-color:#ffa305;font-size: 15px;text-align: center;padding: 10px 28px;line-height: 1em;box-sizing: border-box;display: block;border-radius: 5px;box-shadow: none;"
2 Likes
heres an example that generates a green button, with white text in Verdana 20pt font.
style="background-color: #3A23DB;border: none;color: #ffffff;font-family: Verdana;font-size: 20px;margin: 10px 0px 10px 0px;padding: 20px 20px 20px 20px;border-radius: 5px;text-align: center;width: 80%;text-decoration: none;display: inline-block;
this code is placed as a single line into the attributes part of the submit button options
If you break it down (after each “;” ) it makes more sense, but you paste it in as a single line as above.
background-color: #3A23DB; (this is the button colour a green so replace with whatever hex code you are looking for)
border: none;
color: #ffffff; (this is the TEXT colour)
font-family: Verdana;
font-size: 20px;
margin: 10px 0px 10px 0px; (spacing on the outside of the button)
padding: 20px 20px 20px 20px; (spacing on the inside of the button around the text)
border-radius: 5px; (no border would be 0px etc)
text-align: center;
width: 80%; (if you want the button to be the width of the form then change to 100%)
text-decoration: none;
display: inline-block;
I hope this helps explains the CSS code for you.
I also struggled with this for a while.
Now I have saved the code in a text file and simply change the elements as needed and paste into the button attributes.
Hey Radu 
What I’ve done for some clients is create a custom form style. Then rather than manually add code to every button, you can just select your custom theme for the form and re-use on any form.
Take a look at a theme such as Oxygen, for example, and find the style.html.twig file in html > MauticFormBundle > Builder. You’ll see the form styles there.
So you could simply copy that entire theme, change the name, and change the form styles, and you have a brand new form theme (including your button styles) to use whenever you’d like.
UPDATE: Here’s a video I recorded on how to create a custom form style.
1 Like
Hi,
Could anybody please give me an Idea how or if I can change the size of a checkbox in a form? Would be a great help! Thanks in advance 
All this CSS text does not currently fit in the field. Could it be done in some other way?