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 to Use CSS Code to Change One Field

    Asked by intranet.admin on May 27, 2014 at 02:04 PM
    Please can you give me an example of the CSS code to change one field
  • Profile Image
    JotForm Support

    Answered by Welvin on May 27, 2014 at 02:14 PM

    Hi,

    Here's an example custom CSS codes:

    input[type=number] {

    width: 50px;

    }

    This would change the width of the number fields. Example: http://www.jotformpro.com/form/41465886822970

    If you require any further assistance, feel free to contact us.

    Thanks

  • Profile Image

    Answered by intranet.admin on May 27, 2014 at 03:40 PM

    Please can you tell me if you can change specific fields, and if so examples of how.

  • Profile Image

    Answered by Cesar on May 27, 2014 at 04:49 PM

    You can change "customize" specific fields. But to answer your question better. Kindly elaborate further on what you are specifically trying to achieve. 

    As my colleague showcased on his response, you may use the Inspect Element feature on on Google Chrome or FireFox to obtain the currently used code on your form. This way you may modify it as needed and inject it using the Inject CSS Code feature to change specific fields.

    Please review this guide for more information:

    -How-to-Inject-Custom-CSS-Codes

    You can also find more examples on field customization here:

    -Customize-your-Form-using-Custom-CSS-Codes

    Thank you

  • Profile Image

    Answered by intranet.admin on May 27, 2014 at 05:54 PM

    Please can you give me an example of how to set the width of a particular field. In the example above, it is for field type number not a specific named field. (and how do I find the field ID please ?)

    input[type=number] {

    width: 50px;

    }

     

    kind regards

    Richard

  • Profile Image
    JotForm Support

    Answered by jonathan on May 27, 2014 at 07:12 PM

    Hi Richard,

    I suggest reviewing this JotForm user guides also

    1. -How-to-find-Field-IDs-Names


     

    2. -How-to-apply-custom-CSS-to-a-particular-field

     

    If you tell us also which among your forms you need a field width customized, we will help you do it. Please tell us the form URL.

     

    Thanks.

  • Profile Image

    Answered by intranet.admin on May 28, 2014 at 04:37 AM

    Oh dear, this question has been moved from the original thread and lost its context! The subject was Congurable List widget. I would like for example to set the width of a particualr field within the widget. I now know haow to do it for all 'number' types (see above), but can't find in any of the links supplied haow to do it for a specific field within the Congurable List.

     

    Please help!

  • Profile Image
    JotForm Support

    Answered by NeilVicente on May 28, 2014 at 05:33 AM

    These fields do not have ID's, only classes on their parent column (<td>). Judging from your own CSS used in the widget, I think you are doing well when it comes to getting the right CSS selector.

    If you're still having issues, may I ask which specific field in the widget do you want to customize with CSS?

  • Profile Image

    Answered by RaveWolf on May 28, 2014 at 09:35 AM

    The links and references are awesome.

    Can't wait to get home and start coding.

     

    Thanks for asking the question, and thanks to all for your answers.