Hey Alison,
This is actually a silly problem with load order of the form styles that's keeping you from seeing your CSS. What's happening is that Marketo is loading the CSS you've added into the <head> of the document (at the top) and then is loading the form's CSS inline with the form (below). The way CSS works is that the last (or most bottom) style is what gets rendered on the page -- in this case it's the native Marketo Form CSS that's overriding your custom CSS.
To get your CSS to override the form's CSS (when it comes before the form's CSS) you can simply add an "!important" flag onto your rules and that'll tell the machine that even if it comes before that it's the style that should show up.
.mktoButton {
background: #ff7e21 !important;
color: #ffffff !important;
border-color: #ff7e21 !important;
box-shadow: none !important;
font-size: 0.875rem !important;
padding: 0.625rem 1.125rem !important;
line-height: 1.5 !important;
border-radius: 0.2rem !important;
font-weight: 700 !important;
font-family: 'Open Sans', sans-serif !important;
text-shadow: none !important;
}
.mktoButton:hover {
background: #ff9b54 !important;
color: #ffffff !important;
border-color: #ff9b54 !important;
}
Here's a few other tips that I noticed looking at this page:
> You probably don't want to use the Marketo Button picker, it only makes it harder to override your button styles. I usually go with the default styles and then use the Custom CSS to style up my button (so I've got more control).
> Another thing I like to make sure is setup on my forms is to use the (7of7) Plain theme. This adds the least add'l CSS to your forms and basically creates less stuff to have to override in your stylesheet.
> For what it's worth, any styles beyond the button styles that are already declared in the Marketo Form styles will need to get the !important flag as well to override those styles -- for the inputs and row and columns and stuff.
> I'll usually use the Custom CSS option on pg2 of the form editor (under the purple gear on the right side of the page) rather than the Theme CSS. The Theme CSS has to do with all the extra styles that get added when you pick 1 of the 7 themes for your form.
Hope this helps, let me know if adding those important flags doesn't clear this up and I'll take another look.
-Dave
.png)