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 can we find the Text element ID to apply some CSS to it?

    Asked by KarFre on April 01, 2015 at 12:20 PM
    I have the same issue on many other forms in my library.  How do I find the Text element id# for the fields I would like to shrink?
    field ID Text ID ID of Text element get ID
  • Profile Image

    Answered by Ben on April 01, 2015 at 12:41 PM

    I have moved your question to this thread since we can only have one issue / question per thread and because this might require some back and forth in regards to this - to cover everything.

    Now usually you could follow these steps: How to find Field IDs & Names

    Unfortunately the Text element would not show the the ID this way, so for it we need to do this a bit differently.

    The first option would be to go into Form Designer and then into CSS tab. Following this we should double click the Text fields that we are interested in.

     

    Each time we do so the entry on the right is created that shows us the ID of the element:

    1. one click for class
    2. double click for ID

    Now we can remove it right away if we want to, or we can leave it as it is and add the code that we want - for example, looking at the previous thread, that would be:

    width: 65%;

    If we do not want to enter the Form Designer then the best way would be to right click on the form (that is in preview) and select View page source option.

    Now this is a lot of text and presented in quite likely not as easy to follow manner so I would always suggest using CTRL+F (Search function) to locate the text that we are after.

    You can search the part of the text shown or the part of the Text element, such as class="form-html"

    In my case, I have used the text from within.

    As you can see both options have shown the same - that the id is ID_4.

    Now the # in CSS means that we are calling ID, so that is the only different that your will notice since in HTML code that we can see above that is not written.

    I hope that this helps, but do let us know if it does not and we would be happy to see how we can assist further in regards to this.