January 19, 2017

Making Multiple Column Marketo Forms Responsive

By default, if you embed a multiple column Marketo form into a webpage the form will adopt a fixed width that will likely expand out of whatever container you put it into.

You can restyle things, to a certain degree, with the custom CSS that Marketo allows you to edit, but this only gets you so far because of the built in html structure of the Marketo forms.

Because of this, I wrote a script that does a lot of the dirty work to make Marketo forms responsive regardless of viewport size.

The Script

The script will resize any Marketo form on the page upon rendering and on window resize. It does some math to calculate how many form fields there are per row and will apply an appropriate width to those rows for any viewport size.

One note is that you also have to include a simple media query for the mobile size. Don’t have time to get into that messiness in this post though.

After Running the Script

Desktop

Mobile

Conclusion

This is just one of the many things you can achieve with the Forms 2.0 api. I have a much more complete and fleshed out script that allows you to:

  • Determine if you want the form styled
  • Specifcy button alignment and text
  • Strip out and entirely restyle the form
  • Adapt the form for a dark or light background
  • Alter radio and checkboxes styling

Comment below or contact me if you are interested in taking a look.

 

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
leonard_X Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
leonard_X
Guest
leonard_X

Really appreciate this resource. Additional issue I’m having trouble navigating on my own. I’m trying to apply this to a three-column form (ideally). Unlike above, I have 20px right padding on all the fields when displaying at full width and I’m trying to carry that over into the script you provided. I tried adding the padding as a min-width media query and also tried replicating the find form element lines in the JS (JS not being my strong suit). Nothing I’m trying seems to add the padding back into the default form. Is there any suggestion for where this adjustment… Read more »

leonard_X
Guest
leonard_X

Nvm. figured out the class on the mkto forms I was over looking to apply the fix (.mktoFieldWrap)