Change the size, weight, and color of the column label text

bundaazka0704

Ditanyakan pada tanggal 9 Agustus 2025 pukul 22.06

Bisa nggak sih bantuin aku buat ngubah ukuran fon, bikin tebel, terus mungkin kasih warna di label kolom? Pokoknya, aku pengen teks judul ukurannya agak gede, subjudul-nya agak lebih kecil, terus teks di kolom bawahnya lebih kecil lagi dan nggak ditebelin.
https://form.jotform.com/252207831628255
Sigit_W

Dibalas pada tanggal 9 Agustus 2025 pukul 22.29
Hi Elfina,
Terima kasih telah menghubungi Dukungan Jotform. Anda dapat mengatur teks judul dengan satu ukuran, teks subjudul sedikit lebih kecil, dan teks di bawahnya sedikit lebih kecil serta tidak dicetak tebal dengan menyisipkan kode CSS ke formulir Anda. Mari saya jelaskan caranya:
1. Pertama, salin kode ini:
```
/* Mengature teks judul */

.form-subHeader{font-size:19px!important;font-weight:500;color:#555;margin-bottom:4px}li[data-type="control_matrix"]>label.form-label{font-size:16px;font-weight:normal;color:#333;line-height:1.4;letter-spacing:.2px}.form-matrix-table th{background-color:#f9f9f9;padding:6px 8px}.form-matrix-table td{padding:6px 8px}.form-matrix-table td:hover

/* Berakhir di sini */
```
2. Di Pembangun Formulir, klik ikon Rol Cat di sisi kanan halaman untuk membuka Perancang Formulir.
3. Sekarang, di menu Perancang Formulir, klik tab Gaya, gulir ke bawah, lalu tempelkan kode ke dalam kotak Suntik Kode CSS. Selesai. Kode akan tersimpan secara otomatis.
Lihat tangkapan layar saya di bawah ini untuk melihat hasilnya:
Cobalah dan beritahu kami bagaimana hasilnya.
bundaazka0704

Dibalas pada tanggal 10 Agustus 2025 pukul 01.14

Oke makasihhh
bundaazka0704

Dibalas pada tanggal 10 Agustus 2025 pukul 01.21

Bisa ganti ke warna lain? Mungkin oranye
Sigit_W

Dibalas pada tanggal 10 Agustus 2025 pukul 01.28
Hi Elfina,
Anda dapat menyisipkan kode CSS berikut ke formulir Anda. Mari saya jelaskan caranya:
1. Pertama, salin kode ini:
```
/* Mengubah warna border lingkaran dan isi lingkaran */

.form-radio:checked+label:before { 

   border-color: #e55300; 

} 



.form-radio+label:after { 

   background-color: #e55300; 

}

/* Berakhir di sini */
```
2. Di Pembangun Formulir, klik ikon Rol Cat di sisi kanan halaman untuk membuka Perancang Formulir.
3. Sekarang, di menu Perancang Formulir, klik tab Gaya, gulir ke bawah, lalu tempelkan kode ke dalam kotak Suntik Kode CSS. Selesai. Kode akan tersimpan secara otomatis.
Lihat tangkapan layar saya di bawah ini untuk melihat hasilnya:
Cobalah dan beritahu kami bagaimana hasilnya.
bundaazka0704

Dibalas pada tanggal 10 Agustus 2025 pukul 08.47

Kalau bisa, lingkarannya jangan tampil dulu di awal, baru muncul kalau dipilih.

Sigit_W

Dibalas pada tanggal 10 Agustus 2025 pukul 09.30

Hi Elfina,

Bila Anda ingin lingkaran mucul saat dipilih saja, Anda dapat menambahkan kode CSS berikut ke formulir Anda:

/* Reset warna bawaan */

#cid_13 .form-matrix-values .form-radio+label:after {

  background: transparent !important;

}

#cid_13 .form-matrix-values .form-radio+label:before {

  border-color: transparent !important;

}

/* Kolom 1 */

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(1) .form-radio:checked+label:after,

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(1) .form-radio+label:hover:after {

  background: #ff6b00 !important;

}

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(1) .form-radio:checked+label:before {

  border-color: #0044cc !important;

}

/* Kolom 2 */

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(2) .form-radio:checked+label:after,

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(2) .form-radio+label:hover:after {

  background: #ff6b00 !important;

}

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(2) .form-radio:checked+label:before {

  border-color: #ff6b00 !important;

}

/* Kolom 3 */

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(3) .form-radio:checked+label:after,

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(3) .form-radio+label:hover:after {

  background: #ff6b00 !important;

}

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(3) .form-radio:checked+label:before {

  border-color: #ff6b00 !important;

}

