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

  • Profile Image
    jfmcparts
    Asked on October 08, 2017 at 04: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?
  • Profile Image
    Kevin_G
    Answered on October 08, 2017 at 06: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. 

  • Profile Image
    jfmcparts
    Answered on October 09, 2017 at 04:43 PM
    Will try injecting CSS code you provided when we get a chance, thanks much for help.
    FP
    ________________________________
    ...
  • Profile Image
    jfmcparts
    Answered on October 11, 2017 at 06: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
    ________________________________
    ...
  • Profile Image
    Kevin_G
    Answered on October 11, 2017 at 08:44 PM

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

    15077690021.png

    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. 

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