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

    How do I stop the time field from wrapping for the AM/PM part?

    Asked by wiltshs on January 15, 2017 at 02:40 PM

    The form appears to be wide enough so I don't understand why the AM/PM piece wraps around underneath. In fact, in general, using your "quick" fields is a bit of a pain because they do seem to have limited control over basic things like width (I stopped using Full Name for the same reason). Please advise, thanks!

    Page URL:
    https://form.jotformz.com/13632031648

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 15, 2017 at 09:38 PM

    Apologies for the inconveniences. 

    You could inject this CSS code to your form: 

    [data-type="control_time"]{

        width: 19%;

    }

     

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

        width: 30%;

    }

    That will display the fields properly when previewing the form: 

    Guide: How-to-Inject-Custom-CSS-Codes

    Sample Form: https://form.jotform.com/70148610526956 

    Hope this helps. 

  • Profile Image

    Answered by wiltshs on January 16, 2017 at 02:50 PM

    This was helpful thanks. But I am confused as to how to extend this approach to other fields. For example, in my form right now, I have a date field that is very, very small and therefore does not show the date. Can you elaborate on the mechanism above so it's applicable to other fields? You can see from my form, that I am trying to get the first row right so that when I repeat it, it's correct and I don't have to edit the same row 30 times (the multi-row widgets just don't offer enough configurability for conditions and calculations as far as I can see, although that would be ideal)

    From your example, it appears as if you are applying that css styling to any field of type "control time", is that right? So if I were to add any time field into the form, it would adopt that styling. And then you have somewhat arbitrarily picked 19% of the width of the form for the time data, and 30% of the width of the form for the overall control. That keeps it mobile responsive, is that the idea?

    Then how do I remove the excessive padding around fields so I can get more next to each other on a given row?

    Or if I am really making this hard and there actually is a way to use a multi-row widget while still doing totals and conditions inside each row, and across all entries, then please let me know.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 16, 2017 at 04:15 PM

    As I can understand, you need to get some fields inline, then have multiple lines of these fields, setting up the fields properly with CSS codes will take some time since some fields have different elements and you need to handle all of them to display them properly. 

    The easiest way to get your fields displayed as you want and avoid injecting a lot of CSS code will be to add the Configurable List widget, it allow you to have multiple field types displayed inline and add more rows if needed. 

    Here's the link to the widget: https://widgets.jotform.com/widget/configurable_list 

    Here's also a guide about setting up this widget that will be helpful: How-to-Set-Up-the-Configurable-List-Widget

    Hope this helps.