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

    Will there be future support for specific/complex fields in the new form designer?

    Asked by tadie92 on June 05, 2015 at 12:50 PM

    For example, the designer seems to apply input widths to the general form input css, and doesn't differentiate between different types of inputs. Thus the css gets applied to other inputs that don't need to be as large or small.  

    I've attached a screen shot of a time range on my form, where the individual dropdown of the time hours/minutes is too large, matching the size of regular text inputs.  I tried added css to those specific fields, and unfortunately they have the same class/id of other fields.

    I love the idea of the new designer, but little things like this make it difficult to use!

    Screenshot
    form designer new form designer CSS editor
  • Profile Image
    JotForm Support

    Answered by jonathan on June 05, 2015 at 03:42 PM

    To edit the CSS of each individual field ID# in the CSS editor of the Form Designer, double-click on the field so that the CSS editor will automatically point to that field ID#.

    See image below (click to enlarge)

    in this example, the width of the specific element was edited.

     

    Hope this answers your inquiry. Let us know if there is more we can assist you with.

    Thanks.

     

  • Profile Image

    Answered by tadie92 on June 05, 2015 at 04:41 PM

    That helps! thanks, but it still has issues because the class .form-sub-level-container is already set, as well as .form-input. That why the dropdown icon is appearing out to the right of the field.  Essentially they need specific classes for the format to be correct.  

    I guess I could go through the whole form and set widths for each element, but I'd be much easier if I only had to set it once for each type of field.

  • Profile Image
    JotForm Support

    Answered by jonathan on June 05, 2015 at 05:40 PM

    ... but I'd be much easier if I only had to set it once for each type of field.

    You can actually for each type of field... there is a class for each input type (dropdown, textbox,radio.. so on) Is this what you meant? 

     Example, if you use the browser inspector, you will see the class name

     

    so it is the same with the Form Designer CSS Editor.. you will be able to use the input type class name for the specific field.

    Thanks.

     

     

  • Profile Image

    Answered by tadie92 on June 05, 2015 at 05:54 PM

    Not quite, because I may want a separate single drop down to have a width of 300px, and the times I would only want at 50px.  Although they are both dropdowns, they should be treated differently.

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 05, 2015 at 10:35 PM

    Hi tadie92, 

     

    If you want to change a specific field's styles, you can use the ID to set the CSS styles. If you want to change a group of fields' styles,  you can use the Class Name to set the CSS styles. If you notice that you're CSS styles are not reflecting on your specific field, try to put !important on each CSS property. For more information, you can refer to this article.

     

    Do let us know if you need further assistance.

     

    Regards.

  • Profile Image

    Answered by tadie92 on June 05, 2015 at 10:55 PM

    I get that, I guess I'm trying to understand why there isn't a different class applied to different types of fields and containers.  I can certainly apply style to each element's ID, but to do that over and over 40+ times is sorta defeating the purpose.

    Maybe something to consider for future development?

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 06, 2015 at 12:25 AM

    Hi tadie92, 

     

    Currently, there are different classes for different types of fields. For example,

    time dropdown --> time-dropdown

    textbox --> form-textbox

     

    Do you mean you want that containers of different types of fields should have different classes as well? For example,

     

    container of time dropdown --> should have class time-dropdown-container

    container of textbox --> should have class textbox-container

     

    Is this what you mean? I think our development team might consider this. Please confirm if you mean the same thing.

     

    Regards

  • Profile Image

    Answered by tadie92 on June 06, 2015 at 10:28 AM

    Yes, because otherwise you have unnecessary spacing as was seen in my second post.  In addition there is another container around the entire time range itself, which also inherits the field width set in the designer.

    Ultimately though it would be great if they could integrate that into the formatting options of the designer.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by Aury on June 06, 2015 at 12:38 PM

    Absolutely, you are able to modify the all spacing, as for instance, the Date Time field can be customized every piece of elements:

    .form-line.form-line-column.form-col-1 {
       
    }

    .form-textbox {
       
    }
    #month_1 {
       
    }
    #year_1 {
       
    }
    .form-sub-label {
       
    }
    .form-label.form-label-top {
       
    }

    Let us know if we can assist you further.