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

    Styling page break tabs using custom css code

    Asked by slider17 on October 25, 2014 at 11:30 PM

    Hi

     

    I would like to style my two tab buttons labelled 'Step 1' and 'Step 2' on my form so that they look like ghost buttons.

    If u see on my site i am using ghost buttons quite extensively. I have provided an example just above my jotform on my site, showing seven ghost buttons. I would like to replicate this effect on the jotform tabs.

    Can i please get help on modifying these two tab buttons so they look like ghost buttons.  Also when one is selected i need it to stand out more than the other button, because atm they look too much alike.

     

    Thanks

     

     

    Page URL:
    http://best-quote-removals.webflow.com/#quote

    page break page break tabs tabs styling custom css tabs styling tabs styling page break
  • Profile Image
    JotForm Support

    Answered by Jan on October 26, 2014 at 07:50 AM

    Hi slider17,

    I understand that you want to style the tabs like these buttons from your website right?

    If yes, then you can just add these custom css code. Here's a guide on How to Inject Custom CSS Code.

    /* Removing the horizontal line */

    .tabs-list {

    border-bottom: 0 !important;

    }

    /* Styling the tabs */

    .tabs-list li 

    width: 120px !important;

    height: 50px !important;

    line-height: 45px !important;

    margin-right: 10px !important;

    margin-left: auto !important;

    padding: 0px 8px !important;

    border-style: solid !important;

    border-width: 2px !important;

    border-color: rgba(0, 0, 0, 0.18) !important;

    background-color: transparent !important;

    font-family: "Lato", sans-serif !important; 

    color: white !important;

    font-size: 17px !important;

    font-weight: 700 !important;

    text-align: center !important;

    }

    /* Styling the current active tab */

    .tabs-list li.current {

    background: #0099ff !important;

    }

     

    I hope this will resolve your issue. If not, let us know. Thanks!

  • Profile Image

    Answered by slider17 on October 26, 2014 at 08:00 AM

    wow thanks a lot!

     

    this is what i am after.

    now i have noticed one anomaly. please refer to screenshot link below.

    u can see their are 4 white triangles on either side of each button, how to get rid of them?

    http://gyazo.com/48cdb95d233f64a74777c58987c142ed

     

    Also u will see their are gaps on the left hand column. Specifically below the 'Expected Moving date' widget.  How to fix that??

     

    thanks

  • Profile Image
    JotForm Support

    Answered by Jan on October 26, 2014 at 09:21 AM

    Hi,

    May I know how you add the css codes I provided? Did you add them through the Preferences > Form Styles > Inject Custom CSS?

    To remove those triangles, please add these custom css code.

    .tabs-list li:before {

    border-bottom: 0 !important;

    border-left: 0 !important;

    }

    .tabs-list li:after {

    border-bottom: 0 !important;

    border-right: 0 !important;

    }

    On the css code I provided above, please changed the margin-left: auto !important; to margin-left: 15px !important; This is to increase the margin from the left so it will align on the local move widget.

    Hope this helps. Thanks!

  • Profile Image
    JotForm Support

    Answered by Jan on October 26, 2014 at 09:25 AM

    Hi, 

    Just like to clarify that you should changed that value under the .tabs-list li selector

    from

    .margin-left: auto !important;

    to

    .margin-left: 15px !important;

    Thanks!

  • Profile Image

    Answered by slider17 on October 26, 2014 at 09:54 AM

    yes things are looking much nicer now.

    i was using the properties for the specific widget, and adding the custom css through there.

    i changed my method based on your suggestion though.

    btw, by changing the .margin-left to 15px it does align the tab buttons with the radio buttons on the desktop view but on a mobile (my nexus 4) its now 15px ahead of the radio buttons :)

  • Profile Image
    JotForm Support

    Answered by Jan on October 26, 2014 at 10:11 AM

    Hi,

    Okay, good to hear that. Maybe we can try using media queries to target that specific selector when user is on mobile device. Can you please try adding this custom css code.

    @media only screen and (max-device-width: 480px) {

    .tabs-list li {margin-left: 3px !important;}

    }

    Hope that fixes the issue with the mobile layout. If not, let us know. 

  • Profile Image

    Answered by slider17 on October 26, 2014 at 10:20 AM

    yup that aligns it on my phone.

    i will still have to check it out on an iphone though.  any issues i will post back into this thread.

     

    thanks for your help Jan!

  • Profile Image

    Answered by Shadae on October 26, 2014 at 11:53 AM

    Hi slider17,

    On behalf of my colleague, you are most welcome. Thank you for the update regarding it working on your phone.

    Please inform us of how it turns out on your iPhone.

    Thank you!

  • Profile Image

    Answered by slider17 on October 28, 2014 at 06:26 AM

    hi

     

    how do i change the grey coloured text ('I agree') for the terms and conditions widget to WHITE?
  • Profile Image
    JotForm Support

    Answered by Jan on October 28, 2014 at 07:39 AM

    Hi silider17,

    As we cannot answer multiple question in one thread, I have moved your question to a new thread and you will be answered there:  http://www.jotform.com/answers/450309

    Thank you for understanding.