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

    Form tabs with a specific style

    Asked by zawadil on December 01, 2015 at 12:43 PM

    Hi support !

    I checked several postings concerning the form tabs and tried also by myself to create my own tabs based on the different informations. The tab style I want to create should look like the one I found in the following posting

    How to center the form tabs widget?

    Asked by Benflips on December 19, 2014 at 05:16 AM

    which means all tabs centered with no spacing between. It would be great, if you can give me the necessary custom css code to achive this.

    Thank you in advance for your assistance.

    Best regards

    Erwin

     

    style form tabs a css code different create
  • Profile Image

    Answered by victor on December 01, 2015 at 02:43 PM

    I am assuming that you would like to replicate the tabs this user created for his form. To create your tabs look the same, you may try inserting the following code in the tab wizard:

    .tabs-list {
    margin-top: 12px;
    text-align: center;
    }

    .tabs-list li {
    margin-left: 1px;
    margin-right: 1px;
    border-top: 1px solid green;
    border-left: 1px solid green;
    border-right: 1px solid green;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    }

    .tabs-list li .liBefore {
    border: 0;
    }

    .tabs-list li .liAfter {
    border: 0;
    }

    .tabs-list li {
    padding: 3px 40px;
    }

    Please let us know if this helps.

  • Profile Image

    Answered by zawadil on December 03, 2015 at 09:09 AM

    Hello Victor !

    Before I´ve seen your answer, I was able to puzzle out most of the configuration possibilities to fullfill my needs by comparing different postings. Your reply gives me some more details, how to adjust the form tabs and I will try it in a 2nd step. Many thanks for this.

    BR Erwin

  • Profile Image
    JotForm Support

    Answered by mert on December 03, 2015 at 10:32 AM

    On behalf of my colleague Victor, you are most welcome and also, thank you for motivating words. If you need any extra help in the future, always feel free to ask us.

     

    Thanks.