Google Form embed issue (iPhone)

[swingeducation]

Hi there,

I know there was a recent thread on this topic, but as I (someone lacking advanced dev skills) need to put together a quick fix, I’m wondering if someone might be able to assist.

I’m trying to embed a Google Form (https://docs.google.com/forms/d/e/1FAIpQLSf7o9D7zy1iuIe51Rlia3LIMsq9wvIfQsud4T5FaQZQn6KPpA/viewform?usp=sf_link) into a Cornerstone page. I’ve used the “Content Area” element and dropped the Google Form embed code, and everything works fine on desktop + android mobile, but it’s not formatting properly on IOS (half the form gets cut off). I believe there is a hack for responsive iframe that solves this, but I’m unfortunately having a hard time figuring it out.

Is there any way someone might be able to walk me through the steps needed to ensure the Google Form will display properly on an iPhone? Would be very much appreciated – thank you!!

[christopher]

Hi Fahm,

This is a common issue in iFrames because of the non-responsive nature of the iFrame element. Our Cornerstone page builder does not have anything to do with the fact that the iFrame will not show responsively.

Having said that I researched and found this workaround that might be of a help:

Responsive Iframes with One Great CSS Trick

Thank you.

[swingeducation]

Thanks Christopher! Unfortunately, I’m having a hard time implementing the suggested workaround. Might you (or anyone else who has had success using it) be able to share what the steps would be to make the adjustment in Cornerstone builder? (Long story short, we’re going through a transition with our WP dev, and I ideally would like to get this responsive ASAP.)

Thank you!

[mldarshana]

Hi Fahm,

Use Raw Content element in Cornerstone and place your iFrame HTML content there.

Example:

<div class="resp-container">
    <iframe class="resp-iframe" src="https://docs.google.com/forms/d/e/1FAIpQLSf7o9D7zy1iuIe51Rlia3LIMsq9wvIfQsud4T5FaQZQn6KPpA/viewform" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>
</div>

Then add the CSS rules into your page’s CSS area.

.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

Then you can save your changes and test your page. Please make sure to clear all caches when testing your page (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

Please note that we’re only providing a guidance on how to implement certain customization or changes using Cornerstone builder. Any technical issue that may arises due to your customization, needs to be handled through a developer or service as we do not provide support for customizations.

Thanks!

[swingeducation]

Thank you! Appreciate the guidance.

[rad]

You’re most welcome!