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

    Configurable List not mobile responsive.

    Asked by wally44 on May 30, 2017 at 07:53 PM
    I'm not sure what the original requester was asking, but I would like to have the form work properly on a smartphone, but it is too narrow to work right with a configuration list.   The form doesn't even show up on the screen.  I was hoping it would create a horiz
  • Profile Image
    JotForm Support

    Answered by BDAVID on May 30, 2017 at 08:09 PM

    Please note that the more fields you add to the configurable list, the less responsive it will be. But, it is possible to adjust it through CSS injection. I believe that your form in question is the following: http://www.jotform.us/form/71455031507146 

    Please try injecting the following CSS code inside each Configurable List widget CSS area:

    @media only screen and (max-device-width:30em){

    table#list {width: 100% !important;}

    textbox, textarea, select{width:100% !important;}

    input[type=text] {width: 100% !important;}

    th {font-size: 10px !important;font-weight: normal !important;}

    }

    @media only screen and (max-device-width:60em){

    table#list {width: 100% !important;}

    textbox, textarea, select{width:100% !important;}

    input[type=text] {width: 100% !important;}

    th {font-size: 10px !important;font-weight: normal !important;}

    }

    Example:

    Result:

    Let us know if you need more help.

  • Profile Image

    Answered by wally44 on June 03, 2017 at 11:44 AM

    Are you telling me that if I add this css code it will adapt to the smaller width of a smartphone without affecting the results on a bigger screen?

  • Profile Image

    Answered by wally44 on June 03, 2017 at 01:50 PM

    I've tried this with no real effect I can see.   I can get my phone to see most of the form but telling it to use the desktop site, and this looks just like the normal desktop except for the fact that the layout is such that I can't see the submit button at the bottom of the page.  I've added a lot of space on the embedded page, but do I need to make the form longer?  I don't see any way to do that.

  • Profile Image
    JotForm Support

    Answered by Mike on June 03, 2017 at 04:53 PM

    Yes, the CSS should only affect the mobile view.

    Please provide us with a link to your web page with embedded form so we will be able to check the layout.

  • Profile Image

    Answered by wally44 on June 03, 2017 at 05:04 PM

    http://bapca.org/vbs_2017.htm is the web page.

     

  • Profile Image
    JotForm Support

    Answered by Mike on June 03, 2017 at 06:23 PM

    Your mobile website might be not compatible with our JS embed code. Please try to embed your forms using iFrame codes.

    Getting the form iFrame code

    Let us know if you notice any issues after adding the iFrame codes.

  • Profile Image

    Answered by wally44 on June 03, 2017 at 07:12 PM

    I changed the way jotform is put on the page using your IFrame code.  It is a little obscure as I can't see anything on the page in Xara Web Designer Premium until I display the page.  The full page looks fine, but I see only a partial form on the smaller page size when selected in my browser or phone.  I see no reformatting like the example you provided above.  It also clips the form so that much of the right is missing (as is much of the bottom of the form).  Because I can't see the page until it is formatted in the browser, I have a hard time getting it located properly on the page, too.

  • Profile Image

    Answered by wally44 on June 03, 2017 at 07:52 PM

    OK, I implemented the IFrame insertion as you suggested.  It is better and I can see the width of the form on my smartphone, but not the length.  It is cut off on the bottom.    By the way, the iframe code can be different on the smartphone because the web server a different source for narrow screens.  At the moment it is the same.   I do see the reshaped entries as you show above, but it still cuts off before the end of the form.  I've allowed a lot of space on the webpage so I don't understand how to correct the problem.

  • Profile Image
    JotForm Support

    Answered by liyam on June 03, 2017 at 11:13 PM

    Hello,

    Since the javascript code that follows right after the iframe code is not included, the height does not automatically expand. So what you need is to adjust the height setting of your iframe code:

    <iframe id="JotFormIFrame-71455031507146" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.us/71455031507146" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe>

    Please increase the height by adjusting the height setting on the style attribute to somewhere around 1100px.

    Thanks.

  • Profile Image

    Answered by wally44 on June 04, 2017 at 12:37 AM

    That works great!  Thanks for the help.

  • Profile Image
    JotForm Support

    Answered by liyam on June 04, 2017 at 01:43 AM

    Thank you for keeping us posted, wally44. We're glad that the solution worked. 

    Feel free to let us know if you have other questions or concerns. 

    Warm regards :)