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 I find out the ID html of a 'Free Text (HTML)' feature?

    Asked by vday on November 10, 2013 at 05:26 PM

    I'd like to customise the spaces between Free Text HTML field with a form tool (radio or checkbox buttons) for above and below the free text html tool.

    If I click on the gear box of the free text html tool, I cannot see the ID like when I open one of the form tool.

    Even better if you could advise me on the CSS code for reducing or increasing space for the free text html tool with another form tool.

    Please help. 

    Many thanks

    find checkbox css code free text html another form
  • Profile Image

    Answered by Cesar on November 10, 2013 at 06:26 PM

    You can also view the IDs of such elements, by using the Inspect Element tools on Chrome and Firefox. Additional to this you can also use the Firebug Add-On for Firefox.

     

    Google Chrome: Right-Click on an Element and select Inspect Element.

    https://cms.jotform.com/uploads/image_upload/image_upload/global/20712_inspectelement_Chrome.png

     

    Firefox: Right Click and Element and choose Inspect Element or use Inspect Element with Firebug.

    https://cms.jotform.com/uploads/image_upload/image_upload/global/20713_inspectelement_Firefox.png

     

    You can view the ID of a Free-Text Tool like in this example form that only contains a Free-Text tool:

    https://cms.jotform.com/uploads/image_upload/image_upload/global/20714_freetextcustom01.png

     

    What we will do in this example is we will make the Free-Text Tool narrower. So we need to inject the code in to the form, like so:

    To inject css code, go to Setup & Embed / Preferences / Form Styles / Inject Custom CSS

    The code we will paste to make the Free-Text Tool narrow is 

    #id_1{
    width: 350px;

    https://cms.jotform.com/uploads/image_upload/image_upload/global/20715_freetextcustom02.png

     

    Once we do this, we save the form. When we open our form again, you can see the Free-Text Tool is now narrower.

    https://cms.jotform.com/uploads/image_upload/image_upload/global/20716_freetextcustom03.png

     

    Alternatively,

     You can also shrink the Free-Text Tool, by right-clicking the tool and selecting the shrink option.

    https://cms.jotform.com/uploads/image_upload/image_upload/global/20717_freetextcustom04.png

    This is how the Free-Text Tool will look like. 

    https://cms.jotform.com/uploads/image_upload/image_upload/global/20718_freetextcustom05.png

     

    Hope this help. If you need further support. Let us know. Thank you.