Can you help me make my page tabs look better?

  • Profile Image
    CMRI
    Asked on March 19, 2017 at 12:54 AM

    Do you have any suggestions as to how I can make the page tabs on my form look better?

    It looks clunky. I just want to make it easy for those who fill out my form to be able to complete it easily and I'm not sure the way these tabs are displayed assists?


    Any ideas?

  • Profile Image
    BDAVID
    Answered on March 19, 2017 at 11:40 AM

    Please try injecting the following CSS code:

    .tabs-list.mikadoyellow li {

        padding: 3px 30px;

    }

    Example:

    Result:

    Let us know if you need more help.

  • Profile Image
    CMRI
    Answered on March 19, 2017 at 08:19 PM

    That's great! Is there any way you can change the highlight colour from yellow to blue HEX #3e78bc ?

    Thank you!!

  • Profile Image
    Ian
    Answered on March 19, 2017 at 11:23 PM

    Please add the following css code to the tab's widget custom css as shown in the screenshot below :

    .tabs-list.mikadoyellow .current {

        background: #3e78bc !important;

    }

  • Profile Image
    CMRI
    Answered on March 28, 2017 at 07:55 AM

    Following your help above, I added a second blue and probably some other CSS on the "Form Designer" (?)

    and now my form tabs are back to being on 3 lines instead of 2.

    Can you plook at my code and try to help me understand why this is happening?

  • Profile Image
    olivia
    Answered on March 28, 2017 at 10:11 AM

    Hello,

    I have cloned your form into my side and checked CSS codes.

    Please inject below CSS into your form:

    .tabs-list.mikadoyellow li {

        padding: 3px 30px;

        margin: 1px 0px -1px 0px;

        color: #fff;

        background: #3e78bc;

    }

    .tabs-list.mikadoyellow .current {

        background: #35669f !important;

    }

    There were some duplicated CSS codes and I removed them and modified CSS codes. 

     

    After you update the widget, your form will be seen like below:

    Demo Form: https://form.jotform.com/70864021408956

    You can clone this form into your side: How-to-Clone-an-Existing-Form-from-a-URL?

    Please follow the guide: How-to-Inject-Custom-CSS-Codes?

    If you need any other supports, please feel free to let us know.

    Thank you.

     

  • Profile Image
    CMRI
    Answered on March 28, 2017 at 08:12 PM

    Hi, I followed the above and it still isn't formatted correctly.

    What am I doing wrong? :(

    https://form.jotform.co/70867833544870 

     

  • Profile Image
    Ian
    Answered on March 28, 2017 at 09:55 PM

    I still could not replicate the issue at my end.

    This is the screenshot of what I see at my end. 

    Please refresh the Browser cache http://www.refreshyourcache.com/en/home/ and try again.

    If you continue facing the issue, let us know what browser are you using.

     

  • Profile Image
    CMRI
    Answered on March 29, 2017 at 05:43 AM

    You are right! I cleared the browser cache and now it is perfect :)

     

    thank you!

  • Profile Image
    olivia
    Answered on March 29, 2017 at 06:09 AM

    We are happy to hear that your issue was resolved.

    If you need any further assistance, please don't hesitate to contact us.

    Thank you.