My form is not mobile responsive.

  • fotobaren_
    Asked on March 2, 2017 at 5:25 AM

    My form is not mobile responsive Screenshot 20

    Yes that was the question. 

    Ok i will have a look at it. 

    Another question:
    Jotform is a great tool but might not be the best mobil friendly webform. When a customer was filling out the webform on her mobil, she had to go from horizontal to landscape to be able to read the information. When she did this the phone/webform deleted all the information she had added.

    After filling out the webform you can press to preview the webform before sending in. After i pressed that i wanted to make changes in the form but the webform became bigger than before and the Previous/Next fields where gone, see attached file. As you can see here the webform is bigger than what it was and makes it not possible to go forward and back.

  • liyam
    Replied on March 2, 2017 at 9:46 AM

    Hello,

    Please try adding a mobile responsive widget on your form and see if this fixes your problem.

    To do this, go to the Account Settings page and select the Form Builder Version 3.

    My form is not mobile responsive Screenshot 30 

    After going to V3, do the following steps:

    1. Edit your form.

    2. Click the Widget button which can be found next to Payment Tools, then search "Mobile Responsive".

    3. Add or drag the widget in your form.

    My form is not mobile responsive Screenshot 41

    Please let us know if the problem persists.

  • fotobaren_
    Replied on March 3, 2017 at 8:44 AM

    Tried on our privat form but as you can see when i have the phone one landscape it doesnt show all of the content in the webform. What should we do to make this work?

    My form is not mobile responsive Screenshot 20

     

  • David JotForm Support Manager
    Replied on March 3, 2017 at 12:01 PM

    I believe you are referring to this form: http://www.jotform.ca/form/62437330187253 

    Have you embed it on a webpage? I yes, please share the URL of the page where it is embedded.

    On regards of landscape view, what mobile device, and browser are you using?  I have tested in an iPhone 6 plus emulator using Safari browser, and it displays fine in landscape orientation:

    My form is not mobile responsive Screenshot 20

    Let us know if you need more help.

  • fotobaren_
    Replied on March 6, 2017 at 1:29 AM

    Hi ive tried on a samsung s7 edge cell on chrome reader. The url to the webform is here: http://www.fotobaren.no/foresporsel-privat-fotobaren/

  • Ashwin JotForm Support
    Replied on March 6, 2017 at 4:16 AM

    Hello fotobaren,

    The height of the iFrame you have used in your webpage seems to be causing this issue. Please use the following iFrame embed code and see if that solves your problem:

     <iframe id="JotFormIFrame-62437330187253" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62437330187253" frameborder="0" style="width:100%; height:10672px; 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>

     

    Hope this helps.

    Do try it out and get back to us if the issue persists.

    Thank you!

  • fotobaren_
    Replied on March 6, 2017 at 4:29 AM

    Thanks, this needs to be set in the webpage or in the form?

     

  • Ashwin JotForm Support
    Replied on March 6, 2017 at 4:44 AM

    Hello fotobaren,

    You need to remove the existing iFrame embed code which you have added in your webpage and use the code which I have shared with you.

    Thank you!

  • fotobaren_
    Replied on March 14, 2017 at 4:13 AM

    Thanks what is the code for this webform: https://eu.jotform.com/build/62177977650266

  • fotobaren_
    Replied on March 14, 2017 at 4:18 AM

    Hi again, after adding the new script it still doesnt fix it. The last item should say "Tromsø" and not "Troms.." This is landscape chrome on a samsung S7 edge. When withouth landscape the last field is gone.My form is not mobile responsive Screenshot 20

  • liyam
    Replied on March 14, 2017 at 5:03 AM

    Hello,

    This can also be an issue on how it appears on your page. It would be great if you can post here the direct link to the page. As of checking and as I think I'm getting lost on the page, I was not able to find the area where the form was embedded. 

    We'll look forward to your update on this.

    Thanks.

  • fotobaren_
    Replied on March 14, 2017 at 5:17 AM

    Hi sorry for that. 

    http://www.fotobaren.no/foresporsel/

    You press Bedrift and you will be sent to this form: https://eu.jotform.com//?formID=62177977650266
    Privat its this webform: https://eu.jotform.com//?formID=62437330187253

  • BJoanna
    Replied on March 14, 2017 at 7:31 AM

    Unfortunately, the Button Radios widget is not mobile responsive, because it is being loaded in another server.

    To resolve your issue you can set the column inside of Button Radios widget to 1 or 2.

    My form is not mobile responsive Screenshot 20

    Let us know if you need further assistance. 

  • fotobaren_
    Replied on March 29, 2017 at 7:21 AM

    Hi we get ceveral complaints from our customers that the our webforms are not mobile friendly. With the setup we have now how can we change the webform or in the webpage to make it better and more userfriendly for our customers?

    http://www.fotobaren.no/foresporsel/

    You press Bedrift and you will be sent to this form: https://eu.jotform.com//?formID=62177977650266
    Privat its this webform: https://eu.jotform.com//?formID=62437330187253

  • Ashwin JotForm Support
    Replied on March 29, 2017 at 9:15 AM

    Hello,

    I did check your form in mobile device and see that the prime issue is related to "Form Tabs" widget.

    I will work on a cloned version of your form and get back to you soon.

    Thank you!