How can I customize my tabs so that not every page break or new page is a tab?

  • minemetitiri
    Asked on January 22, 2017 at 6:03 PM

    I have a form that has tabs. But I don't want every page break to be a tab. Its an application for a program that has a lot of info. To make the form more understandable, sections have been created using the page breaks. But the sections that are part of the tab show up as numbers and they should just be under the labeled tab as a group and not tabbed as separate individual sections. Is there a CSS code I can inject to remove the tabs I don't want so that only the sections that are most important are tabbed? Currently the sections I don't want to show as individual tabs show as numbers. I want them to be under the submission tab as one, but keeping with the page breaks when the applicant is working to make it easier to understand.

     

     

    Jotform Thread 1042522 Screenshot
  • Kevin Support Team Lead
    Replied on January 22, 2017 at 8:55 PM

    You cannot move the other tabs into one single tab and they will be always shown even if you do not list them in the form tabs settings. 

    But, you can hide them and the form will work fine as well, though the other pages of the form will not be listed under the tabs they will be accessible by clicking on the next button. 

    To hide the page that you do not need, please inject this code: 

    li#form-tab-7, li#form-tab-8, li#form-tab-9 {

        display: none;

    }

    Guide: How-to-Inject-Custom-CSS-Codes

    I have also applied this code to a cloned form of yours and here is the result: https://form.jotform.com/70217658219964 

    Feel free to clone it

  • minemetitiri
    Replied on January 23, 2017 at 1:06 PM

    Thank you!

    How can I center them so that they are all on one line instead of two? The CSS code I used in the past isn't working for some reason.

    How can I customize my tabs so that not every page break or new page is a tab? Image 1 Screenshot 20

  • KadeJM
    Replied on January 23, 2017 at 3:00 PM

    On behalf of Kevin you are very welcome.

    If the css code you had used in the past isn't working then something probably changed such as the form-tab ID's aka the number at the end per say.

    Also, the form width or container can affect it drastically if condensing it or if being embedded.

     

    Try using this code instead: 

    tabs-list {

        width: 1200px !important;

        float: center;

        margin: 0 !important;

    }

     

    I've highlighted in the darker green above the extra line of css I added into it to change the width and that should force it onto one line.

     

    Updated Version of your Form:

    https://form.jotform.com/70226250491954   [clone it!]

    How can I customize my tabs so that not every page break or new page is a tab? Image 1 Screenshot 20