Form Tabs and Back/Previous Button Formats

  • merisshara
    Asked on November 16, 2021 at 7:36 AM

    Hello!

    Seeking your help once again. I already scoured the forum pages and tried inserting CSS but was still unsuccessful. There are 2 things I need your assistance in:

    Form Tabs: I only added 1 widget but showed two bars on top. Also, I need to change the format as I don't see the tab values.

    Back/Previous button: Can we change it to gray?


    Most of these are CSS-related and unfortunately, I'm not well versed in that and would need your assistance to resolve them.



  • Harvey JotForm Support
    Replied on November 16, 2021 at 8:36 AM

    Hi there,

    I've cloned your form and checked. For the form tabs, it looks like there is an issue on it that it keeps on showing two tabs even though there is only one widget. I've tried also injecting a custom CSS but it's also not working on this widget. I've escalated this to our back-end team. We will let you know once we have an update on this thread.

    For the Back/Previous button you can inject this CSS code into your form.

    .form-pagebreak-back {

      background-color : #999999 !important;

      border-color : #999999 !important;

    }

    Here is a guide on how to inject CSS code to your form: How to Inject Custom CSS Codes

    Let us know if you have any other questions.


  • merisshara
    Replied on November 16, 2021 at 9:39 AM

    Thanks for the button CSS. For the form tabs, will updating the CSS in the advanced designer work better? Please let me know as this is attached to a client request.

  • Amos_W
    Replied on November 16, 2021 at 10:24 AM

    Hey there,

    While there shouldn't be any difference as the CSS code is implemented on the widget, the advanced designer is a bit more flexible and user-friendly.

    Also,

    I've played with your form a bit,

    can you please try also adding the following CSS code to your form?

    /* Makes one of the tabs a 0 height, basically disappear*/ 
    #tabs-list {
        height : 0px;
    }
    /* moves the numbers a notch up, because they looked a bit out of place(optional) */
    .liContent {
        position : relative;
        bottom : 7px;
    }


    You can have a look if that makes things better.


    (Notice that I wrote comments)


    Please let us know if you need any further assistance.

    Thank you

  • hayk JotForm Developer
    Replied on November 17, 2021 at 3:08 AM

    Hello @merisshara,

    I see you have added 2 "Form Tabs" widgets to your form and that's why you see 2 sections of tabs. I have edited your form and now it shows only one. Anyway, there are still some issues with the form. I'd suggest using your form with the following URL: https://www.jotform.com/213190561078050?preventNewForms=1 for now while we will have an update. We appreciate your understanding and patience.

    Regards,

    Widgets Team

  • merisshara
    Replied on November 26, 2021 at 7:16 PM

    I apologize for the late reply. I was able to work around the issue and used a different widget instead.

    Thanks for all the support!