A universal way of creating truly responsive forms

  • Profile Image
    Asked on March 16, 2014 at 10:26 PM

    Hi there.  I've been happily using jotform for quite some time now.  However, I'm now working on making my sites that use them more responsive.  I want my forms to be easily viewable and easily usable on whatever mobile device, as well as desktops.  


    I have had several users complain that some of my jotforms were NOT responsive, in that they viewed them and experienced the need for horizontal scroll.  That's obviously not desirable.  I don't really understand how this happened, as I've NOT been able to replicate this on any of the devices to which I have access, so I'm not providing a link connected with a specific complaint.


    However, I guess some users are experiencing this with my forms. 


    So, I guess I'm asking, how IN GENERAL do we make our forms responsive to all devices?


    What do I need to know?


    Is there something specific that needs to happen?


    Do I need to do something specific to make my forms responsive?


    Are my sentences too long?  Is that the culprit?


    In addition, some of my forms are well over a year old.  They still work just fine, as far as I know, but apparently some users are finding them non-responsive.  Do I need to . . . do something or other new with my forms, to make them more responsive?


    Is my older jotform generated code somehow not the best these days?


    Do I need to somehow generate new code?


    If you could let me know, that'd be great, thanks!


    edited to add:  the pages upon which the forms display are all their own, so the lack of responsiveness is not due to another element, thanks

  • Profile Image
    Answered on March 17, 2014 at 07:03 AM


    Our forms are already optimized for mobile views so it is built in on the forms already. However, if you'd like to customize it further, you can use this CSS code as an example and inject into your form.

    /* Smartphones (portrait and landscape) ----------- */

    @media only screen 

    and (min-device-width : 320px) 

    and (max-device-width : 480px) {

    /* custom styles */


    /* iPads (portrait and landscape) ----------- */

    @media only screen 

    and (min-device-width : 768px) 

    and (max-device-width : 1024px) {

    /* custom styles */


    With regards on your other questions, we would like to ask you to create a separate thread for further assistance as we can only answer one question/topic per thread.


  • Profile Image
    Answered on March 17, 2014 at 10:17 AM

    Thanks for the code, but I'm afraid I'm still unclear on what you're telling me here.  Meaning, if the forms are already optimized for mobile views, why do I need to customize them further?


    What precisely would the benefit of that be?


    (And I guess I'll create yet another thread for more ?s?)

  • Profile Image
    Answered on March 17, 2014 at 11:59 AM


    Our form's are indeed responsive, but for every situation, there is a need to customize resposiveness in respect to design, device or the data set - which is sometimes hard to achieve depending on the implementation environment and design constrants. 

    The code provided by Pinoytech is added to your form using this guide.

    This sample code one of the most widely used methods, and we often use similar CSS code sets to assist other form owners successfully- hence the suggestion.

    The code allows you the opportunity to format your forms to look different for different mobile devices - which do not always respond universally in resizing the width.

    Perhaps a more productive approach would be to present each your form's, and where they are meant to be embedded on your website to us, and we shall run tests on various platfors and advice on CSS codes that would make them responsive -

    For each form, please create a new thread so that they all recieve the requisite attention - its not meant to frustrate, but to increase the efficiency and effectiveness of the support process.