Is a Marketo form intuitive to mobile, tablet and desktop?

Natalie_Ng
Level 2

Is a Marketo form intuitive to mobile, tablet and desktop?

Is a Marketo form intuitive to mobile, tablet and desktop? And will it automatically adjust accordingly? What happens to the font size in this case?

Especially if it is being hosted on an external website?

Thanks!

4 REPLIES 4
SanfordWhiteman
Level 10 - Community Moderator

Re: Is a Marketo form intuitive to mobile, tablet and desktop?

The answer is "somewhat responsive." It depends on which widgets (input types) you're using and where your breakpoints are: if a form is never wider than your smallest breakpoint then you have a lot less to worry about from the form itself, but of course it matters where you're placing it in the flow. A single element on a page can't make the surrounding content responsive, after all.

The best thing is to try it using your (desktop) browser's mobile/small screen emulation, like you must do with the page itself.

Grégoire_Miche2
Level 10

Re: Is a Marketo form intuitive to mobile, tablet and desktop?

Hi Natalie,

On top of Sanford's answer, you can make it fully responsive with a little CSS in your template or on your web site (for embedded forms).

-Greg

Dave_Roberts
Level 10

Re: Is a Marketo form intuitive to mobile, tablet and desktop?

I'll pile on a bit here...

Especially if you are hosting the form on an external website, you might be seeing that the Marketo form styles are pushing thru "in place of" your website's form styles. This is usually because your website form styles are loaded into the document earlier than the Marketo form styles and/or because the styles being brought in from Marketo are more local or 'specific'.

In my experience, most of the things "out of the box" with forms aren't really responsive, they're usually fixed widths that get rendered as inline styles on the form elements (and that's usually why they "override" your website/template styles).

In one way or another, you'll likely need to add some responsive or fluid widths to your form and a few of the elements, at least.

There are a ton of ways to go about this, but here's a quick look at one approach:

In most cases, you can push any of the fixed width elements to "full-width" by forcing their width to 100% - here's an example of some CSS that would make the form itself full-width (fill the container it is placed into).

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

Here's a snapshot of the code-view to get a sense of the form's architecture.

The green boxes are things that'll I'll normally enforce the 100% rule for (above). You might think to include select and textarea inputs as well.

You'll also notice the width (red underlines) that get written to the inline styles for the elements (the input and label widths are set in the Form Editor).

Screenshot_033018_034937_AM.jpg

Grégoire_Miche2
Level 10

Re: Is a Marketo form intuitive to mobile, tablet and desktop?

Hi Dave,

By default, Marketo is providing very little hooks to be able to precisely access the fields and do a very good job.

Read this Better styling of forms : yet another framework

to get some insight on how you can significantly improve the possibilities.

-Greg