How to Create Responsive Marketo Forms

Marketo forms, by default, have set widths for many elements including all the form fields, labels and even the form itself. If you’re embedding your form in a responsive landing page, you might want to make the form fully responsive as well. With a bit of CSS, you can make your one-column and two-column Marketo forms look great on every device.

Single Column Forms

Single column forms are easy to make responsive. All you have to do is override some pixel widths with percentage widths. Here’s a breakdown of what elements have to be updated. If you just want to copy and paste the final code click here to jump to the final CSS.

Change the form width to a percentage

Marketo will give the form a fixed pixel width by default, so the first step is to switch the width of the form to a percentage. I usually change the form width to 100% and define the container width for the form in the landing page template.

.mktoForm {
  width:100% !important;
}

Tip: Make sure you don’t leave out the !important declaration. Since Marketo adds width as an inline style to the form tag, this is the only way to override the inline styling.

Update .mktoFormRow, . mktoFormCol, .mktoButtonRow and .mktoFieldWrap to 100%

The next step is to update .mktoFormRow, .mktoButtonRow, . mktoFormCol and .mktoFieldWrap to 100%, like this:

.mktoFormRow, .mktoFieldWrap, .mktoFormCol, .mktoButtonRow {
  width:100%;
}

Update the form fields to a percentage

All of the form fields have a fixed pixel width as well. Just like the form element, you have to add the !important declaration for this as well to override the inlines styles Marketo outputs.

.mktoForm input[type=url], 
.mktoForm input[type=text], 
.mktoForm input[type=date], 
.mktoForm input[type=tel], 
.mktoForm input[type=email], 
.mktoForm input[type=number], 
.mktoForm textarea.mktoField, 
.mktoForm select.mktoField {
  width:100% !important;
}

Center the submit button

If you want to center the submit button on the form you can add this CSS:

.mktoButtonRow {
  text-align:center !important;
}
.mktoButtonWrap {
  margin-left:0 !important;
}

.mktoForm {
  width:100% !important;
}
.mktoFormRow, .mktoFieldWrap, .mktoFormCol, .mktoButtonRow {
  width:100%;
}
.mktoForm input[type=url], 
.mktoForm input[type=text], 
.mktoForm input[type=date], 
.mktoForm input[type=tel], 
.mktoForm input[type=email], 
.mktoForm input[type=number], 
.mktoForm textarea.mktoField, 
.mktoForm select.mktoField {
  width:100% !important;
}
.mktoButtonRow {
  text-align:center !important;
}
.mktoButtonWrap {
  margin-left:0 !important;
}

A note about field label widths

Field labels have fixed pixel widths as well. However, I usually leave it that way since it doesn’t usually impact the responsiveness of the form unless the labels are more than 300px wide. Label widths can be updated like this:

.mktoForm .mktoLabel {
  width:100% !important;
}

Two-Column Forms

Two-column forms are a bit more complicated than single column forms. I’ve tried many ways to achieve a two-column Marketo form, including adding javascript to add classes to different form elements, but I prefer the CSS method better.

Drag your form fields into two-columns in the form editor

The first step is to use the form editor to create the two-columns.

Change the form width to a percentage

.mktoForm {
  width:100% !important;
}

Update .mktoFormRow, .mktoButtonRow and .mktoFieldWrap to 100%

.mktoFormRow, .mktoFieldWrap, .mktoButtonRow {
  width:100%;
}

Update the form fields to a percentage

.mktoForm input[type=url], 
.mktoForm input[type=text], 
.mktoForm input[type=date], 
.mktoForm input[type=tel], 
.mktoForm input[type=email], 
.mktoForm input[type=number], 
.mktoForm textarea.mktoField, 
.mktoForm select.mktoField {
  width:100% !important;
}

Update the columns to a percentage width

.mktoFormCol {
  width:50%;
}

Add some padding between the two columns

.mktoFieldWrap {
  padding-right:10px !important;
  box-sizing: border-box;
}
.mktoFormCol:nth-child(even) .mktoFieldWrap {
  padding-right:0 !important;
}

Center the submit button

If you want to center the submit button on the form you can add this CSS:

.mktoButtonRow {
  text-align:center !important;
}
.mktoButtonWrap {
  margin-left:0 !important;
}

Add a media query to stack the columns on mobile

This example uses the same breakpoint as the default Marketo CSS. Feel free to change it based on your requirements.

@media only screen and (max-width: 480px) {
  .mktoFormCol {
    width:100% !important;
  }
  .mktoFieldWrap {
    padding-right:0 !important;
  }
}

The Final CSS

The final CSS for the two-column form.

.mktoForm {
  width:100% !important;
}
.mktoFormRow, .mktoFieldWrap, .mktoButtonRow {
  width:100%;
}
.mktoForm input[type=url], 
.mktoForm input[type=text], 
.mktoForm input[type=date], 
.mktoForm input[type=tel], 
.mktoForm input[type=email], 
.mktoForm input[type=number], 
.mktoForm textarea.mktoField, 
.mktoForm select.mktoField {
  width:100% !important;
}
.mktoFormCol {
  width:50%;
}
.mktoFieldWrap {
  padding-right:10px !important;
  box-sizing: border-box;
}
.mktoFormCol:nth-child(even) .mktoFieldWrap {
  padding-right:0 !important;
}
.mktoButtonRow {
  text-align:center !important;
}
.mktoButtonWrap {
  margin-left:0 !important;
}
@media only screen and (max-width: 480px) {
  .mktoFormCol {
    width:100% !important;
  }
  .mktoFieldWrap {
    padding-right:0 !important;
  }
}

Questions?

Send them to me via email, send me a tweet @jennamolby, or leave a comment