Why my form is crashing in mobile devices?

When trying to complete the form on a mobile device the form crashes and cannot be completed.

I have checked your form and I can see it works fine, the form does not crash when it is being viewed in a mobile device, but I have noticed there is a strange behavior and when you attempt to fill some of the fields in your form in a mobile device it seems to redirect to another webpage.

This is because there is a conflict with the responsiveness in your form and the menu is still active even when the menu button has not been clicked. 

The HTML element that is conflicting in the webpage when viewed in a mobile device has this class "navigation-mobileNav" and I would suggest you to check the CSS style applied to this HTML element.

Please if the issue about the form crashing when viewed in mobile devices continues on your end, let us know, we will be glad to further test your form. 

blockquote, div.yahoo_quoted { margin-left: 0 !important; border-left:1px #715FFA solid !important; padding-left:1ex !important; background-color:white !important; } Thanks so much for the feedback it sounds like you understand the problem well. Unfortunately I'm no expert at css. Would it be possible for you to provide directions step by step to fix the problem? Or if you could just replace the code that would be fantastic. Please let me know what you can do for me. Thank you!
Sent from Yahoo Mail for iPhone
...

blockquote, div.yahoo_quoted { margin-left: 0 !important; border-left:1px #715FFA solid !important; padding-left:1ex !important; background-color:white !important; }
Sent from Yahoo Mail for iPad
...

I found a possible solution to fix the problem, I'm not sure how are you embedding your form, but I can see moving the embedded code fixes the issue, currently seems like the form was embedded out of the content of your webpage, I have moved the form into the <div> HTML element with class "content" and then the form started to work fine. 

I made the change on my end through the developers tool, but unfortunately these changes are not applied nor saved to the website, here is how the form should work in a mobile device: 

Here is a screenshot of the change I made:

I would suggest you to try re-embedding your form, please try embedding it into the place shown in my screenshot above, it should work fine after that.

Hope this helps. 

Hi thanks for the information. However, my problem is that I don't know where to go to get to that page where I embed the code that you gave me. Would you be able to help me with that? Also, I wasn't totally clear on the instructions. Would you be able to try explaining one more time the steps I take?

 

1. go to xxxx

2. copy xxxx

3. paste xxxx to xxxxx

etc.

 

Thank you so much!

 

Actually I've spoken with support at squarespace. I'm integrating this form into a squarespace web page. This means I have limited access to the code. So, I can't really get to the place that you are showing me on your screen. Do you know how to properly insert a jotform into a squarespace page so that it works on mobile? This is what I'm trying to accomplish. Is this something jotform is capable of integrating into? I thought it worked with squarespace pages. 

 

thanks,

Dave

I see, since you have embedded it in Squarespace, I believe you know where you pasted the code of the form as shown on this guide: https://www.jotform.com/help/37-Adding-a-form-to-Squarespace 

Can you try to add the following code before your forms Iframe code? Example

<style>

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

.nav-wrapper{

    z-index: -1 !important;

}

}

</style>

<iframe ....

the  code of your form

></iframe>

Let us know if that helps, we will be glad to assist you.

 

so is this right? should I embed this in my page?

 

<style>@media only screen and (max-width: 480px) {.nav-wrapper{z-index: -1 !important;}}</style><iframe id="JotFormIFrame-60908895922166" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/60908895922166" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> window.handleIFrameMessage = function(e) { var args = e.data.split(":"); var iframe = false; 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); } if(window.location.href && window.location.href.indexOf("?") > -1) { var ifr = false; if (args.length > 2) { ifr = document.getElementById("JotFormIFrame-" + args[2]); } else { ifr = document.getElementById("JotFormIFrame"); } 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; } } </script>></iframe>

 

Yes, that is correct. But I would also suggest trying the method of removing the scripts in the iframe codes. In this case, you need to use the following codes only:

<iframe

      id="JotFormIFrame"

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

      allowtransparency="true"

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

      frameborder="0"

      style="width:100%;

      height:992px;

      border:none;"

      scrolling="no">

    </iframe>

you guys fixed this for me!!! Thank you very much!!!