How to change the shape, spacing, and placement of the form tab widget?

  • Profile Image
    imagepb
    Asked on July 05, 2018 at 04:04 PM

    How can I change the shape, spacing, and placement of the form tab (when using the form tab widget)?

  • Profile Image
    Richie_P
    Answered on July 05, 2018 at 04:41 PM

    I have checked your form and I can't seem to find the Form tab widget. Can you please let us know where the form tab is located in the form?

    Do note that forms tabs doesn't have an option to paste custom CSS.

    We can only edit it, through its options.

    Thank you.

  • Profile Image
    imagepb
    Answered on July 05, 2018 at 05:43 PM
    Hi, there is a CSS section for the Form Tab section.
    https://www.jotform.com/build/81595767241163
    ...
  • Profile Image
    Victoria_K
    Answered on July 05, 2018 at 06:18 PM

    Hello imagepb,

    Could you provide us some more information on how you would like to style Form Tabs widget?

    In general, you could use the Inspect Element tool of your browser to define css selectors and then to apply custom styling via CSS area of the widget.

    1530829099Screenshot_3.png

    If you need further assistance, please let us know.

  • Profile Image
    imagepb
    Answered on July 06, 2018 at 12:43 PM
    Hello,
    Thanks for the response.
    I looked at the “inspect element” but I might as well be looking at hieroglyphs…lol
    Hopefully you could help me out as I am trying to get this look:
    [cid:image001.png@01D41522.AA9882A0]
    ...
  • Profile Image
    Victoria_K
    Answered on July 06, 2018 at 12:55 PM

    We will gladly assist, but unfortunately, your attachments have not reached us. Can you please upload images using text area on our forum? 

    We will wait for your reply.

  • Profile Image
    Eddy Perez
    Answered on July 06, 2018 at 02:44 PM

    1530902602Tabs.PNG


  • Profile Image
    Victoria_K
    Answered on July 06, 2018 at 03:06 PM

    Thank you. I will check for possible css code and update you with results.

  • Profile Image
    Victoria_K
    Answered on July 11, 2018 at 07:42 AM

     Hello,

    I am not sure if the following meets all your requirements, but here is my test form: https://form.jotform.com/81866118926972 

    1531308787screencast55.gif

    If it would work for you, please add the following code to your widget using the following theme:

    1531309148screenshotm0i6r.png

    .tabs-list li {

      margin: 0 5px 1px 0px;

    border-top-left-radius: 5px;

    border-top-right-radius: 5px;

    height: 25px;

    }

    .tabs-list.amberorange .current .liAfter {

    border-bottom: 38px solid #ffffff !important;

    }

    .liAfter {

      border-right: 10px solid transparent;

    right: -10px;

    border-bottom: 37px solid #e6e6e6 !important;

    }

    .tabs-list.amberorange li {

    background: #e6e6e6;

    -webkit-box-shadow: 10px 22px 50px 2px rgba(0,0,0,0.4);

       -moz-box-shadow: 10px 22px 50px 2px rgba(0,0,0,0.4);

            box-shadow: 0 -5px 29px 0 rgba(0, 0, 0, 0.15);

            border: 0px solid #000000;

    }

    .tabs-list.amberorange .current {

      background: #ffffff !important;

    }

    .tabs-list.amberorange .current .liAfter {

      border-bottom: 37px solid #ffffff !important

    }

    .current {

    z-index: 100;

    }

    .tabs-list li .liAfter {

      border-right: 10px solid transparent;

    }

    .tabs-list.amberorange li .liAfter {

    right: -10px;

    }

    .tabs-list.amberorange li {

    font-family: "Verdana", sans-serif;

    text-transform: none;

    color: #555555 !important;

    }

    .tabs-list.amberorange li {

      padding: 6px 30px;

    }

  • Profile Image
    imagepb
    Answered on July 12, 2018 at 03:43 PM
    Hello,
    T-H-A-N-K-S!
    This looks soooo much better.
    ...