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

    Custom CSS for Form Tab Widget

    Asked by jolomero on February 17, 2015 at 03:57 PM

    I can see there is a space for adding css to the forms tab widget, which I have started to do.  However, it would be great to know which pieces to actually add css to.

    For example, I've added this to the custom css:

    .tabs-list li {font-size: 13px; color: #ffffff; background-color: #666c86;}

    which gives me the look I want, however it needs some tweaks as you can see, such as having an "active" tab color, and taking out the little angles from the background.

    Any help in defining these would be great...

     

    Cheers

     

    Page URL:
    http://form.jotform.ca/form/42967774140260

    Screenshot
    form tab tab widget size font and add CSS
  • Profile Image
    JotForm Support

    Answered by Kiran on February 17, 2015 at 05:58 PM

    It is quite difficult to list out the complete classes or ids for a widget. However, from the DOM inspector the following highlighted ids and classes that might help you in achieving your requirement.

    As you see the screenshot above, the active tab is having a class "current", each tab has an ID form-tab-number, etc. You can also see these elements from the developer console of the browser. Right-click on the widget and select Inspect Element to see the developer console that displays the DOM.

    I hope this information helps! Let us know if you need any further assistance. We will be happy to help.

  • Profile Image

    Answered by jolomero  on February 18, 2015 at 04:50 PM

    Thank you for pointing me at this.  I was able to go in and ad the correct changes I wanted to make.  It's not perfect, however it works very well!

    Many thanks

  • Profile Image

    Answered by raul on February 18, 2015 at 06:22 PM

    On behalf of my colleague, you're welcome.

    If you require further assistance, feel free to contact us anytime.
    Best Regards.