How can I find out the ID html of a 'Free Text (HTML)' feature?

  • Profile Image
    vday
    Asked 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

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