Hi,
I added my mautic form to my wordpress website, using the WPMautic plugin. But I want to be able to change the look-and-feel of the form.
How and where can I adjust the css styling of the mautic form?
Kind regards,
Joost van 't Zand
Hi,
I added my mautic form to my wordpress website, using the WPMautic plugin. But I want to be able to change the look-and-feel of the form.
How and where can I adjust the css styling of the mautic form?
Kind regards,
Joost van 't Zand
Hi, I think the simplest would be to just style the form in your WP directly. Mautic forms has option to turn the original styles off.
I tried to style the form within WP directly, but the form is dynamically loaded via some javascript after that the WP page is displayed. So I can’t get it to work. Any ideas ?
How can I, by the way, turn off the original styles in the Mautic forms? I haven’t seen that option.
I’ve also tried to style it and it worked for me. Take a look
http://codepen.io/escopecz/pen/jbPJaL
The form is loaded asynchronously after your webpage is loaded. That is true. But it still inherits the CSS of your website.
Here is the CSS on/off switch
Thank you!! That works.
If you’re using Chrome, you can inspect any element by right-clicking on it and choosing ‘Inspect Element’. This will show you the expanded Javascript and the CSS tags for the element, like this:
Name
If you’re using Firefox, you can install the Firebug add-on to do the same thing.
I turn render style to “No”, I hit apply, save & close but when I come back it’s back to “Yes”
Any recommendations?
I installed mautic yesterday and WOW! Freaking awesome!
Thank you very much!
I noticed the same thing. It would be nice if this worked, because it would mean your Mautic forms could use the same styling as any other forms on your site.
However, if you use a plugin like Simple Custom CSS, it only takes a few seconds to style the Mautic form the way you want it.
I did find I had to use !important to override the original styling, e.g.
.mauticform-input {
height: 24px !important;
}
Thanks for reporting this bug, guys. I submitted a fix:
https://github.com/mautic/mautic/pull/888
It’ll be in the next version. The value is saved. It only doesn’t get back to the form. So you can save it with No option and it will render your form without styles. But you’ll have to set it to No every time you’d save the form again.
Hello,
Maybe something was lost in the translation.
I would like my form to have my theme’s style (if i understood, that can be done) but didn’t understand which option do i need to activate in “Render Style”.
My logic:
Yes - Disable css from my theme
No - Enable css from my theme
Sorry if that doesn’t make sense but i only picked this up today for my client and still wrapping my head around it…
I need to know, because it doesn’t seem to make a difference and i did the whole 10 levels of cache +/flushdns…
Thanks in advance
[quote=9752:@audiumsoundwaves]Hello,
Maybe something was lost in the translation.
I would like my form to have my theme’s style (if i understood, that can be done) but didn’t understand which option do i need to activate in “Render Style”.
My logic:
Yes - Disable css from my theme
No - Enable css from my theme
Sorry if that doesn’t make sense but i only picked this up today for my client and still wrapping my head around it…
I need to know, because it doesn’t seem to make a difference and i did the whole 10 levels of cache +/flushdns…
Thanks in advance[/quote]
It is a pity that nobody answers this important question. It is confusing, I would like to know the answers too.
Yes, my question too!
I can’t even find out what “Render Style” actually does! What does it mean? Does it apply the CSS of the Wordpress theme to the form when on “yes” or “no” or does it apply the CSS of the Mautic form instead, or the CSS input attributes for each element in the form. Totally confused. You would have thought the documentation included explanations of these things, but not unless I’ve missed it.
The only problem I’ve found so far with Mautic (a great tool!) is that while it’s a “for everyone” email marketing tool, it seems to assume everyone knows CSS. I’m actually having to teach myself CSS through trial and error to get Mautic to look good in my landing pages. It’s a painful experience.
[quote=19259:@charlescorn]Yes, my question too!
I can’t even find out what “Render Style” actually does! What does it mean? Does it apply the CSS of the Wordpress theme to the form when on “yes” or “no” or does it apply the CSS of the Mautic form instead, or the CSS input attributes for each element in the form. Totally confused. You would have thought the documentation included explanations of these things, but not unless I’ve missed it.
The only problem I’ve found so far with Mautic (a great tool!) is that while it’s a “for everyone” email marketing tool, it seems to assume everyone knows CSS. I’m actually having to teach myself CSS through trial and error to get Mautic to look good in my landing pages. It’s a painful experience.[/quote]
“for everyone”? Not really. 
That is the illusion of these open source softwares, they are free, but definitely NOT for everyone, I have come to realize that now, you need to spend either time, effort or money to make them work.
Mautic documentation is sorely lacking! I have checked, there is no explanation on what “render style” does.
The Render style will use the style sheet that the default Mautic Style form.
http://imgur.com/a/oMilH
If you disable the Render Style the form will try to get the same style. But is not 100% bullet proof.
I hope this give you some light.