My Form 2.0 Isn't Responsive

[Anonymous]

I read in a Marketo doc that in order for a Marketo form to be responsive, we just had to be sure to use Forms 2.0. I'm using Forms 2.0 but my form is not responding responsively. I have it on a responsive ("guided") landing page template.

The form is not completely static as it does jump down to the mobile size eventually. But what about just as I resize my window slightly? The background color and all other elements on my landing page move freely, but the form stays put (causing you to have to scroll horizontally to read the right column of the form) until it pops down to one long column when it gets to mobile size.

What am I doing wrong? How can I ensure my form is actually responding to the size of the screen like the rest of my page is doing? Or is this not possible if using Marketo forms?

Thanks for any help! I'm new at this!

Here is my work-in-progress page: Subscription Center

[Anonymous]

Anyone have any feedback on these forms? Does Marketo mean "we have an option for desktop and an option for mobile" when they say "responsive" - b/c my form is popping to a smaller size - it's just not "flowing" smaller and smaller with each resize of my screen.

Is there something I need to add to get the form to act truly responsive?

Thanks for any advice out there! I'm stuck!

[Anonymous]

Hey Allison -

Marketo offers some nice templates at templates.marketo.com. Marketers can go bring these templates right into their instance. The challenge with these templates is that some of them require html knowledge to customize, and the landing page templates are not responsive.

Check out knak.​ (www.knak.io)

Knak is a website featured on Marketo Launchpoint. With Knak, you can create "responsive" Marketo email and landing page templates in just a few minutes, no coding required. Knak is fairly new and was just introduced this year at the 2015 Marketo Summit. I have found this website to be extremely useful. They will even let you create your first email & landing page free with a valid email address and walk you through step by step on how to add it to Marketo. The full package, both email and landing pages, is pretty cheap too.

With responsive email and landing page templates, you will be able to add any form to the landing page (therefore making your form responsive). Knak provides the CSS code to make your forms look really nice, but all form editing is done from within Marketo.

The guys at Knak are extremely helpful and respond quickly to any coding or template questions. They also have "Template Thursdays" in which they update their website and add new templates.

Like I said, this might not answer your question directly, but regardless - it's a website you should definitely check out. At the very least, it will give you some solid examples of responsive email and landing page templates.

Hopefully this helps!

[Anonymous]

Thanks, Drew, for the response!

I will have to check out Knak - thanks for the heads up.

The confusing thing is that my landing page is already responsive, so even using the cool Knak templates shouldn't change what's currently going on with my form, right?

But maybe what I hear you saying is that inherently the Marketo 2.0 forms are NOT truly responsive - but can be made that way with a little CSS tweaking. Is that correct?

Thanks again! I sure appreciate your input.

[Pierce_Ujjainw3]

Thanks for the shout out Drew. Much appreciated!

[Anonymous]

From what I understand, Marketo Forms 2.0 are responsive but NOT truly responsive. Ideally, they automatically re-size and style based on the browser width. This is great, as it’s mostly done for you, however it’s not perfect. If you create a multiple column form (your example above) and then have a wide rich text area with a label or description, you may notice it not re-sizing properly at all sizes.

I would check out the Marketo Community. People usually post helpful overrides to create their own styles. I had a few articles saved and just tried to reference them, but with the release of Marketo Product Docs - it looks like most of the old articles have either been removed or moved to a different destination.

Again - hope that helps. I'm learning as I go! haha!

[Anonymous]

Ok, that's very helpful. I remember reading that if my form is a two-column one, it makes the responsiveness more difficult.

I have tried searching for overrides in the Community - but it usually ends in frustration as I'm still getting used to the new Community layout and how the searches work - and most docs that are referenced are either broken links or "works in progress...coming soon!" type things.

I'll see what I can find -- THANKS again!

[SanfordWhiteman]

Allison, here is one of the recipes: a destyled Marketo form.

However, you may find it faster to use a separate 3rd-party form template for mobile, but still send the data via a hidden Marketo form.  The Marketo Forms 2.0 API makes it very easy to set and send values with form::setValues(). This may be the best of both worlds.

[Anonymous]

Thanks, Sanford. I'll look into it!

Do you know if sending the data via a hidden Marketo forms still gives me all the functionality of a Marketo form - prefill the user's information, all the tracking, etc.? That would be crucial.

Thanks!

[SanfordWhiteman]

Yes, everything else will still work.  The difference is that the form isn't visible, so it's being used solely as a data transport mechanism -- both reading of previously filled-out fields and writing of new form field values to Marketo -- as opposed to a visual widget.