What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Fields and mobile responsiveness trouble

    Asked by muffysmaids 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

    Page URL:
    http://maidsofrockland.com/instant-quote/

    Mobile and responsiveness name phone number back button
  • Profile Image
    JotForm Support

    Answered by jonathan 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

    Answered by muffysmaids 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
    JotForm Support

    Answered by ashwin_d 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

    Answered by muffysmaids 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

    Answered by muffysmaids on February 18, 2015 at 10:15 AM
  • Profile Image

    Answered by Ben 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

    Answered by muffysmaids on February 18, 2015 at 06:32 PM

    Injecting the code did not do anything different.