CSS to the Rescue! 5 Ways to Make Basic Style Changes to Your Marketo Forms

When you build a brand-new form in Marketo, that form will have default (and basic) styling. Marketo’s out-of-the-box form template gets the job done, but if you want to make any style changes to better align with your brand guidelines, you’ll need to think outside the box.

So, what’s a Marketo admin to do? CSS to the rescue! Below are 5 ways to add simple snippets of CSS code to give your forms some fresh style, along with how to add custom CSS in Marketo.

1. Make your form width fit the container.

Your landing page templates are built to be responsive. As a result, the container your form sits in will most likely move positions and the width will change depending on the size of the viewing display (desktop vs. mobile). To prevent this, you’ll want the form’s size to change along with the container.

Default form example:

The blue background color visually represents Marketo’s default form width, which in this case is smaller than this user’s viewing display.

To make the form span the width of the container, simply add some CSS that overrides the form element

and the divs with class “mktoFormCol”. Add the CSS below to the Custom CSS editor in the form editor (or to a