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 to remove an horizontal line in my form?

    Asked by InfoACTsuccess on May 20, 2016 at 02:16 AM

    Hello!

    I'm looking to achieve the same result. I'm just unsure how/where to add that CSS code. Currently, when i open the CSS section in the form design section, there is nothing in there. Do I literally just paste

    #cid_16 .form-header-group{

    border-bottom: none !important;

    }

    into the that blank space like this?

  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 20, 2016 at 02:21 AM

    The code will change depending on the field that you need to affect, try injecting this code instead: 

    #cid_4 .form-header-group{

     border-bottom: none !important;

    }

    Replace the current code that you currently have in your form with this one. 

    Do let us know if it works, if this does not work, please confirm us if this is the form in question http://www.jotform.us/form/61400626039145 if not, please provide us with the correct form. 

    We will be glad to help. 

  • Profile Image

    Answered by InfoACTsuccess on May 25, 2016 at 06:44 PM
    Hi! Thank you for the VERY SPEEDY response! I'd like to apologize for my
    very delayed response; this is a shared e-mail address and I didn't want a
    flurry of emails going at 1:20am and then I had some other things I was
    working on.
    Anyway, I tried pasting the code you provided into the "CSS" section once I
    was in the "Designer" section, but don't seem to see a change anything
    The form you reference in the initial email is the one I'm working on. If
    it's possible, I'd like to eliminate some, but not all of the horizontal
    lines. The reason for this is that in one instance, there ends up being a
    double line and in other instances, it breaks up information that I would
    like to appear grouped. Below, you'll find a screenshot showing my ideal
    structure. The red boxes would be lines I'd like to get rid of and green
    boxes are lines I'd like to keep. I also put notes about the grouping that
    I'm attempting to create. Basically, the groups are a "Header" section,
    which has a picture of the item and its name along with a description of
    the item in the sub-header. The next field is a text field prompting the
    how many the client would like to order.
    Any help, would be great! If I can't group the fields (with a line above
    and below) and remove the other lines, I think my preference would be to
    just eliminate the lines. I could likely group by adding a blank header
    section before/after the group.
    [image: Inline image 1]
    *ACT & SAT SUCCESS*
    847-461-9325
    info@actsuccess.org
    actsuccess.org
    *Test Prep Materials Request Form: **http://bit.ly/TestPrepOrderForm-1*

    *Now Shipping ACT SUCCESS: 9th Edition and SAT SUCCESS: 2nd Edition (for
    the redesigned SAT!) *
    *Test Processing: *Please allow 1-2 Business Days for processing.
    Processing may be delayed if scans are indecipherable or we are missing
    student information. Thank you!
    ...
  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 25, 2016 at 10:24 PM

    To better handle this, will be good to remove all the lines and then start to add only the desired lines where you want them to be, I think this will work better. 

    To do it you need to remove the code given above and inject this one: 

    li div {

        border-bottom: none !important;

        border-top: none !important;

    }

    Now, you will notice that all the lines will be removed so your form will be shown without those lines, to add the lines you need to follow these steps. 

    First, add a text field where you want the lines to be and then click on edit HTML button, see the image below for reference: 

    Now, paste this code that will help you to add a line <hr/> this will add one line only, in case that you want to add more than one line, simply add another <hr/> tag: 

    This is the result: 

    To remove the line, simply remove the field in the Form Builder: 

    I think this will be the best way to achieve what you want, since hide / remove only some lines will require to get their IDs and then apply the CSS code, following these steps you hide all the lines at the same time and add the needed lines only.

    Hope this will help you. 

  • Profile Image

    Answered by InfoACTsuccess on May 26, 2016 at 01:44 PM
    You're amazing! Thank you! I just tested this and it looks great! Thank you
    so much!
    *ACT & SAT SUCCESS*
    847-461-9325
    info@actsuccess.org
    actsuccess.org
    *Test Prep Materials Request Form: **http://bit.ly/TestPrepOrderForm-1*

    *Now Shipping ACT SUCCESS: 9th Edition and SAT SUCCESS: 2nd Edition (for
    the redesigned SAT!) *
    *Test Processing: *Please allow 1-2 Business Days for processing.
    Processing may be delayed if scans are indecipherable or we are missing
    student information. Thank you!
    ...
  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 26, 2016 at 01:55 PM

    First off, you're welcome. 

    I'm glad to see this solution worked as you needed, now if you need further assistance in the future, do not hesitate to contact us, we will be glad to help.