Make a page tab stand out

  • boxerrebellion
    Asked on January 13, 2017 at 4:50 PM

    Hi!

    My client wants the PLACE ORDER tab on our multi-page form to stand out. Can I change the color? 

     

    Alternatively, can I add a button to each page that would skip to the last page - but is not a part of the top-level tabs? Something big that sits in an obvious place in the form itself?

    Jotform Thread 1034225 Screenshot
    Page URL: http://boxreb.com/flichia/order-online---tobacco.html
  • Support_Management Jotform Support
    Replied on January 14, 2017 at 2:26 AM

    Since your question and screenshot are showing an EITHER / OR, I only provided an answer to the first question you asked.

    My client wants the PLACE ORDER tab on our multi-page form to stand out. Can I change the color?

    To achieve this, inject the following CSS codes on the Form Tabs widget's Custom CSS section.

    Make a page tab stand out Image 1 Screenshot 30

    #form-tab-10 {

       background: red;

    }

    #form-tab-10 .liAfter {

       border-bottom-color: red;

    }

    RESULT: 

    Make a page tab stand out Image 2 Screenshot 41

    On the other hand, if you wish for your alternative (OR) question to be answered too, please open a new thread and post the details there and we'll be more than happy to assist you.

  • jmillist
    Replied on January 14, 2017 at 3:35 AM

    i have a related question. Using "form tabs" how would I go about decreasing the tab width? I'm new to CSS so am still trying to get a handle on the terms. 

    Thanks in advance.

  • Support_Management Jotform Support
    Replied on January 14, 2017 at 4:59 AM

    That is achievable via CSS too but are you sure you wanted to proceed with that? I'm asking because the labels of your Form Tabs are quite long (e.g. Nat Sherman Cartons).

    This will cause the tab to cutoff the texts that overflowed after shrinking the width of the tabs. The only way around this is to make the font-size smaller, and adjust the margin and padding. Should look something like this:

    Make a page tab stand out Image 1 Screenshot 20

    If you're okay with that kind of look, here are the CSS codes that I used:

    ul#tabs-list li {

       width: 100px;

       margin: 0 0 5px 5px;

       font-size: 8px;

       padding: 6px 5px;

    }

  • Support_Management Jotform Support
    Replied on January 14, 2017 at 5:19 AM

    @jmillist - Sorry it was too late when I realized that you're a different user from the OP. The solution I gave above may (or may not) work on your form.

    The answer I gave was for the form the OP (boxerrebellion) originally asked about.

    I moved your question to a separate thread https://www.jotform.com/answers/1034459

    We'll have it addressed there shortly.