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

    Make a page tab stand out

    Asked by boxerrebellion on January 13, 2017 at 04: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?

    Page URL:
    http://boxreb.com/flichia/order-online---tobacco.html

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Jim_R on January 14, 2017 at 02: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.

    #form-tab-10 {

       background: red;

    }

    #form-tab-10 .liAfter {

       border-bottom-color: red;

    }

    RESULT: 

    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.

  • Profile Image

    Answered by jmillist on January 14, 2017 at 03: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.

  • Profile Image
    JotForm Support

    Answered by Jim_R on January 14, 2017 at 04: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:

    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;

    }

  • Profile Image
    JotForm Support

    Answered by Jim_R on January 14, 2017 at 05: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.