How to make a Marketo form respond when embedded on responsive website

[Anonymous]

Hi there,

We have a responsive site in Wordpress. We've embedded Marketo forms into the site. The forms have custom CSS for styling. Right now the forms look fine on desktop but they break the view on phones. How do we modify the custom CSS for the form, the embed code, and/or the code on the CMS for the landing page, etc. to make the forms respond correctly by device? Is it a matter of inserting a class tag or something more complicated? 

I came across this thread. Is this the best way to handle it? 
https://community.marketo.com/MarketoDiscussionDetail?id=90650000000PjXkAAK

Thanks,
David

[Matt_Stone2]

You would use CSS @media queries to change the existing style IDs and classes based on the width of the device. You can learn more here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

If your site is already responsive out of the box, then it's already using set sizes that you can use as a guide. You can then either plop those into the Form 2.0 custom CSS section, or include them on your site.

[Anonymous]

Hi David,

If you are using forms 2.0 embed codes, you can make marketo forms responsive by adding css overrides and css media queries directly into the website.

The thread you mentioned touches on this but also outlines jquery steps. This is not necessary. They are for marketo landing pages where the form has been dragged and dropped.

[Anonymous]

Thanks both for the info. Given that our site is already responsive, it sounds like we have a starting point, in terms of the sizes. We have 4 forms total: one has just a single field and a button; two have six fields and a button; and one has eight fields and a button. Do you have any guidelines for me as far as how much time it would require a coder to complete this work? I was just quoted at 5-6 hours including testing but I have no sense of this kind of development. I hope to learn some CSS myself at some point; my html skills are getting better.

David

[Anonymous]

David,

Using Chrome Inspector (see your other post), I was able to code this in about 20-30 minutes. Give another hour for testing or so...but I'm pretty well-versed in MKTO so I may be faster than the average bear. Always looking for a little freelance work 🙂

[Matt_Stone2]

Jason is more accurate in the amount of time that it should take if the person is familiar with CSS. Since you already have your sizes defined, all you really need to do is set the widths of the elements based on your media queries (e.g. your standard input width might be 300px wide on desktop, but on mobile you want it to be sized 150px). 5-6 hours is pretty ridiculous... that might be what it would take you to do if you're not very well-versed in HTML or CSS.

[Anonymous]

I share Matt's opinion. Casting my like to Jason Long too. The same principles appliy to Drupal, just in case the comments can benefit the CMS users.