Help with formatting size of text boxes, etc

  • m7ickey
    Asked on September 9, 2016 at 6: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):

    Help with formatting size of text boxes, etc Image 1 Screenshot 60

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

    Help with formatting size of text boxes, etc Image 2 Screenshot 71

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

    Help with formatting size of text boxes, etc Image 3 Screenshot 82

    Here's a computer monitor showing phone:

    Help with formatting size of text boxes, etc Image 4 Screenshot 93

    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:

    Help with formatting size of text boxes, etc Image 5 Screenshot 104

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

     

    Jotform Thread 928700 Screenshot
  • Kevin Support Team Lead
    Replied on September 9, 2016 at 8: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. 

  • Kevin Support Team Lead
    Replied on September 9, 2016 at 8: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: 

    Help with formatting size of text boxes, etc Image 1 Screenshot 40

    On a mobile device:

    Help with formatting size of text boxes, etc Image 2 Screenshot 51

    Help with formatting size of text boxes, etc Image 3 Screenshot 62

    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. 

  • m7ickey
    Replied on September 10, 2016 at 2:40 PM

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

     

  • m7ickey
    Replied on September 10, 2016 at 3:01 PM

    My results differ, see below phone view:

    Help with formatting size of text boxes, etc Image 1 Screenshot 20

  • m7ickey
    Replied on September 10, 2016 at 4: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

    Help with formatting size of text boxes, etc Image 1 Screenshot 20

  • m7ickey
    Replied on September 10, 2016 at 4: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

  • Kevin Support Team Lead
    Replied on September 10, 2016 at 8:00 PM

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

    https://form.jotform.com/62484612521149 

    Help with formatting size of text boxes, etc Image 1 Screenshot 20

    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;
  • m7ickey
    Replied on September 12, 2016 at 11:10 AM

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