Re: landing page won't scroll embed-code powered form on mobile phone

Christine_LeBla
Level 3

landing page won't scroll embed-code powered form on mobile phone

I have a Marketo Landing page, and injected embed code for a form. The form built out in another application (that supports native features Marketo does not).

On desktop, this works flawlessly, form is long, requires some scrolling.

On mobile phone - no scrolling occurs. End-user would be stuck and only see the first two fields.
How can I resolve this? - Would additional code get added to the embed code script itself, or directly to the Marketo landing page (like, CSS applied near the area of where the embed code script is injected)?

 

Please advise. Thank you.

4 REPLIES 4
SanfordWhiteman
Level 10 - Community Moderator

Re: landing page won't scroll embed-code powered form on mobile phone

You must link to the LP. It’s impossible to troubleshoot browser interactions from just a description.

 

Christine_LeBla
Level 3

Re: landing page won't scroll embed-code powered form on mobile phone

I got it to work by pulling in the URL of the form via an iframe. I had to set the height of the iframe container in order for entire form to display so that it'd be compatible on mobile phone.

However, I'd like to know how a script that looks like this could possibly be pulled in through an iframe? What would the syntax look like? (mock IDs for the example)

 

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js?pre=1"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "55555555",
formId: "555-555-55555"
});
</script>

**My initial issue was just by injecting this code into the landing page (without an iframe), worked beautifully. However, not on phone view. Only displayed 2 fields, no scroll.** - If you also know of any workaround for perfecting the script to work as desired without having to go through an iframe, that would be the best user experience. - Why? Because with the iframe, after user submits form, they cannot see the thank you confirmation. They'd have to know to scroll back up to top of the iframe/page.

 

Thank you!

SanfordWhiteman
Level 10 - Community Moderator

Re: landing page won't scroll embed-code powered form on mobile phone


However, I'd like to know how a script that looks like this could possibly be pulled in through an iframe? What would the syntax look like? (mock IDs for the example)

There’s no such thing as a standalone <script> (or series of scripts) embedded as an IFRAME. IFRAMEs only contain HTML documents. Those documents may be very simple, only containing a head, title, and body plus the scripts. But there must always be a document.

 

Why? Because with the iframe, after user submits form, they cannot see the thank you confirmation. They'd have to know to scroll back up to top of the iframe/page.


That’s only true if you’re not using the Hubspot JS API to manage the confirmation message. If you use the JS API you can replace the entire IFRAME with the confirmation (or add elements to the main document, whatever).



 

Dave_Roberts
Level 10

Re: landing page won't scroll embed-code powered form on mobile phone

If you can add the form to a page and post a link I'd be happy to look into the styling to see what might be causing the scrolling issue so that you don't have to go the iframe route - that'll probably work but it's sort of a "down and dirty" way of going about it. It might save you some headaches down the line to resolve the styling issues at the form/page level.