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

    Form tabs widget, image as background in the tabs (CSS)

    Asked by natupote on August 18, 2016 at 12:52 PM

    Good day and sorry my english

    Its possible to put a background image in the form tabs widget? a css code will help me a lot!

    form tabs tabs widget in background image css code and
  • Profile Image
    JotForm Support

    Answered by Jim_R on August 18, 2016 at 02:15 PM

    Hello, please allow me some time in figuring out what CSS codes to inject to use an image as a background on your form tabs :)

  • Profile Image

    Answered by natupote on August 18, 2016 at 02:24 PM

    ok! here is the form:

    https://form.jotformz.com/62006089860658

    i want put this image as tab background

  • Profile Image
    JotForm Support

    Answered by Jim_R on August 18, 2016 at 02:59 PM

    Thanks, just to confirm we're on the same page, you want that image right here, correct?

    I noticed the form was heavily customized with lots of CSS and this is what you had for the form tab itself when I cloned it:

    #tabs-list .current {

        color : #000000 !important;

        border-radius : 4px !important;

        border : 4px solid #9C9C9C !important;

        background : #ffffff !important;

        z-index : -5;

        position : absolute;

        top : 10px;

        left : 5px;

    }

    After making changes, here's the new CSS code (just replace the chunk above with this one):

    #tabs-list .current {

        color : #000000 !important;

        border-radius : 4px !important;

        border : 4px solid #9C9C9C !important;

        background : url(https://cms.jotform.com/uploads/image_upload/image_upload/Jim_R/38055_formtabs_small.jpg) no-repeat left #ffffff !important; /* for the bg image */

        z-index : -5;

        position : absolute;

        padding: 5px 5px 5px 50px; /* needed to be adjusted to make the image look nice inside */

    }

    Highlighted in red were the things I removed, green would be the ones modified/added.

    RESULT:

    BTW, the image was quite big so I had to make it smaller and re-uploaded it. Feel free to use the link that I used on my sample CSS codes :)

     

    Hope this helped.