Form Tabs: How to change the design of the tabs?

  • adapto
    15 Şubat 2024 15:37 tarihinde soruldu

    bir sorum daha var

    sekmeleri belirli bir düzen içinde sıralanmasını istiyorum, karmaşık görünüyorlar ve ölçekleri birbirinden farklı

    bunu nasıl düzeltebilirim?

  • Afzal Jotform Support
    15 Şubat 2024 15:43 tarihinde yanıtlandı

    Hi Adapto,

    I appreciate your patience. I understand you want to make the tabs the same size and more uniform. This can be done using the building theme options for the Form Tabs widget. Doing that is easy. Let me show you how:

    1. In the Form Tabs menu on the right side of the page, remove the extra spaces from the tab names and click on Update Widget.
    2. Circle back to the Custom CSS section, and remove all the CSS codes. 
    3. You can change the theme of the tabs and chose the best one that you like. 

    Form Tabs: How to change the design of the tabs? Image 1 Screenshot 30

    Take a look at the screenshot below to see how your form will look:

    Form Tabs: How to change the design of the tabs? Image 2 Screenshot 41

    Give it a try and let us know if you need any more help.

  • adapto
    16 Şubat 2024 01:32 tarihinde yanıtlandı

    ben tüm temaları denedim. Sizin bana çözüm olarak sunduğunuz benim istediğim değil. Sekmelerin ölçeklendirilmesi, konumlandırılması için özel css kodlarınızı talep ediyorum.


  • Girish Jotform Support
    16 Şubat 2024 03:42 tarihinde yanıtlandı

    Hi there,

    If you want solutions only using CSS, please let us know what position or order you want to show the form tabs and the size required, and we can check for a suitable CSS. Also, please confirm if you are working on this form, https://www.jotformpro.com/form/53261486523961.

  • adapto
    16 Şubat 2024 04:23 tarihinde yanıtlandı

    Form Tabs: How to change the design of the tabs? Image 1 Screenshot 20Bu sayfadaki sekmelerin düzenli bir şekilde ve alt alta sıralanmasını istiyorum.


  • Vincenzo Jotform Support
    16 Şubat 2024 07:51 tarihinde yanıtlandı

    Hi Adapto,

    Thanks for reaching out to Jotform Support. Unfortunately, our Turkish Support agents are busy helping other Jotform users at the moment. I'll try to assist you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd prefer to receive support in Turkish, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

    Now, let me help you with your question.  It is possible to align your tabs horizontally by injecting a CSS code. Doing that is easy, let me show you how:

    1. In Form Builder, click on the Form Designer button, on the top right side of the screen.
    2. Next, click on the Style tab.
    3. Scroll down to Inject Custom CSS and paste the code provided below:
    /* Display tabs alligned horizontally - 11927121*/
    .tabs-list.default {
        margin: 0px 10px;
        display: grid;
    }
    /*Code Ends Here*/

    Form Tabs: How to change the design of the tabs? Image 1 Screenshot 50
    Result:

    Form Tabs: How to change the design of the tabs? Image 2 Screenshot 61

    If you want to align the text of your tab to the right, doing that is also easy, let me walk you through it:

    1. In Form Builder, click on tour Form Tabs Widget, then click on the Gear icon on its right.
    2. In the Widgets Settings panel on the right of the screen, under Tab Titles, remove the space before the value "Ana Sayfa".
    3. Next, inject the CSS code below:
    /* Code to Align the text to the left - 11927121*/
    .liContent {
        text-align: left;
    }
    /*Code Ends Here*/

    Form Tabs: How to change the design of the tabs? Image 3 Screenshot 72

    Result:

    Form Tabs: How to change the design of the tabs? Image 4 Screenshot 83

    Here you can test this demo form or clone it to better understand how it was configured. 

    Give it a try and reach out again if you have any other questions.