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

    Input field to wide on mobile devices

    Asked by EBMSmarketing on April 10, 2015 at 04:45 PM

    I've tried to inject css code to force the id to a certain width but it doesnt work. I must be missing something. 

    Probably a really simple fix. 

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

    Screenshot
    Mobile wide devices input field
  • Profile Image

    Answered by Syed on April 10, 2015 at 05:14 PM

    Hi there;

               Please inject the following CSS Code Block, for more information read our guide here on How to Inject Custom CSS.

    @media (min-width: 300px) and (max-width: 480px) { .form-textbox, .form-textarea, .form-radio-item, .form-checkbox-item, .form-captcha input, .form-spinner input, .form-error-message {width: 80% !important; box-sizing: border-box !important; }}

    Will let us know, if you have further questions on this.

     

    Have a Great Weekend!

    Thankyou,

    - Syed

  • Profile Image

    Answered by EBMSmarketing on April 10, 2015 at 05:32 PM

    Thank you! That worked for the first page of the form, but the text still runs off the page on the second half of the form...any suggestions?

     

  • Profile Image

    Answered by Syed on April 10, 2015 at 05:44 PM

    Hi there;

             I updated the answer here on this thread, please use the injected CSS Code Block;

    @media (min-width: 300px) and (max-width: 480px) { .form-radio-item, .form-checkbox-item {white-space: normal !important;}}

    http://www.jotform.com/answers/550456-Text-running-off-of-form-on-mobile

     

    Thankyou,

    - Syed

  • Profile Image

    Answered by EBMSmarketing on April 13, 2015 at 12:57 PM

    Hi there!

    I added that code to the "Inject Custom CSS" section on both of my forms, and I'm still having issues with the text running off the page. I requested that my coworkers try it and they are having the same issue. 

    Thank you!!

    Here are the two forms we're having issues with:

    http://form.jotform.us/form/50952486850160

     

     

    http://form.jotform.us/form/50952314248151

  • Profile Image

    Answered by Syed on April 13, 2015 at 01:41 PM

    Hi there;

            Previous CSS Code Block wasn't pasted correctly, please inject the following CSS Code Block for specified Forms. Read our guide here on How to Inject Custom CSS Codes. Review the following screenshots of both forms.

    First Form (http://form.jotformpro.com/form/51025712550949):

    Injected CSS Code Block:

    @media (min-width: 300px) and (max-width: 480px) { .form-radio-item, .form-checkbox-item {white-space: normal !important;}.form-multiple-column, .form-single-column {width: 100%;}}

    Second Form (http://form.jotformpro.com/form/51025488022953):

    Injected CSS Code Block:

    @media (min-width: 300px) and (max-width: 480px) { .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header {white-space: normal !important;}}

     

    Will let us know if you need further assistance.

     

    Thanks,

  • Profile Image

    Answered by EBMSmarketing on April 13, 2015 at 02:04 PM

    Thank you! That worked :) 

  • Profile Image

    Answered by Syed on April 13, 2015 at 02:06 PM

    You're welcome, let us know, if you need further assistance, we would love our users to assist :)

     

    Thankyou,