How can I change the bottom border color of each field line?

  • Profile Image
    staceyvaughan
    Asked on June 04, 2017 at 08:38 AM

    On my theme there are border lines separting the fields and I'm trying to make them black instead of white (you can't even see them on my form) Any help would be much appreciated!

     

    https://form.jotform.us/71473464725158

     

     



    This is a re-post of a comment on Customize Your Form Using Custom CSS Codes

  • Profile Image
    Jim_R
    Answered on June 04, 2017 at 10:59 AM

    Hey Stacey, is this what you wanted to achieve?

    If so, just inject the following CSS Codes to your Form Builder:

    .form-line {

        border-bottom-color: black !important;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes

    If that's not the case, share with us a screenshot of how you wanted it to look like so we can give you the proper CSS codes if needed.

    Complete guide: How-to-Post-Screenshots-to-Our-Support-Forum 

  • Profile Image
    staceyvaughan
    Answered on June 04, 2017 at 11:09 AM

    Incredible! Thank you so very much!

    I believe there are also small lines in between the description and answer fields (Name | First Name). Any chance you could send me that code as well? I've attached an image of the default form in which I'm just trying to make all the white lines black. 

    Thanks a million!!

  • Profile Image
    Jim_R
    Answered on June 04, 2017 at 06:47 PM

    These codes should take care of that:

    .form-label:after {

      border-right: 1px solid black;

      top: 10px;

    }

    Append !important to each line if they didn't work the first time.

    Since we strive to stick with 1 topic/question per thread, if you have another followup question about a different section of your form that you want to be changed, we strongly recommend you create a new thread so we can assist you.

  • Profile Image
    sawerwe
    Answered on June 04, 2017 at 06:59 PM

    can you tell me, how can i post my question on this site

  • Profile Image
    Jim_R
    Answered on June 04, 2017 at 07:29 PM

    Just go to the page below to post a new thread:

    https://www.jotform.com/contact/ 

  • Profile Image
    staceyvaughan
    Answered on June 06, 2017 at 07:14 AM

    Thanks again for your help Jim! One last question, how wold I add a black border around the entire form? Every time I try and add one it doesn't seem to work. Thanks again!

  • Profile Image
    ashwin_d
    Answered on June 06, 2017 at 08:49 AM

    Hello staceyvaughan,

    Please inject the following custom css code in your form to show border around form:

    .supernova .form-all, .form-all {

        background-color: rgb(255, 255, 255);

        border: 1px solid black !important;

        border-radius: 5px;

        padding: 10px;

    }

    The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Hope this helps.

    Do get back to us if you need any other changes.

    Thank you!

  • Profile Image
    staceyvaughan
    Answered on June 06, 2017 at 08:24 PM

    Thanky ou so much! That worked like a charm! Two last things, for some reason I cannot seem to change the input color for the Name field.

    Also, is there a code to stop the page from extending so long on my shopify page? I used the embedded code but for some reason the page is never ending....https://www.rsvppaperco.com/pages/wholesale

     

    Thanks so much again in advance!

  • Profile Image
    Chriistian
    Answered on June 06, 2017 at 10:18 PM

    To change the input color for the Name field, please inject this custom CSS on your form:

    input#first_9 {

        color: rgba(0,0,0,0.6);

    }

    input#last_9 {

        color: rgba(0,0,0,0.6);

    }

    Here's the result:

     

    Regarding the issue on page extending so long on your Shopify page, I have moved it to a separate thread. You can find it here: https://www.jotform.com/answers/1165645. We will attend to your concern there shortly.

    Cheers.