Fluid Responsive Marketo Form CSS

[Dave_Roberts]

I've seen form styling come up a few times in the community and wanted to do my part to post some basic CSS that can be used as a starter to get your forms from zero-to-hero with a little copy/paste sauce. Out-of-the-box, Marketo forms "are responsive" but they leave a bit of room for improvement and my hope is to help close that gap a bit by putting together a basic CSS document as a starter and then putting it out to the community for feedback and review - together maybe we can come up with something new and shiny together  

To get the party started...

I've put together a very basic LP to host a Marketo form and the CSS code used to style that form. For starters, I've stuck to the basic fields. 

You can play along at home by grabbing the CSS at the bottom of the page and pasting it into the Custom CSS on a new form. You'll want to spin up a new form and add these field types to replicate the example linked below. You'll also want to change the form's theme (pg2) to the "Plain" (7 of 7) theme instead of the default "Simple" (1 of 7). Then, just copy/paste the CSS from the link below into the Custom CSS dialog box (pg.2 Form Editor, purple gear icon on right).

1) text field

2) email field

3) select field

4) textarea

5) checkboxes - note: not the "checkbox" field - checkboxes will display text to the right of the input without the need for add'l CSS to try and force a "checkbox" field to do the same.

6) radio buttons

7) submit button

Here's a link to the LP with the CSS code and a live example:  Fluid Form CSS - Digital Pi 

Copy. Paste. Win.

Got questions, comments, feedback or improvements? Post em' here, I'd love some feedback to help create a solid starting point for folks that are new to Marketo and/or anyone who doesn't have the resources in-house to get something basic up and running.

[Casey_Grimes]

I've had a version of this available for quite a while now that additionally honors column setups:

https://gist.github.com/cougrimes/5168524fd9365eedea16

The only visual distinction is that I put the labels on top rather than scale with 70/30 splits.

[Dave_Roberts]

This setup should allow the user to select the "labels above" OR the "labels left" options. You can work that in by adding the layout class to the form selector: .mktoForm.mktoLayoutLeft OR .mktoForm.mktoLayoutAbove (if you wanted to do something special for the labels above). 

I dig the column setup you've built in, I haven't seen it coded like that before. I'll be interested to tinker around with that CSS, thanks for sharing your code here Courtney.

[Nick_Murphy]

What's the best way to change the button color?  PS - this is awesome, thanks a million!

[Dave_Roberts]

Hey Nick,

If you look at the CSS toward the bottom, there's a section with a /* button */ label just above the responsive styles (copied below for reference). 

You'll notice a few CSS comments in there (ex. /* commented text here */ ) to help point out the individual lines of code that are related to the button styles like background color and color (text). 

There's two sets here, the top set is for the regular state of the button and the bottom is for the hover state of the button. 

To change the colors, you'll just need to replace the existing hex code with your new color code.

form.mktoForm button.mktoButton {
display: inline-block !important;
background: #1595a3 !important; /* button bg color */
color: #fff !important; /* button text color */
border:2px solid transparent !important; /* button border color */
padding: .5em 2.75em;
font-size:1.2em !important;
line-height:1.2em !important;
}
form.mktoForm button.mktoButton:hover {
background: #fff !important; /* button bg color on hover */
color: #1595a3 !important; /* button text color on hover */
border-color: #1595a3 !important; /* button border color on hover */
}

Let me know if there's anything else I can help out with as you put this together, and thanks for checking it out, glad it was helpful 🙂