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 customize my tabs so that not every page break or new page is a tab?

    Asked by minemetitiri on January 22, 2017 at 06: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.

     

     

    Page URL:
    https://form.jotform.com/70168027288157

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 22, 2017 at 08: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

  • Profile Image

    Answered by minemetitiri on January 23, 2017 at 01: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.

  • Profile Image
    JotForm Support

    Answered by KadeJM on January 23, 2017 at 03: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!]