Why my form embedded on Square Space page does not display properly on iPhone?

Hi,

I bought a 20 dollar form theme to use, and I have put the code on my square space website, and it looks good on a laptop. But it seems incompatible when I look at the form on an iPhone.

I did as you said, I tried getting a fresh iframe code from Jotform publish section, but it didn't work. If you go on the url 

http://www.openstart.co.uk/apply-now  on a mobile device (maybe iPad too), it looks dodgy, as the screenshot shows. Please take a look and help as I have customers who can't fill out their application forms!!

I can see this is related to a thread you recently opened: https://www.jotform.com/answers/1136177 

I would suggest you to please keep discussing your issue in one thread only, that will help us to assist you better and avoid confusion while having multiple threads about the same matter. 

Now, I have checked your webpage and I can see the issue, but it only seems to happen when the page is opened in an iPhone device, if the form is opened in Android or using the developer tools in Chrome, the form will display properly. I also testes on an iPad and noticed the form displays fine. 

The problem seems to be related to the iFrame's width, so you could try embedding your form reducing the iFrame's width, example: 

<iframe

        id="JotFormIFrame"

        onDISABLEDload="window.parent.scrollTo(0,0)"

        allowtransparency="true"

        src="https://form.jotform.com/FormID"

        frameborder="0"

        style="width:80%;

        height:4680px;

        border:none;"

        scrolling="yes">

      </iframe>

If the issue still persists, you could inject the following CSS code to your form: 

@media screen and (max-width: 667px){

    .supernova {

        width: 80%;

    }

}

This guide will help you to inject the code to your form: How-to-Inject-Custom-CSS-Codes

Hope this helps. 

Hi,

I tried both of your suggestions, neither work? It seems it just doesnt want to be compatible on an iPhone? This is very annoying as its the form I bought and want to use, what should i do?

I have checked your form and I can see you have removed the CSS code I provided: 

However, I have cloned your form and injected the code, added a background color as well to make the change visible, and it seems to work fine:

Could you please add the given code and test again? 

If it does not work, please do not remove it and let us know so we can check, actually since the embedded form does not seem to be compatible with iPhone you would need to inject the CSS code, you could also try with a different embed method: Which-Form-Embed-Code-Should-I-Use

Do let us know how it goes. 

Hi, I have done everything you said, checked it on my iPhone, and the problem is still there. I will leave it so you can check to see what is wrong! Let me know and thanks for the quick service too!

I have checked your form and I can see the iFrame still displays wider than the webpage. 

I have tried to change the iFrame's width and I can see it still displays the same so I would suggest you to try injecting some CSS code to your webpage directly. 

Inject this code: 

@media screen and (max-width: 480px){

    iframe#JotFormIFrame-71233029315346{

        width: 380px !important;

        max-width: 100%;

    }

}

Follow the steps on this guide to inject the code to your page: https://support.squarespace.com/hc/en-us/articles/205815908-Using-Code-Injection 

Please,  do note remove the code once it has been injected and let us know how it goes. 

i injected the CSS code into each section as I did not know which one was correct, but it still doesnt work? Thanks

I have reviewed your form and the code seems to be there, but it has been interpreted as text instead of CSS code. 

Although you have injected the correct code it does not work since it seems to need to <style> HTML tags. 

I have tested the given code from the Chrome's developer tools and it seems to work so once embedded it should be applied to your form as well. 

<style type="text/css">

  @media screen and (max-width: 667px){

    iframe#JotFormIFrame-71233029315346{

        width: 380px !important;

        max-width: 100%;

    }

}

</style>

Follow the steps on the guide given above about the code injection on Squarespace. 

Hi,

As you haven't mentioned which section to put the code injection in, I put it on all of them individually once and then together. It still doesnt work. It seems the form just doesnt want to fit on an iPhone. What do i do now?

Hi,

May I know if you have also followed this guide: https://www.jotform.com/help/37-Adding-a-form-to-Squarespace?

Please note that the form itself is already responsive, if you view the form's direct link on mobile devices you should be able to see it properly, here's link to it: https://form.jotformeu.com/71233029315346. Try viewing it on the iPhone. 

Now the issue is more related on how your SquareSpace handles this kind of elements or embed. The suggestions of my colleague involves you to inject custom CSS code directly in your website, CSS is the styling language use in web development/design. If you have a web designer in your end, then I suggest contacting him about this issue. 

The issue is that the height of the form is not adjusting on your website, is that correct? Unfortunately, SquareSpace can't make the iFrame to be responsive. To fully make this responsive, you'll need a web designer that can create a CSS and test it in your SquareSpace. 

Have you tried setting up a fixed height in your iFrame embed code? Below is a sample where you can find the height attribute:

<iframe scrolling="no" src="https://form.jotformeu.com/71233029315346?wmode=opaque" allowtransparency="true" data-embed="true" frameborder="0" style="width: 100%; min-height: 646px !important; border: none;" id="JotFormIFrame-71233029315346" onDISABLEDload="window.parent.scrollTo(0,0)"> </iframe>

Aside from the suggestions above, please also try the steps below:

1. First, copy the iFrame embed code AND remove the script code on it. 

Here's an example iFrame embed code:

 <iframe id="JotFormIFrame-71242503436953" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformpro.com/71242503436953" frameborder="0" style="width:100%; height:4201px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-71242503436953"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) return; switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>

Now remove the one highlighted in yellow and get the one wrapped in <iframe></iframe>. Result is:

 <iframe id="JotFormIFrame-71242503436953" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformpro.com/71242503436953" frameborder="0" style="width:100%; height:4201px; border:none;" scrolling="no"> </iframe>

Make sure to adjust the height attribute also.

2. After that, follow this guide: https://support.squarespace.com/hc/en-us/articles/206543617-Using-the-Embed-Block. Try both step 1 and step 2. For Step 2, try also using the form's direct link. 

See if the above suggestion helps. 

Hi,

I have done all of this, just tried it. None work/ look very bad on an iPhone and clearly incompatible. I think the form just doesnt sit right on a phone via square space platform. I'm happy to give you access to my details for you to try yourselves because I have tried all your suggestions, if not it's upsetting as I paid for one of your most expensive forms. If it doesnt work at the end of the day I will just have to go back to using a plain form... where do i go from here? And I dont use a website specialist or designer, I do everything for the website myself.

Best,
Amir

Dear Amir,

As far as I test your website on iPhone 6, the form looks and works great on iPhone. However, the website itself doesn't suit to the iPhone as seen below:

I do not see any issue with the form on mobile devices. I have also fulfilled and submitted your form without any problem.

As my colleague Charlie has indicated previously ".. the issue is more related to your Squarespace handles this kind of elements or embed. "

Thanks.