/* Kolom 4 */

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(4) .form-radio:checked+label:after,

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(4) .form-radio+label:hover:after {

  background: #ff6b00 !important;

}

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(4) .form-radio:checked+label:before {

  border-color: #ff6b00 !important;

}

/* Kolom 5 */

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(5) .form-radio:checked+label:after,

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(5) .form-radio+label:hover:after {

  background: #ff6b00 !important;

}

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(5) .form-radio:checked+label:before {

  border-color: #ff6b00 !important;

}

Lihat tangkapan layar saya di bawah ini untuk melihat hasilnya:

Change the size, weight, and color of the column label text Image 1 Screenshot 20

Cobalah dan beritahu kami bagaimana hasilnya.

bundaazka0704

Dibalas pada tanggal 10 Agustus 2025 pukul 09.52

Oke, keren. Tolong tiap tombol diberi warna berbeda, misalnya gradasi dari biru ke merah untuk nilai kecil.

Sigit_W

Dibalas pada tanggal 10 Agustus 2025 pukul 10.16

Hi Elfina,

Bila Anda ingin lingkaran memiliki warna berbeda dan bergradien, Anda dapat mengganti kode CSS sebelumnya dengan kode CSS berikut ke formulir Anda:

/* Reset warna bawaan */

#cid_13 .form-matrix-values .form-radio+label:after { background: transparent !important; }

#cid_13 .form-matrix-values .form-radio+label:before { border-color: transparent !important; }

/* Kolom 1 (paling kiri) - biru tua → biru muda */

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(1) .form-radio:checked+label:after,

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(1) .form-radio+label:hover:after {

  background: linear-gradient(135deg,#0044cc 0%,#66a3ff 100%) !important;

}

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(1) .form-radio:checked+label:before {

  border-color: #0044cc !important;

}

/* Kolom 2 - biru muda → oranye */

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(2) .form-radio:checked+label:after,

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(2) .form-radio+label:hover:after {

  background: linear-gradient(135deg,#66a3ff 0%,#ffc400 100%) !important;

}

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(2) .form-radio:checked+label:before {

  border-color: #66a3ff !important;

}

/* Kolom 3 - kuning-oranye → oranye */

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(3) .form-radio:checked+label:after,

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(3) .form-radio+label:hover:after {

  background: linear-gradient(135deg,#ffc400 0%,#ff9f00 100%) !important;

}

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(3) .form-radio:checked+label:before {

  border-color: #ffc400 !important;

}

/* Kolom 4 - oranye → oranye kemerahan */

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(4) .form-radio:checked+label:after,

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(4) .form-radio+label:hover:after {

  background: linear-gradient(135deg,#ff9a00 0%,#ff6b00 100%) !important;

}

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(4) .form-radio:checked+label:before {

  border-color: #ff9a00 !important;

}

/* Kolom 5 (paling kanan) - oranye kemerahan → merah */

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(5) .form-radio:checked+label:after,

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(5) .form-radio+label:hover:after {

  background: linear-gradient(135deg,#ff6b00 0%,#ff2d00 100%) !important;

}

#cid_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(5) .form-radio:checked+label:before {

  border-color: #ff6b00 !important;

}

Lihat tangkapan layar saya di bawah ini untuk melihat hasilnya:

Change the size, weight, and color of the column label text Image 1 Screenshot 20

Cobalah dan beritahu kami bagaimana hasilnya.

bundaazka0704

Dibalas pada tanggal 10 Agustus 2025 pukul 15.17

Bisa nggak diterapkan ke semua pertanyaan? Pertanyaan pertama sudah oke.
Sigit_W

Dibalas pada tanggal 10 Agustus 2025 pukul 15.37

Hi Elfina,
Untuk menjaga percakapan tetap teratur, saya memindahkan pertanyaan Anda yang lain ke thread terpisah, dan seseorang dari Tim Dukungan kami akan membantu Anda di sana.
Terima kasih atas kesabaran Anda, kami sangat menghargainya.
bundaazka0704

Dibalas pada tanggal 13 Agustus 2025 pukul 11.39

Kira-kira format terbaik seperti apa untuk membuat formulir dengan 10 pertanyaan, masing-masing punya 5 pilihan tunggal yang mengukur dari ‘tidak seperti saya’ sampai ‘sangat seperti saya’?
Sigit_W

Dibalas pada tanggal 13 Agustus 2025 pukul 13.01

Hi Elfina,
Untuk menjaga percakapan tetap teratur, saya memindahkan pertanyaan Anda yang lain ke thread terpisah, dan seseorang dari Tim Dukungan kami akan membantu Anda di sana.
Terima kasih atas kesabaran Anda, kami sangat menghargainya.