Need the borders and outlines of input boxes to match the form theme color

  • jfmcparts
    Asked on October 8, 2017 at 4:04 PM
    Also, can you help getting back the original look of my Form? I don't mind the boxes are side x side but really want the borders/outlines around all boxes back to original which had matching blue (header color blue) borders/outlines. Can this be done?
  • Kevin Support Team Lead
    Replied on October 8, 2017 at 6:38 PM

    You can change the border color and size of your fields with the following CSS code: 

    input, textarea, select{

        border: 2px solid blue !important;

    }

    Please change the information based on the highlighted color: 

    - Green: This is the border size, you could either increase it or decrease it. 

    - Orange: This is the border color, it's currently set to basic blue, but it can be changed to any other color that you want, it may be the color name, hexadecimal or the rgb/rgba code. 

    Now, you could inject the CSS code to your form using the builder, this guide will help you doing so: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    However, injecting the code to the form will require you to re-embed your form. 

    Now you could also add the CSS code to your webpage using the <style> tags, but this change will not be reflected on the form while using its direct link. 

    Example: 

    <style type="text/css">

    .form-all input, .form-all  textarea, .form-all  select{

        border: 2px solid blue !important;

    }

    </style>

    I hope this helps. 

  • jfmcparts
    Replied on October 9, 2017 at 4:43 PM
    Will try injecting CSS code you provided when we get a chance, thanks much for help.
    FP
    ________________________________
    ...
  • jfmcparts
    Replied on October 11, 2017 at 6:43 PM
    The blue borders worked well, but notice another issue with form. Below description, it says:
    Email
    example@example.com
    Never seen this before, how do I delete this? What is this for? The form already request/mandatory, the customers email.
    thx
    FP
    ________________________________
    ...
  • Kevin Support Team Lead
    Replied on October 11, 2017 at 8:44 PM

    That example under the email field is the sub-label, it can be removed from the field settings: 

    Need the borders and outlines of input boxes to match the form theme color Image 10

    Please note that since you're using the source code of your form you will need to re-embed your form in order to take the change reflected on your website. 

    I hope this helps. 

  • jfmcparts
    Replied on October 12, 2017 at 12:43 PM
    You guys are awesome....thx!
    FP
    ________________________________
    ...