Form Tabs and Back/Previous Button Formats

  • Profile Image
    merisshara
    Asked on November 16, 2021 at 07: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.



  • Profile Image
    Harvey_N
    Answered on November 16, 2021 at 08: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.


  • Profile Image
    merisshara
    Answered on November 16, 2021 at 09: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.

  • Profile Image
    Amos_W
    Answered 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

  • Profile Image
    hayk
    Answered on November 17, 2021 at 03: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

  • Profile Image
    merisshara
    Answered on November 26, 2021 at 07: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!