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

    The forms are not responsive?

    Asked by asshu on July 23, 2012 at 12:55 AM

    Just checked the forms and I like the functionality.

     

    I can see that the forms are not compatible with small screens(Mobile and ipad). My websites are responsive to small screens and I expect the form to be responsive too. Can you please help me with it?

     

    Thanks 

    responsive,mobile ipad Mobile checked
  • Profile Image
    JotForm Support

    Answered by idarktech on July 23, 2012 at 06:30 AM

    Hi,

    JotForm forms are already optimized for mobile phones. We generate optimized versions of our forms for mobile devices so they are readable and easy to fill.

    You can also Inject Custom CSS codes to your forms or download your form's source code and customize it in anyway you want.

    Feel free to contact us again if you have any further questions. Thanks!

  • Profile Image

    Answered by LondonWebs on October 23, 2012 at 04:43 PM

    Ive tried to set my form width to 100% in order to make it responsive but having no luck, i can only specify a PX width, any ideas?

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on October 23, 2012 at 05:59 PM

    Hi there!

    You can set the width to 100% by injecting CSS code.

    .form-all{width:100%;} 

    Take a look at this sample form.  I have set a number of fields side by side.

    As you re-size the form you will notice how it re-positions the fields accordingly.

    Let us know if you need further assistance!

  • Profile Image

    Answered by steveschadt on March 22, 2013 at 02:44 PM

    Can you make the fields scale to fit the width?

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on March 22, 2013 at 03:25 PM

    Hi there, 

    Have you tried the CSS suggested above?

    It should be possible.

    here is an example with a few fields on the form:

    http://form.jotformpro.com/form/30805648976972?

    The CSS added to that form is:

    .form-all{width:100%;}

    .form-section{width:100%;}

    .form-line{width:100%;}

    .form-input{width:100%;}

    .form-textbox{width:100%;}

    Please give that a try and let us know if that helps!

     

  • Profile Image

    Answered by choreo on June 03, 2013 at 03:44 PM

    Can you look at the FORM I have posted here...

    http://www.choreo.com/KentResponse/PAGES/Site_RegistrationForm.html

    I have several of this type form that I need to incorporate into this Responsive Site (and others I am working on).

    On a wide computer screen the E-MAIL field stretches full width AND scales down on a mobile device? But yet the COMMENTS Text Area ADDRESS fields, etc. do not?

    The biggest problem is the Radio Button Matrix - the right side is chopped off on the right side on mobile phones?

    I am sure I am missing something simple. I have tried Injecting the CSS, but still not getting there. If I can get this one form working, I have about 50 more to style just like it. Thanks for any assistance.

    (I am using Dreamweaver CS6 on MAC).

  • Profile Image

    Answered by pinoytech on June 03, 2013 at 04:36 PM

    @choreo,

    Can you please take a look at this cloned form if this what you want to achieve in your form?

    http://www.jotformpro.com/form/31536258626963

    If yes, replace your current custom css to this codes:

    .form-all, .form-input, .form-textarea, .form-textbox, .form-sub-label-container, .form-matrix-row-headers, .form-address-table {

    width: 99% !important;

    }

    If you need further assistance, do let us know.

    Thank you!

  • Profile Image

    Answered by choreo on June 03, 2013 at 04:53 PM

    Pinoytech... getting closer!

    I have replaced the code as you suggest. When I shrink the browser window size down to a minimum size everything fits on the computer screen - looks great. but when I look at the same form on a Mobile Phone, iPad, etc. the Radio Buttons in particular (and the Address fields) are still off screen? Any ideas?

     

    The NAME, EMAIL, COMMENTS, SUBMIT BUTTON, etc. all scale down a center beautifully, but the Address and Radio Button matrix appear to have a "margin" along the left side that causes them not to center? Also the Area Code for the phone number should not scale full width.

  • Profile Image
    JotForm Support

    Answered by Welvin on June 03, 2013 at 06:44 PM

    Hi,

    Please try to inject this codes to your form:

    @media only screen and (max-device-width: 550px){

    #input_5_addr_line1, #input_5_addr_line2 {

    width: 240px !important;

    }

    #input_5_city {

    width: 100px !important;

    }

    #input_5_state {

    width: 100px !important;

    }

    .form-matrix-row-headers {

    width: 150px !important;

    }

    }

    See if this will fix the alignment issue on mobile devices. Please send us a screenshot of the changes please.

     

    Thanks

  • Profile Image

    Answered by choreo on June 04, 2013 at 12:13 AM

    Welvin,

    That appears to have solved all the field element width issues I was having.

    I can attach a ScreenShot of what this was looking like in Safari (previously) on my MacPro whith the browser window reduced to the minimum width, but that is not how it was rendering on a small Mobile Device (like my iPod Touch). After switching to the code you suggested, it now looks good on my iPod. The Radio Button descriptions now wrap to 2-lines each which brings the radio buttons into view and selectable.

    If you go to same URL online you can see if result of your new code (I am not sure how to take a screenshot from an iPOD)

    I see just one more non-related issue that I am not sure how to resolve. I notice that if I choose one or more Radio Buttons, there is no way that I can see to "deselect" those choices (in case someone clicks one by mistake)?

     

    Thanks so much for your help!

  • Profile Image
    JotForm Support

    Answered by Welvin on June 04, 2013 at 12:35 AM

    Hi,

    Great know that the codes help.

    Radio buttons are design like that. Once you have selected an item, there's no way you can deselect the item.

    You may consider using the "Checkbox" properties instead, but note that they can select multiple items with checkbox.

    Or, add the reset button to your form. But note that reset button will empty all the field entries into your form. 

    Thanks

  • Profile Image

    Answered by choreo on June 04, 2013 at 01:15 AM

    Right now I have Radio Buttons, but it appears that they can select MULTIPLE selections with the Radio Buttons as well?

  • Profile Image
    JotForm Support

    Answered by Welvin on June 04, 2013 at 01:28 AM

    Oops! Sorry for that.

    Yes, they can select multiple items since you are using Matrix Field and you only have one column. If you add more columns, there is no way they can select multiple items per "row".

    You don't want them to select Multiple Items? You may consider "Radio Button" field instead.

    Example: http://form.jotform.co/form/31540582372855

     

    Thanks

  • Profile Image

    Answered by LM360 on October 09, 2013 at 02:35 PM

    We can't get this to work on our forms, can you please advise?

     

    .form-all{width:100%;}

    .form-section{width:100%;}

    .form-line{width:100%;}

    .form-input{width:100%;}

    .form-textbox{width:100%;}

  • Profile Image

    Answered by LM360 on October 09, 2013 at 02:38 PM

    Scrap that, it works, expected it to work in the preview window and it doesn't. Thanks.

  • Profile Image
    JotForm Support

    Answered by guilledutra on October 09, 2013 at 02:42 PM

    Hi LM360,

    could you create a separated post with your request by following this link http://www.jotform.com/answers/answer.php?

    Thanks

  • Profile Image

    Answered by amandajane3000 on November 19, 2015 at 05:08 AM

    Hi, my form on my mobile phone responds down, but the background seems to respond down to far with the text and boxes overhanging. Is there any way I can fix this issue please? 

    Many thanks

  • Profile Image
    JotForm Support

    Answered by Chriistian on November 19, 2015 at 05:44 AM

    Hi amandajane3000,

     

     

    I have moved your form on a separate thread so we can better assist you and since this thread is an old thread. You can check the thread here: http://www.jotform.com/answers/707856. We will attend to your concern on that thread accordingly.

     

    If you have any further question, please feel free to contact us again by creating a new thread.

     

    Regards.