Dave Roberts

Fluid Responsive Marketo Form CSS

Discussion created by Dave Roberts on Jul 26, 2019

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.

Outcomes