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

    Help with formatting size of text boxes, etc

    Asked by m7ickey on September 09, 2016 at 06:32 PM

    Hi, I have created a form and tried to size the text boxes so the make sense, for example, phone needs room for 10 digits, name field for maybe 20, email 25, etc. Below is a screenshot of my form. I cleared 95% of my formatting and am here to ask for help. Everytime I try to shorten or lengthen a field I run into more problems than solutions.

    So, I want to:

    1. Shorten Name, Street, City, State & Zip text boxes  to an appropriate length for those inputs. (see 1st screenshot)

    2. Fix the phone number field, in some views its good, others it too short. Weird. I like the masking effect.

    3. do 1&2 without affecting the questions or comments space

    4. For the checkbox/list area, leave it that width so the text appears in one line, I had to change "Form Layout" "Input Width" to accomplish what I wanted but when I did that it also made the Name, Street, City, etc fields too long.

    I hope its clear what I'm trying to do, pretty much common sense things but when I make one field good=checkbox area, it affects all the others, very frustrating. Thanks in advance for any help.

    Here you see what I want my checklist to look like on a bigger screen, but all fields below that are wrong lengths, name too long, phone to short, etc (email is good):

    Here in phone view, the phone field is better, but still doesn't display all 10 digits

    In this landscape phone view, the phone field is good (weird)

    Here's a computer monitor showing phone:

    And lastly, here's what happens to my checkbox list on a phone. Before I changed the setting to make the list look good on a computer monitor, this view was just one column on a phone, after my change, this is the result, which isn't terrible but a one column list looked better:

    Thanks in advance for any and all help. My problems are holding up our website launch so I really appreciate it!

     

    Page URL:
    https://form.jotform.com/62484612521149

    Screenshot
    size text boxes boxes JotForm checkbox phone field uploads
  • Profile Image
    JotForm Support

    Answered by Kevin_G on September 09, 2016 at 08:06 PM

    I will work on the code to fix the issues you're facing on your form, it might take me some time as I have to test it on different screen resolutions, but I will get back to you as soon as possible with the needed code. 

    Thanks. 

  • Profile Image
    JotForm Support

    Answered by Kevin_G on September 09, 2016 at 08:45 PM

    Please try injecting the next CSS code to your form. 

    This code helps to increase the phone field size: 

    input#input_23_full {

        width: auto;

        max-width: none;

    }

    This one helps to decrease the name fields size: 

    div#cid_18 {

        width: 60%;

    }

    label#label_18 {

        width: 100% !important;

    }

    This is to reduce the address fields size: 

    table.form-address-table {

        width: 60% ;

    }

    And this is a responsive code that will help you to display your form properly on mobile devices: 

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

        div#cid_18 {

            width: 100%;

        }

        

        [data-type="control_phone"] .form-sub-label-container{

            width: 100% !important;

        }

        

        table.form-address-table {

            width: 100% ;

        }

        

        .form-multiple-column[data-columncount="3"] .form-checkbox-item {

            width: 50%;

        }

    }

    Finally here is how the form should look once you inject the code: 

    On a mobile device:

    Here is the link to my cloned form of yours if you want to take a look: https://form.jotform.com/62528174895973 

    This guide will help you to inject the CSS code to your form: How-to-Inject-Custom-CSS-Codes

    Hope this helps. 

  • Profile Image

    Answered by m7ickey on September 10, 2016 at 02:40 PM

    Thanks. FYI, your cloned form link doesn't work. I'll try your codes and let you know how I make out.

     

  • Profile Image

    Answered by m7ickey on September 10, 2016 at 03:01 PM

    My results differ, see below phone view:

  • Profile Image

    Answered by m7ickey on September 10, 2016 at 04:28 PM

    Hi,

    I gave up and started over. Now I only need one thing which is to get the entire phone number to appear in portrait mobile phone view. Everything else is good. Thanks. Here's the url of the new form:

    https://form.jotform.com/62536119695161

  • Profile Image

    Answered by m7ickey on September 10, 2016 at 04:41 PM

    Ok, I solved the phone view problem. Now I the only other thing is the phone view of the checkbox list. I like your result above, much "cleaner" list. If you could sent me a code to just change that, I will finally be done. Thanks

  • Profile Image
    JotForm Support

    Answered by Kevin_G on September 10, 2016 at 08:00 PM

    I have checked your form and it seems like you have deleted it: 

    https://form.jotform.com/62484612521149 

    But I found this another form that seems the one where you're working on: https://form.jotform.com/62536119695161 

    I can see you have injected this CSS code to customize the check boxes width: 

    #cid_4 span.form-checkbox-item {
    width190px !important;
  • Profile Image

    Answered by m7ickey on September 12, 2016 at 11:10 AM

    Thanks. Between what you offered and me re-doing stuff, we can consider this SOLVED!