While I love Mautic - I’m a recent adopter - I’m having trouble creating good-looking landing pages.
My main problem is with styling the submit button on the forms that get embedded into the landing page. One of the essential features of a high converting landing page is a big, bright submit button. In Mautic, all I seem to be getting is a small, colorless (perhaps even transparent) button.
I’ve stumbled across some CSS modifications to the button, but these only seem to work when embedding with Javascript, and even then it only partially works. Maybe it’s clashing with my site CSS? I’m not at all knowledgeable with CSS so I’m probaby doing something wrong, possibly in the form settings (e.g. “Render Style”) although I’ve tried to change this too.
Surely, though, there should be an easier way to style the form submit buttons than by learning CSS scripting… I know there is a button you can drag and drop into the landing page but, as far as I can tell, this cannot be set up as the form submit button, because the form submit button is embedded in the form code. Again, maybe I’m missing something here.
So my question is, how do people style their form submit buttons? I’m a missing the easy way? If not, can this be added as a feature. A basic thing like changing the colour of the submit button would be a good start.
While I love Mautic - I’m a recent adopter - I’m having trouble creating good-looking landing pages.
My main problem is with styling the submit button on the forms that get embedded into the landing page. One of the essential features of a high converting landing page is a big, bright submit button. In Mautic, all I seem to be getting is a small, colorless (perhaps even transparent) button.
I’ve stumbled across some CSS modifications to the button, but these only seem to work when embedding with Javascript, and even then it only partially works. Maybe it’s clashing with my site CSS? I’m not at all knowledgeable with CSS so I’m probaby doing something wrong, possibly in the form settings (e.g. “Render Style”) although I’ve tried to change this too.
Surely, though, there should be an easier way to style the form submit buttons than by learning CSS scripting… I know there is a button you can drag and drop into the landing page but, as far as I can tell, this cannot be set up as the form submit button, because the form submit button is embedded in the form code. Again, maybe I’m missing something here.
So my question is, how do people style their form submit buttons? I’m a missing the easy way? If not, can this be added as a feature. A basic thing like changing the colour of the submit button would be a good start.
Yes, exactly that!
In fact, I somehow managed to do it!
What I did was this (in case anyone else is reading who needs this):
- select your form and click on edit
- click on fields
- click on the edit icon for your “submit” button
- click on attributes
- in “input attributes” you can paste some CSS code - I deleted what was already in there (I am assuming it was an example rather than anything important!) and pasted this code:
style=“background-color: #4CAF50;border: none; color: white; padding: 15px 32px; border-radius: 4px; text-align: center; width: 100%; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;”
I found out how to write this code by going to this page: http://www.w3schools.com/css/css3_buttons.asp
There, you can play around with the code from existing buttons until you get what you want.
I’m guessing this is only one way to do it (an ‘inline style’ rather than a stylesheet, if the above website told me correctly). I think to get hover effects, you’d need to make a stylesheet.
Can you confirm if this the correct way to do this?
(But there has to / should be an easier way!)
Boy, what hassle …
How do I … I think it’s a lot easier …
Create a form with
-Name
-Email
Then add Social Login
I believe the difference here is also that I use mautic themes … in the above case I added the Oxygen theme …
Then I create a modal type focus item and insert that created form … the result is the photo above … I think it’s easier that way …
Another thing: Do you know how to create an app in google to use here in the plugins ???
Then I would give to also have the google there in the form …
Thanks Carlos!
The thing I needed for my form was the big submit (enviar) button, not the social buttons. I was using one of the Mautic themes (I think oxygen). I’ll look into the “modal type focus item” - not sure what that is.
Sorry, I’ve no idea how to create an ap in Google. I’ve only just discovered CSS!
Confused – this is exactly my question and I’ve tried cutting and pasting this exact code in and I don’t get any changes. Chrome. Cleared cache.
when I want to modify the style of the forms I do not insert the form automatically, I do it in a “manual” way
I copy the script, the styles and the form in the same html
then I go to styles and change the values
The truth is that it is not very clear and also does not fit all the css code you want.
Is there any visual way to create a button with the full width of the Form and also change the background colors and that when the mouse passes over it, it also changes the colors?
Is there some kind of plugin or something to make this job easier? Or is there an external program to be able to do the tests and then paste it into Mautic to make it work?
Do you mean like the buttons on this page: Află cum funcţionează Serviciul de Email-Marketing aproape-GRATIS » Ionuţ Ojică ?
Those Forms are both from Mautic. The styling of the button is done within a custom Mautic template. All I have to do in Mautic is to choose the right template.
Perhaps you find relevant this post: How to style mautics generated forms? - #5 by dirk_s
I created the template, so I will stick with the template for the moment.
Thanks for answering.
What I can’t find is this path: “%mautic%/templates/MyTemplate/html/MauticFormBundle/Builder/style.html.twig` file”
Is it a file that I have to create manually and create the folders or how should I do it?
right: if the file style.html.twig does not exist, then you create the folders html/MauticFormBundle/Builder/ and then put the file inside.
But you can inspire from existing templates. I would suggest aurora . I did it like this 
Thanks, I’ll try it.