Adding a border around a single form element

  • mkozak
    Asked on May 12, 2020 at 1:04 PM

    Hello! 

    In my form, I would like to add a small red border around a single choice question (added this single choice field from the Basic Form Elements). I would like the question text and options to be encompassed by the border. However, there is no option in the Single Choice Properties menu to add a border or enter custom CSS code for that particular element (like there is in a Widget Settings menu). I would not like this border applied to all single choice form elements - only particular questions should have this border. I've attached a screen shot of the question I'd like the border around (i.e. "Will you be making edits to this section today?" "Yes/No")


    Is there a way to add a border around a singular/particular form element? I've looked at your "How to Inject Custom CSS Codes" and " How to Apply Custom CSS to the Product Field"  help pages, but I'm very new to Jotform and do not have a strong coding background to make this work.


    Thanks for your help and any code you can pass my way would be helpful! 

    Jotform Thread 2318510 Screenshot
  • Niko_N
    Replied on May 12, 2020 at 3:04 PM

    Greetings,

    Thanks for reaching out!

    In addition to the CSS classes, that all the similar elements share, each field has unique ID (#) that allows to apply styling to the singular/particular form element.

    In this case, if you are referring to the form with ID 201215509779055, you can simply copy and inject the following CSS to your form:

    #id_66 {

        border : 1px solid red;

    }

    This #id_66 will grab the field "Will you be making edits to this section today?" and apply styling defined for border.

    Please give a try and let us know if you need any further assistance. We're always happy to assist!




  • mkozak
    Replied on May 12, 2020 at 3:45 PM

    Thanks Niko_N! That worked perfectly!