How to determine Field ID of Text Boxes?

  • Profile Image
    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?

  • Profile Image
    Mike
    Answered on September 21, 2017 at 12:04 AM

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

    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:

  • Profile Image
    rwaldenjr
    Answered on September 21, 2017 at 01: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".

  • Profile Image
    Mike_G
    Answered on September 21, 2017 at 02: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.

  • Profile Image
    rwaldenjr
    Answered 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.

  • Profile Image
    John_Benson
    Answered on September 23, 2017 at 02: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:

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

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