Form Tabs Widget CSS query

  • Profile Image
    slider17
    Asked on October 15, 2014 at 09:42 AM

    Hi

     

    Is it possible to make the forms tabs widget css to look like the buttons i have create on my site?

    Please view the screenshot below to see what i mean.

     

    http://gyazo.com/6995bd1af592393d626a78cb6f5c3900

     

    Please also view the weblink provided to see it in more detail, please scroll down to the 'Ready to Quote' section.

     

    Thanks

     

     

  • Profile Image
    Charlie
    Answered on October 15, 2014 at 10:57 AM

    Hi,

    Are you using the Form Tabs widget? If so, you can edit the style using the custom CSS codes. 

    To edit the style, you can follow the screenshots below.

    1. In the Form Tabs Settings of the widget, I added this code:

    .tabs-list li {

    position: initial;

    margin: 0 0 0 0;

    width: auto;

    }

    For the tabs to look more like a button, you just need to change the property position from relative to initial. The margin was set to 0 on all to remove the spacing between tabs.

     

    The form tabs will look more like this:

    I would also suggest that you use a browser plugin or extension to view your page source code to see and edit in live the CSS properties

     

    You can check the live form here: http://form.jotformpro.com/form/42867795958986? 

    Let me know if this helps.

    Thank you.