SOLVED

CSS to Change the Button on the Form

Go to solution
Highlighted
Level 5

CSS to Change the Button on the Form

Hi all,

Does anybody have the CSS code that's required to customize the button on the form? I currently use one of the out-of-the-box options and I can change the button's color, but if there is a way to edit the button so that it closely mirrors the button on our website I'd like to try it. I like the options Marketo offers, but sometimes (depending on the style you select) the button's color changes when you hover over it. I'd just like to know the basic code needed to change the button's size and font-style/family/border-color so that it resembles our website a bit more.

I checked past communities posts but many of the links to supporting articles were broken.

Thanks, Tom

Tom Kerlin
1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Level 7

Re: CSS to Change the Button on the Form

The way I would do this is Edit Custom CSS (Edit the CSS of a Form Theme - Marketo Docs - Product Docs), then insert the code below:

.mktoForm .mktoButtonWrap.mktoDownloadButton .mktoButton {

    color: #FFFFFF !important;

    width: 205px !important;

    background: #3899f4 !important;

    background: -webkit-gradient(linear, left top, left bottom, from(#3899f4), to(#055aaa)) !important;

    background: -moz-linear-gradient(top, #3899f4, #055aaa) !important;

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3899f4', endColorstr='#055aaa') !important;

    -webkit-border-radius: 3px !important;

    -moz-border-radius: 3px !important;

    border-radius: 3px !important;

    font-size: 16px !important;

    font-style: italic !important;

    font-weight: 100 !important;

    -webkit-box-sizing: border-box !important;

    -moz-box-sizing: border-box !important;

    box-sizing: border-box !important;

    border: 0 !important;

    padding: 2px !important;

    text-align: center !important;

}

I used !important to make sure my code override Marketo's code, you may want to experiment, this is how I wanted my button to look, you can custom yours to what your website looks like. Basically I took what Marketo had for it's button CSS and custom it like above, remember each button has it's own name (shown as a class), i.e. My blue button has a class of: mktoDownloadButton, to find your name, look for <span class="mktoButtonWrap mktoXXX", mktoXXX is the button class.

View solution in original post

6 REPLIES 6
Highlighted
Level 5

Re: CSS to Change the Button on the Form

I think the CSS would need to be on the .mktoButton object.

Tom Kerlin
Highlighted
Level 7

Re: CSS to Change the Button on the Form

The way I would do this is Edit Custom CSS (Edit the CSS of a Form Theme - Marketo Docs - Product Docs), then insert the code below:

.mktoForm .mktoButtonWrap.mktoDownloadButton .mktoButton {

    color: #FFFFFF !important;

    width: 205px !important;

    background: #3899f4 !important;

    background: -webkit-gradient(linear, left top, left bottom, from(#3899f4), to(#055aaa)) !important;

    background: -moz-linear-gradient(top, #3899f4, #055aaa) !important;

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3899f4', endColorstr='#055aaa') !important;

    -webkit-border-radius: 3px !important;

    -moz-border-radius: 3px !important;

    border-radius: 3px !important;

    font-size: 16px !important;

    font-style: italic !important;

    font-weight: 100 !important;

    -webkit-box-sizing: border-box !important;

    -moz-box-sizing: border-box !important;

    box-sizing: border-box !important;

    border: 0 !important;

    padding: 2px !important;

    text-align: center !important;

}

I used !important to make sure my code override Marketo's code, you may want to experiment, this is how I wanted my button to look, you can custom yours to what your website looks like. Basically I took what Marketo had for it's button CSS and custom it like above, remember each button has it's own name (shown as a class), i.e. My blue button has a class of: mktoDownloadButton, to find your name, look for <span class="mktoButtonWrap mktoXXX", mktoXXX is the button class.

View solution in original post

Highlighted

Re: CSS to Change the Button on the Form

Hi Frank,

The code is good, but most of the time, I would rather integrate it in the landing page template, so that:

  1. All buttons appear the same on all LP's
  2. It does not depends on user to set it up at the form, it's automatically added by the LP template.

The same applies for embedded forms, only you have to set that CSS on the site.

-Greg

Highlighted
Level 7

Re: CSS to Change the Button on the Form

Sorry Greg, my approach is a bit of a hack sometimes. Tom, please do as Greg says, put it in the template rather than just on the form itself. Happy coding.

Highlighted
Level 5

Re: CSS to Change the Button on the Form

Thanks Greg,

Is it possible to upload our own custom buttons to the form?

Tom Kerlin
Highlighted

Re: CSS to Change the Button on the Form

Hi Tom,

You cannot "upload" a button in Marketo forms 2.0 editor. By uploading, you probably mean using an image button ?

Image button, are not necessarily the best approach. Remember that a significant share of email clients do not download images by default.

CSS styling would enable you do to very sophisticated things, additionally.

-Greg