Form Alanlarına "Info Box" ekleme

  • emrecankocak
    21 Şubat 2022 02:03 tarihinde soruldu

    Selamlar,

    Yarattığım formlarda asagidaki alanlarda bir "info box" kullanmak istiyoruz. Burada ürünlerin yanına bir "i" harfi ekleyip, mouse ile üzerine gelince ek bir textbox açılacak şekilde ayarlayabilir miyiz?

    https://form.jotform.com/220241728577963

    1645426972 6213391c2251b  Screenshot 10


    Cok teşekkürler,

    Cagla

  • Mert HR Operation Specialist
    21 Şubat 2022 03:39 tarihinde yanıtlandı

    Merhaba caglayalcin,

    Jotform Destek ile iletişime geçtiğiniz için teşekkür ederiz. Her seçenek için tıklanabilir bilgi butonu koymak maalesef mümkün değil. Fakat CSS kullanarak her seçeneğin üstüne geldiğinizde bir bilgi kutucuğu çıkmasını saylayabilirsiniz. Bunun için lütfen aşağıdaki adımları takip edin:

    1. Form Oluşturma Aracı'nı açın.

    2. Aşağıdaki CSS kodunu Form Tasarımcısı (Boya Rulosu ikonu)'ndaki Stiller sekmesinden Özel CSS Kodu Gir bölümüne yapıştırın.

    span.form-radio-item:nth-child(1):after {
        content : "test 1 nolu secenek ";
        border : 2px solid gray;
        border-radius : 5px;
        padding : 3px;
        position : absolute;
        left : 291px;
        background : lightgray;
        top : 6px;
        display : none;
    }

    span.form-radio-item:nth-child(1):before {
        content : "";
        background : white;
        border-color : transparent gray transparent transparent;
        border-style : solid;
        border-width : 7px;
        height : 0;
        width : 0;
        left : 277px;
        top : 13px;
        position : absolute;
        display : none;
    }

    span.form-radio-item:nth-child(1):hover::before,
    span.form-radio-item:nth-child(1):hover::after,{
        display : block !important;
    }

    1645432766 62134fbe56707 Screen Shot 202 Screenshot 10
    Lüften tüm seçeneklerle ilgili kodlara göz atmanız amacıyla sizin için oluşturduğum klon forma göz atın:

    https://form.jotform.com/220511175276955

    Daha fazla yardıma gereksinim duymanız halinde lütfen bizimle iletişime geçmekten çekinmeyin.

  • Cagla
    21 Şubat 2022 08:17 tarihinde yanıtlandı

    Merhaba Mert Bey,

    Cok teşekkürler cevabınız için, ek olarak birkaç sorum daha olacak:


    • Bu alanlarda karakter sınırı var mı, ona göre içerik oluşturacagız?
    • Burada seceneklerin sonuna yuvarlak içinde "i" harfi koyabilir miyiz? bu harfin üzerine mouse gelince, bu text boxlar görünse? Şu anki haliyle orada bir ürün açıklaması oldugu belli olmuyor ve kullanıcılar şans eseri üzerine gelirse görebilecekler bu text boxları.
    • bu textbox'ların rengini ve yazı tipini/boyutunu degistirebiliyor muyuz?


    Cok teşekkürler,

    Cagla

  • Mert HR Operation Specialist
    22 Şubat 2022 02:44 tarihinde yanıtlandı

    Merhaba caglayalcin,

    Jotform Destek ile iletişime geçtiğiniz için teşekkür ederiz. Oluşturulan textbox alanında herhangi bir karakter sınırı bulunmamaktadır. Seçeneklerin sonunda "i" olması ve fare ile üzerine gelindiğinde textbox çıkması için lütfen bir önceki kod yerine aşağıdaki kodu kullanın:

    span.form-radio-item::before {
      content : "i";
      border: 1px solid #ddd;
      border-radius: 50%;
      padding: 5px;
    }

    .form-radio-item {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
    }

    span.form-radio-item:nth-child(1)::after {
    content : "test 1 nolu secenek";
    border : 1px solid #ddd;
    border-radius : 5px;
    padding : 3px;
    position : absolute;
    left : 291px;
    background : #ddd;
    display : none;
    z-index:9999;
    }

    span.form-radio-item:nth-child(2)::after {
        content : "test 2 nolu secenek";
        border : 1px solid #ddd;
        border-radius : 5px;
        padding : 3px;
        position : absolute;
        left : 291px;
        background : #ddd;
        display : none;
        z-index:9999px;
    }

    span.form-radio-item:nth-child(1):hover::before,
    span.form-radio-item:nth-child(2):hover::before,
    span.form-radio-item:nth-child(3):hover::before,
    span.form-radio-item:nth-child(4):hover::before,
    span.form-radio-item:nth-child(5):hover::before,
    span.form-radio-item:nth-child(6):hover::before,
    span.form-radio-item:nth-child(7):hover::before,
    span.form-radio-item:nth-child(8):hover::before,
    span.form-radio-item:nth-child(9):hover::before,
    span.form-radio-item:nth-child(10):hover::before,
    span.form-radio-item:nth-child(11):hover::before,
    span.form-radio-item:nth-child(1):hover::after,
    span.form-radio-item:nth-child(2):hover::after,
    span.form-radio-item:nth-child(3):hover::after,
    span.form-radio-item:nth-child(4):hover::after,
    span.form-radio-item:nth-child(5):hover::after,
    span.form-radio-item:nth-child(6):hover::after,
    span.form-radio-item:nth-child(7):hover::after,
    span.form-radio-item:nth-child(8):hover::after,
    span.form-radio-item:nth-child(9):hover::after,
    span.form-radio-item:nth-child(10):hover::after,
    span.form-radio-item:nth-child(11):hover::after {
        display : block !important;
    }

    Her seçeneğe bir textbox koymak için CSS kısmına parantez içindeki numarayı değiştirerek yapıştırmanız yeterlidir. Bunun için lütfen aşağıdaki GIF'e göz atın:
    1645514469 62148ee5e75c5 screencast 2022 Screenshot 10
    Textbox'un arkaplan rengini "background:" alanından sonrasına istediğiniz rengin hex kodunu yapıştırarak değiştirebilirsiniz. Yazı fontunuzu değiştirmek için font-family özelliği ekleyebilirsiniz.

    1645515762 621493f2cab4f Screen Shot 202 Screenshot 21

    Daha fazla yardıma gereksinim duymanız halinde lütfen bizimle iletişime geçmekten çekinmeyin.

  • emrecankocak
    7 Mart 2022 08:04 tarihinde yanıtlandı

    Selamlar,

    Belirttiğiniz 2. kodları ekledigimde i iconu asagidaki gibi çıkıyor, bunu düzeltebilir miyiz?


    1646658247 622602c735606  Screenshot 10

    Sonrasında açıkladığınız şekilde devam ederim.


    Çok teşekkürler,

    Cagla

  • Mert HR Operation Specialist
    10 Mart 2022 04:06 tarihinde yanıtlandı

    Merhaba caglayalcin,

    Jotform Destek ile iletişime geçtiğiniz için teşekkür ederiz. İlk kod paragrafındaki padding kısmında 5px'i silip "1px 8px" şeklinde yazmanız halinde çerçevesi yuvarlak hale gelecektir.

    span.form-radio-item::before {

      content : "i";

      border: 1px solid #ddd;

      border-radius: 50%;

      padding: 1px 8px;

    }


    1646903081 6229bf2989eab Screen Shot 202 Screenshot 10

    Daha fazla yardıma gereksinim duymanız halinde lütfen bizimle iletişime geçmekten çekinmeyin.

  • emrecankocak
    29 Mart 2022 02:59 tarihinde yanıtlandı

    Selamlar,

    Asagidaki formda, belirttiginiz kodları ekledim ancak son secenek olan 12. secenek (Diger) çıkmadı.

    https://form.jotform.com/220871679871974

    Yardımcı olabilir misiniz?

    Çok teşekkürler,

    Cagla

  • Berkay Support Team Lead
    29 Mart 2022 03:21 tarihinde yanıtlandı

    Merhaba caglayalcin,

    Öncelikle Jotform Destek ile iletişime geçtiğiniz için teşekkür ederiz. Formunuzu kontrol ettiğim zaman Diğer seçeneği, diğer seçenekler gibi herhangi bir sorun olmadan görüntüleniyordu:

    1648537954 6242b162a6fed Screen Shot 202 Screenshot 10

    Eğer bahsettiğiniz sorun, imlecin Diğer seçeneğin üzerine getirildiğinde herhangi bir metin çıkmaması ise, aşağıdaki CSS kodlarını kullanarak bu probleminizi çözebilirsiniz:

    span.form-radio-item:nth-child(1):hover::before,
    span.form-radio-item:nth-child(2):hover::before,
    span.form-radio-item:nth-child(3):hover::before,
    span.form-radio-item:nth-child(4):hover::before,
    span.form-radio-item:nth-child(5):hover::before,
    span.form-radio-item:nth-child(6):hover::before,
    span.form-radio-item:nth-child(7):hover::before,
    span.form-radio-item:nth-child(8):hover::before,
    span.form-radio-item:nth-child(9):hover::before,
    span.form-radio-item:nth-child(10):hover::before,
    span.form-radio-item:nth-child(11):hover::before,
    span.form-radio-item:nth-child(12):hover::before,
    span.form-radio-item:nth-child(1):hover::after,
    span.form-radio-item:nth-child(2):hover::after,
    span.form-radio-item:nth-child(3):hover::after,
    span.form-radio-item:nth-child(4):hover::after,
    span.form-radio-item:nth-child(5):hover::after,
    span.form-radio-item:nth-child(6):hover::after,
    span.form-radio-item:nth-child(7):hover::after,
    span.form-radio-item:nth-child(8):hover::after,
    span.form-radio-item:nth-child(9):hover::after,
    span.form-radio-item:nth-child(10):hover::after,
    span.form-radio-item:nth-child(11):hover::after,
    span.form-radio-item:nth-child(12):hover::after{
        display : block !important;

    Lütfen bu CSS kodlarını daha önce eklemiş olduğunuz bu alanı silerek, silmiş olduğunuz alan yerine ekleyiniz. Bu CSS kodlarını formunuza eklemek için ise lütfen aşağıdaki adımları ve ekran görüntüsünü takip ediniz:

    1. Form Oluşturucu sayfasında, ekranın sağ tarafında bulunan Fırça simgesine tıklayınız.
    2. Açılan pencerede Stiller sekmesine tıklayınız.
    3. Aşağı kaydırınız ve Özel CSS Kodu Gir alanına yukarıdaki kodları ekleyiniz.
    4. Daha sonra, Kaydet butonuna basınız.

    1648538340 6242b2e4e4ed9 screencast 2022 Screenshot 21

    Yukarıdaki adımları tamamladıktan sonra ise imleciniz Diğer seçeneğinin üzerine geldiği zaman aşağıdaki gibi metin gözükecektir:

    1648538389 6242b3159de1a screencast 2022 Screenshot 32

    Daha fazla yardıma gereksinim duymanız halinde lütfen bizimle iletişime geçmekten çekinmeyin.