What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by staceyvaughan 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
    JotForm Support

    Answered by Jim_R 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

    Answered by staceyvaughan 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
    JotForm Support

    Answered by Jim_R 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

    Answered by sawerwe on June 04, 2017 at 06:59 PM

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

  • Profile Image
    JotForm Support

    Answered by Jim_R 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

    Answered by staceyvaughan 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
    JotForm Support

    Answered by ashwin_d 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

    Answered by staceyvaughan 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
    JotForm Support

    Answered by Chriistian 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.