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

    Configurable List Widget: How to define the width of each field through CSS

    Asked by dariete on August 09, 2016 at 12:57 PM

    Hi, I can't figure out how to define the width of each field through CSS. Tks



    This is a re-post of a comment on How to Set Up the Configurable List Widget

    how through can't can
  • Profile Image
    JotForm Support

    Answered by BJoanna on August 09, 2016 at 02:40 PM

    Please provide us ID of the form you are working on and tell us width of which fields from your configurable list widget you want to change. 

    Looking forward to your reply.

  • Profile Image

    Answered by dariete on August 10, 2016 at 10:46 AM
    form is 52984858993380 and I would like 1g 2g 3g until +1g field to be half
    that width as they only need to accept 3 digits.
    Many thanks
    Cordiali saluti,
    Dario
    www.imoving.it
    www.facebook.com/rentebike
    (+39) 333 8249150
    P Per favore considera l’ambiente prima di stampare questa mail
    2016-08-09 20:40 GMT+02:00 JotForm :
    ...
  • Profile Image
    JotForm Support

    Answered by BJoanna on August 10, 2016 at 11:42 AM

    Thank you for providing us ID of your form and additional information about what you are trying to achieve. 

    Please add this CSS code inside of your Configurable list Custom CSS field: 

    input.stepper .col3{

        width: 10px!important;

    }

    .col3 input.stepper {

        width: 30px!important; 

    }

    .col4 input.stepper {

        width: 30px!important; 

    }

    .col5 input.stepper {

        width: 30px!important; 

    }

    .col6 input.stepper {

        width: 30px!important; 

    }

    .col7 input.stepper {

        width: 30px!important; 

    }

    .col8 input.stepper {

        width: 30px!important; 

    }

    .col9 input.stepper {

        width: 30px!important; 

    }

    After you add this code your Configurable list widget will look like this.

    Here is my form where I added mentioned code: https://form.jotform.com/62224241533950 

    Feel free to clone it

    Hope this will help. Let us know if you need further assistance.