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

    How can I optimize my form to react to both desktop and mobile screens?

    Asked by IEHA on January 02, 2015 at 04:56 PM

    I have a simple form which I have developed for tracking educational units for my association's membership. It displays fine on a desktop; however, I have been getting reports the form does not display correctly on mobile devices (iphone and ipad). I was looking at some of the strings in the forum, but I am a novice through-and-through. Is there a way I can modify my form without having to spend the next month educating myself on coding? Is there a canned code I might be able to copy and paste into my form?

    Any help would be appreciated.

    Regards,

    Tim

     

    Page URL:
    http://form.jotform.us/form/42805751867161

    Mobile mobile screens Reports size ipad
  • Profile Image

    Answered by Ben on January 02, 2015 at 06:10 PM

    Hi Tim,

    I took a look at your jotform and it seems that it is already optimized for mobile with many fields, exception would be the configurable list widget and the file upload widget.

    Now for file upload widget you can add this code:

    #id_22, #id_22 iframe {
        max-width: 95%;
        overflow: hidden;
        width: 100%;
    }

    You can see here how to inject the CSS into your jotform: Inject Custom CSS Codes

    The configurable list widget however requires a bit more workaround to properly work so I would like to ask you for a bit more time to see the best code that would work for that.

    Best Regards,
    Ben

  • Profile Image

    Answered by Ben on January 02, 2015 at 06:42 PM

    Hi Tim,

    OK, this is what I ended up with which seems to be working properly for me:

    http://form.jotformpro.com/form/50017038577959

    The CSS I have added is next:

    #id_22, #id_22 iframe {
        max-width: 95%;
        overflow: hidden;
        width: 100%;
    }

    This CSS is added like the one above, following these steps: Inject Custom CSS Codes

    Now the following code would not be inserted into jotform, but instead into the Configurable List widget custom CSS code field.

    #list .col1, #list .col2, #list .col3, #list .col4, #list .col5, #list .col6 {
         float: left;
         max-width: 210px;
    }
    #list .col1 {
      width: 130px;
    }
    #list .col2 {
      width: 90px;
    }
    #list .col3 {
      width: 210px;
    }
    #list .col5 {
      width: 200px;
    }
    #list .col4 {
      width: 90px
    }
    #list > tbody > tr:first-child {
        display: none;
    }
    td.col1:before {
         content: "Title";
         display: block;
    }
    td.col2:before {
         content: "Course Type";
         display: block;
    }
    td.col3:before {
         content: "Date Attended";
         display: block;
    }
    td.col4:before {
         content: "Total CEUs";
         display: block;
    }
    td.col5:before {
         content: "Brief Description";
         display: block;
    }
    .col6.buttonsColumn {
        display: block;
        margin-bottom: 20px;
        margin-top: 10px;
        width: 100%;
    }

    If you notice, the column names are now in CSS, and we will hide the ones that are usually shown in order to be mobile compatible so if you need to alter any of them, please do so in the CSS as well (do not remove the ones in the settings as they are required to stay there even if they are no longer shown).

    Do let us know how this works for you.

    In case you are used to responding through email, I would advise to come to this thread instead as at the moment our maintenance team is working on a part of our system, which could lead to us not receiving your response sent over email. This is the link to your thread: http://www.jotform.com/answers/489742

    Best Regards,
    Ben

  • Profile Image

    Answered by IEHA on January 06, 2015 at 12:24 PM

    Ben,

    I reviewed the "insert" article, and simply did a copy/paste of the code you provided.  I then looked at the preview and noted the combined widget still seemed to push beyond the borders of the form.  Could you verify I entered the code correctly?  I am not sure if this link is what you need, but here it is again.

    http://form.jotform.us/form/42805751867161

    Thank you for your help on this.

    -Tim

  • Profile Image
    JotForm Support

    Answered by Kiran on January 06, 2015 at 02:32 PM

    I see that the second part of the code provided by my colleague was injected into the Form Custom CSS part instead of Widget's custom CSS as suggested.

    This part of the CSS code needs to be removed from here and injected to Widget's Custom CSS code. Click on the Wand icon to open the Configurable list widget wizard.

    Now, on the Configurable List widget window, scroll down to Custom CSS and paste the CSS code.

     

    Please add this code to the widget css and check if the is resolved. Please get back to us if you need any further help.

    Thanks!