customize form tabs widget

  • testosteron
    Asked on December 11, 2018 at 2:50 PM

    Customized the form tabs widget by using an image as tab. Tried to achieve to have only the first page tab on all pages visible like a single home button from everywhere back to the first page (hiding all other tabs with css).

    This works for the image on the first page, unfortunately on all other pages I havent been able to inject the image to the tab0.

    Used so far (test tab form):

    #tabs-list .current   {
        color : #000000 !important;
        background : url(https://www.jotform.com//images/btn_back.gif) no-repeat left #ffffff !important;
        z-index : -5;
        position : absolute;
        padding: 5px 5px 5px 50px;}

    #form-tab-2 {display:none;}
    #form-tab-3 {display:none;}
    #form-tab-4 {display:none;}
    #form-tab-5 {display:none;}
    #form-tab-6 {display:none;}
    #form-tab-7 {display:none;}
    #form-tab-8 {display:none;}
    #form-tab-9 {display:none;}

    Any idea? Help would be appreciated ...

    Thank you

    PS: Have seen www.jotform.com/answers/511635-Form-Tabs-How-to-re-style-their-appearance but could not adopt it to my form.

  • Mike_G JotForm Support
    Replied on December 11, 2018 at 6:05 PM

    We will be glad to help you with your concerns.

    Can you tell us the form you are currently working on, please?


    To my understanding, you would like to have the page tab for the first page to be visible in all pages (probably except for the first page). You would like to have it as a way for your respondents to go back to the first page anywhere on the form.

    I have created a Sample Form based on my understanding of your requirements.

    https://form.jotform.com/83446910067964

    Here are the CSS codes I used.

    ul#tabs-list li:nth-child(n+2), li#form-tab-1 div {

        display: none !important;

    }

    #form-tab-1 {

        background : url(https://www.jotform.com//images/btn_back.gif) no-repeat left #ffffff !important;

    }

    .tabs-list.default li {

        border: none !important;

    }

    .form-all ul:nth-child(2) {

        background: white !important;

        position: relative;

        top: -50px;

        z-index: 100;

        height: 100% !important;

    }

    I hope this helps. Feel free to contact us anytime if you have other questions or concerns.