Mautic Community Forums

Form button styling - how?

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.

@charlescorn

Is that what you want to do on forms?

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

  1. select your form and click on edit
  2. click on fields
  3. click on the edit icon for your “submit” button
  4. click on attributes
  5. 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