How to determine Field ID of Text Boxes?

  • rwaldenjr
    Asked on September 20, 2017 at 11:35 PM

    I know how to find the Field ID (and Name) of an element on the Properties|Advanced tab. However, that doesn't show for Text boxes, and several other types of form elements. Why not? And, how else can we find them so we can create custom CSS code to adjust them?

  • Mike
    Replied on September 21, 2017 at 12:04 AM

    The IDs of the Short Text Entry (Text Box) fields should be displayed.

    How to determine Field ID of Text Boxes? Image 1 Screenshot 30

    However, it is usually easier to check the element ID/class using browser DevTools (e.g. Chrome DevTools). Right mouse click on the element and select the 'Inspect' from the context menu.

    Example:

    How to determine Field ID of Text Boxes? Image 2 Screenshot 41

  • rwaldenjr
    Replied on September 21, 2017 at 1:17 AM

    Thanks for your feedback Mike. I know DevTools are an option. I was hoping for something a little easier on the eyes and less difficult to figure out, like Field Details. Also, its not the Short Text Entry fields I'm concerned about. Its the (unlimited-size) Text Entry field, as in the "footer" text elements at the bottom of my "Contractor Registration Form B".

  • Mike_G JotForm Support
    Replied on September 21, 2017 at 2:15 AM

    If you would like to know the element ID/Class of the Texts (HTML fields) in your form, the easiest way would be is to use your browser's DevTools. I see that you are trying to create a 3 column footer in your form as you have mentioned in this thread — https://www.jotform.com/answers/1253484. I have already responded to that thread and if you have other questions about your form footer concerns, please refer to that thread.

  • rwaldenjr
    Replied on September 22, 2017 at 10:53 PM

    I actually found another method of identifying element IDs by using the Advanced CSS Editor. If you click on the CSS tab, you can hover over an element until it highlights in green, and then double-click it to see that element's ID appear on the CSS code list. In fact, its all ready for CSS code entry, making it super easy to modify.

    Clicking off of the element saves it, and clears the highlight so you can click on another element. In this way, you can identify multiple elements in succession, and add them to your CSS code. The only difficulty is that you have to be careful to select the right part of each because some are actually nested 2 and 3 elements deep.

    Hope that helps someone else who's trying to work with element IDs and CSS.

  • John_Benson
    Replied on September 23, 2017 at 2:07 AM

    You're correct, rwaldenjr, that is the easiest way for a simple form.

    Try the Advanced CSS Editor to a form with widgets, here's a demo widget form: https://form.jotform.com/72651334447962

    Here's a sample if using the Browser DevTools:

    How to determine Field ID of Text Boxes? Image 1 Screenshot 30

    Here's an example if using the Advanced CSS Editor:

    How to determine Field ID of Text Boxes? Image 2 Screenshot 41

    I hope this information helps. Contact us again if you need assistance.