Fields and mobile responsiveness trouble

  • Profile Image
    muffysmaids
    Asked on February 17, 2015 at 07:24 PM

    Hi on my form the name, address, email, phone number, and text area fields are not mobile. They do not fit to the phone screen. I have looked at many forums on how to correct this. I have tried adding mobile responsive widget (even adding one to each page), checking the responsive option for the form, changing the theme to mobile, adding various custom css to the form, and different combinations of all of these to try and correct my dilemma. Currently my form has page breaks and the first page looks fine, when I move on to the second page the text area is too big and does not fit the screen and the back and next buttons are also too big. On the third page the name, address, email, phone number, submit button and back button are all too big and do not fit the screen, they are all stretched. Can anyone help me with what I should do specifically to my case? If you need any other information please let me know. Thank you

  • Profile Image
    jonathan
    Answered on February 17, 2015 at 09:21 PM

    Since you already have added the Mobile Responsive widget on the form, please try first setting to NO the Responsive Form option in Preferences.

     

    If it did not work, enable Responsive instead in the Form Designer / Form Layout option.

     

    And then re-embed the form into your website using its iframe code embed

    User guide: -Getting-the-Form-iFrame-Code

    Make sure you clear first any old script code embedded before re-embedding the iframe.

    Hope this help. Please let us know if issue persist.

     

    Thanks.

    Related user guide: https://www.jotform.com/help/311-How-to-make-forms-Mobile-Responsive

     

     

  • Profile Image
    muffysmaids
    Answered on February 18, 2015 at 12:08 AM

    I am still having trouble, when I add the iframe and view the form on a mobile device the form is now cut off and I do not see some of the fields on the first page and I also do not see the the next button so there is no way to move on.

  • Profile Image
    ashwin_d
    Answered on February 18, 2015 at 08:15 AM

    Hello muffysmaids,

    I did check your web page in my mobile device and it seems to be displayed correctly. Form is not getting cut off and the next button is also being displayed correctly. Please check the screenshot below:

     

    I would suggest you to try again and get back to us if the issue persists.

    Thank you!

  • Profile Image
    muffysmaids
    Answered on February 18, 2015 at 09:46 AM

    I edited the iframe code and set scrolling to yes and that fixed the problem of the full form showing on the first page. However the second and third pages are still messed up, they don't fit nicely and customers need to scroll horizontally. I want so they only need to scroll vertically and the fields fit the screen left to right. Is there a custom css I can add or can I edit the iframe code below to fix this? Thank you for your help. (I added the *& so code can display in the forum)

    <*&iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/50385726189162" frameborder="0" style="width:100%; height:2768px; border:none;" scrolling="yes">

    <*&script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);} 

     

  • Profile Image
    muffysmaids
    Answered on February 18, 2015 at 10:15 AM
  • Profile Image
    Ben
    Answered on February 18, 2015 at 12:28 PM

    Thank you for the screenshots.

    I am able to see the issue with the page where the name and email fields are, but not with the text area.

    I presume that the issue might be caused by the code in your jotform since not all mobile codes work nicely together - which is why my colleague Jonathan mentioned that you should turn off the responsive option.

    We would need a bit time to be able to see the exact issue here, but for now I would like to ask you to add this code:

    ul.form-section {
        max-width: 100%;
        width: 100%;
    }

    Following the steps here: Inject Custom CSS Codes, but please add it at the bottom of the other code.

    Do let us know how it goes.

  • Profile Image
    muffysmaids
    Answered on February 18, 2015 at 06:32 PM

    Injecting the code did not do anything different.