Form Tabs Widget CSS query

  • slider17
    Asked on October 15, 2014 at 9: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

     

     

    Page URL: http://best-quote-removals.webflow.com/
  • Charlie
    Replied 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.

    Form Tabs Widget CSS query Image 1 Screenshot 40

     

    The form tabs will look more like this:

    Form Tabs Widget CSS query Image 2 Screenshot 51

    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

    Form Tabs Widget CSS query Image 3 Screenshot 62

     

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

    Let me know if this helps.

    Thank you.