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

    Sub label field, date field, and address field too long, running off page

    Asked by minemetitiri on January 29, 2016 at 01:53 PM

    I recently made a page in collaboration with someone else.

    I don't know how, but the sub labels, address, and date field are all out of whack.

     

    The sub label text in some sections are too long.

    The address and date sections are now breaking all over the page in the build page, and go completely out of the frame in the preview page.

     

    How do I fix the width of the sub label text so everything fits within the width of the text box.

    How I do I fix the address and date from running off the page.

     

     

    Thanks

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

    address field date field label sub-label CSS Custom CSS width
  • Profile Image
    JotForm Support

    Answered by Mike_G on January 29, 2016 at 10:48 PM

    Adding the CSS codes below with the help of this guide, How-to-Inject-Custom-CSS-Codes, will make your form somehow fixed. 

    .form-sub-label-container{

    width: 400px !important;

    }

    .form-sub-label-container input, .form-sub-label-container select, select{

    width: 400px !important;

    }

    label.form-sub-label{

    width: 800px !important;

    white-space: normal !important;

    }

    #id_59 label.form-sub-label, #id_19 label.form-sub-label, #id_63 label.form-sub-label, #id_78 label.form-sub-label{

    width: 440px !important;

    white-space: normal !important;

    }

    #id_25 .form-sub-label-container input, #id_25 .form-sub-label-container{

    width: 240px !important;

    }

    .form-textarea{

    width: 800px !important;

    }

    I would still suggest you check your form for any fields that's out of place or having a different width from what you would prefer to have and inform us. Kindly give us more details in describing what you would like for a specific field to look like. 

    Here's a clone version of your form that I have used for testing the codes above: https://form.jotform.com/60287929657977

    We will wait for your response. Thank you.

  • Profile Image

    Answered by minemetitiri on January 31, 2016 at 11:32 AM

    Hello Thanks for your response to my question,

     

    I saw the clone an although it fixed the issue, the fields are now appearing too large. 

    Here is a link to a similar form that is the same but for a different audience and purpose, here the form looks exactly how I want it to look. What I would prefer is that the form look exactly like this form https://form.jotform.com/60046541086148

     

    Can I edit the CSS code above to get this result for this form https://form.jotform.com/60038432878157 <---this is the one I need to fix to look like the link above.

  • Profile Image
    JotForm Support

    Answered by Mike_G on January 31, 2016 at 12:52 PM

    I have checked both forms and I can say that they are almost identical when it comes to their contents. 

    So, if you don't mind having a different the Form ID for your form (https://form.jotform.com/60038432878157)that you would like to be exactly the same as the other one(https://form.jotform.com/60046541086148), you can just clone the other form and just apply some minor changes in the clone version of the form's content. Here's a guide on how you can clone a form from using URL(https://form.jotform.com/60046541086148): How-to-Clone-an-Existing-Form-from-a-URL

    Please be reminded that when you clone a form, it will create a new form with a new form ID that is exactly as the one you have cloned.

    Let us know if that suggestion will work for you.

  • Profile Image

    Answered by minemetitiri on February 01, 2016 at 10:21 AM

    Yes, the forms are alike, yet they are not. The changes made in the other were made by someone else who has rights to change. If I clone the other to the be used as this one, then I will have to figure out where are the differences are and this is urgent and I wont have the time to redo edits.  I just need the form to be uniform in the size of the texts boxes and fonts as the example I gave in my previous response. All input  fields showing as they should in normal sized 12 pt font. The width of the date, address, and sub labels on one line and within the frame of the application form. 

    Cloning is an easy way out which does not solve my problem rather it creates new ones. I just need to figure out how to fix what was done to the form in the pic below.

    These are the specific problems I am having with this form:

    https://form.jotform.com/60038432878157 

    Here are photos of the things I am trying to fix. 

     

     

     

     

  • Profile Image
    JotForm Support

    Answered by david on February 01, 2016 at 12:24 PM

    I copied the CSS from the form with the proper layout to your version of the form and it looks to have fixed most of the issues.  Here is your version with the changes made:

    https://form.jotform.com/60315421530946

    You can clone that form to your account to have an updated version:

    http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

  • Profile Image

    Answered by minemetitiri on February 01, 2016 at 04:06 PM

    Thank you David!!

    It worked and I was able to figure out the wrap text issue with another CSS line I injected. Its back to what it should be. I appreciate your help.

  • Profile Image
    JotForm Support

    Answered by david on February 01, 2016 at 05:20 PM

    You are very welcome, happy to help.  If there is anything else we can assist you with, just let us know.

  • Profile Image

    Answered by minemetitiri on February 01, 2016 at 05:34 PM

    There is, but I posted it in another thread. My drop down selections don't show when I select options. Its the only issue I have left. Considering where I started this seems so silly. 

    I am going to see if it has to do with the font size in the DD boxes.

     

    Thanks again David.

     

  • Profile Image
    JotForm Support

    Answered by david on February 01, 2016 at 06:52 PM

    If you add this code, it should allow for the contents of your dropdowns to show when selected:

    .form-dropdown {
        min-height : 40px;
    }

    The font looks to be a little to large to fit within the boxes.

  • Profile Image

    Answered by minemetitiri on February 01, 2016 at 07:43 PM

    Hi David, I tried the injection and I decreased the font. Its still not visible.

    I also messed around the width and height of the box and still nothing.

    Additional thoughts?

     

  • Profile Image
    JotForm Support

    Answered by Charlie on February 02, 2016 at 01:16 AM

    This is most probably because of the padding set to your drop down.

    It is set to 10px, I tried 0px and the selected option now shows properly.

     

    Here's my CSS code:

    .form-dropdown {

        padding : 0px !important;

        font-size : 12.5px !important;

        min-width: 100px !important;

    }

    Here's my cloned test form: https://form.jotform.com/60320483210945. I have also set a minimum width so that the options selected displays more completely.

    Let us know if that works.

  • Profile Image

    Answered by minemetitiri on February 12, 2016 at 10:04 AM

    Thank you. That helped.