Design form tabs widget

  • Profile Image
    artgueli
    Asked on November 25, 2015 at 02:52 AM

    3) I'd like the tabs on the desktop version of the form to display like the form on this page (scroll to bottom page of center content column to view form):

     

    http://www.injuryclaimcoach.com/settlement-letter.html

     

  • Profile Image
    Charlie
    Answered on November 25, 2015 at 03:21 AM

    I believe the design you have in that website are images and not actual CSS styling which makes it more harder to implement in the form you have. Noticed that the tabs there are not clickable.

    Please allow me some time to make the styling and I'll get back to you after I make the changes.

  • Profile Image
    Charlie
    Answered on November 25, 2015 at 03:48 AM

    Hi again,

    You can check this cloned form with the changes I made: https://form.jotform.com/53281081185958?.

    I added this custom CSS code inside the Form Tabs widget:

    .tabs-list > li.current > .liContent {

      background: #fff !important;

      color: blue !important;

      font-weight: bold !important;

    }

    .liBefore, .liAfter {

    display: none !important;

    }

    li#form-tab-1.current, li#form-tab-2.current, li#form-tab-3.current {

    margin: 0px 1px 0px 0px !important;

    background: white !important;

    }

    li > div.liContent {

    color: white !important;

    }

    li#form-tab-1, li#form-tab-2, li#form-tab-3 {

    background: #CCCCCC !important;

    margin: 0px 1px 0px 0px !important;

    }

    You can paste that inside the widget's CSS area

    You can clone my form by following this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

    Let us know if you need more styling on it.