landing page won't scroll embed-code powered form on mobile phone | Community
Skip to main content
Christine_LeBla
Christine_LeBla
New Participant
August 24, 2022
Question

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

  • August 24, 2022
  • 2 replies
  • 2039 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

Dave_Roberts
Dave_Roberts
New Participant
August 25, 2022

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.

SanfordWhiteman
SanfordWhiteman
New Participant
August 24, 2022

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

 

Christine_LeBla
Christine_LeBlaAuthor
New Participant
August 24, 2022

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
SanfordWhiteman
New Participant
August 24, 2022

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).

 

Terms & ConditionsAccessibility statement

Loading footer...