Form Alanlarına "Info Box" ekleme

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

Cok teşekkürler,

Cagla

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;

}

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.

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

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:

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.



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

Selamlar,

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

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

Çok teşekkürler,

Cagla

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;



}

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

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

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:

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.

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:

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