Cara Menambahkan Label Mengambang ke Bidang Formulir di Divi

.et-float-labels p {
position: relative !important;
}
Selanjutnya, kita berikan elemen label pada form dan posisi absolute dengan styling lain yang menempatkan teks label sehingga tumpang tindih dengan teks penempatan. Display:block menimpa properti display:hidden default sehingga label siap ditampilkan. Kemudian kami menyembunyikannya dengan visibilitas tersembunyi. .et-float-labels .et_pb_contact_form_label {
display: block !important;
visibility: hidden;
opacity: 0;
position: absolute;
top: 1em;
padding: 0 1em;
transform: translateY(0%);
transform-origin: left;
color: #ffffff;
font-size: 1.2em;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 0;
}
Kemudian kami menunjukkan, menskala, dan menerjemahkan (memindahkan) label dengan animasi slide ke atas setelah menerima kelas "aktif" yang dikendalikan oleh JQeury.

.et-float-labels .et_pb_contact_form_label.active {
visibility: visible;
opacity: 0.6;
top:0;
transform: translateY(-100%) scale(0.9);
}
Sisa CSS adalah tentang menyembunyikan placeholder dengan transisi. Ada banyak baris untuk melakukan ini karena setiap browser memerlukan awalan yang berbeda untuk menargetkan elemen semu placeholder. Tapi idenya sederhana – ubah warna placeholder menjadi transparan. .et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input::placeholder {
transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
color: transparent !important;
}
Tentang JQuery Pertama, kita mendefinisikan variabel $floatLabelInput sebagai elemen input pada setiap bidang formulir.

var $floatLabelInput = $(".et-float-labels .input");
Kemudian kami menggunakan pengendali acara fokus dengan fungsi untuk menambahkan kelas ("aktif") ke elemen label (saudara kandung sebelumnya dari elemen input) setiap kali elemen input dalam fokus. Setelah kelas "aktif" ditambahkan ke label, label ditampilkan, diskalakan, dan dipindahkan ke tempatnya di atas input dengan CSS yang sesuai. $floatLabelInput.on("focus", function (e) {
$(e.target).prev().addClass("active");
e.stopPropagation();
});
Terakhir, kami menggunakan pengendali acara blur dengan fungsi yang menentukan kapan harus mempertahankan kelas "aktif" pada label. Jika input tidak memiliki nilai, input akan tetap aktif meskipun bidang input tidak fokus. Jika tidak memiliki nilai, kelas akan dihapus dan status default bidang kembali. $floatLabelInput.on("blur", function (e) {
if (!$(e.target).val()) {
$(e.target).prev().removeClass("active");
} else {
$(e.target).prev().addClass("active");
}
});
Menambah dan menghapus kelas menggunakan event handler "fokus" dan "blur" (bukan "klik") memungkinkan pengguna untuk melihat efeknya bahkan ketika menavigasi hanya menggunakan keyboard (yaitu menekan tab untuk menggilir bidang). Hasil Akhir Berikut adalah hasil akhir dari label mengambang kami di bidang formulir dalam formulir opsi email Divi. Pikiran Akhir Menambahkan label mengambang ke formulir Divi tidak terlalu sulit. Mendesain formulir opsi email (atau formulir Divi apa pun) ternyata sangat mudah. Namun, saat menambahkan label mengambang, ingatlah untuk menyesuaikan ukuran dan jarak bidang formulir untuk menyisakan ruang yang tepat untuk label mengambang. Setelah itu, kami menggunakan CSS khusus untuk menyembunyikan atau menampilkan placeholder secara efektif saat pengguna berfokus pada bidang. Karena setiap browser memerlukan awalan yang berbeda untuk menargetkan elemen semu placeholder, penting untuk melakukannya dengan benar. JQuery yang kami tambahkan menambahkan dan menghapus kelas pada elemen label yang akan menampilkannya saat diperlukan. Secara keseluruhan, ini adalah interaksi mikro yang solid yang menambah pengalaman pengguna. Jangan ragu untuk menggunakan proses yang sama ini pada formulir Divi lainnya (seperti login atau formulir kontak) juga. Jangan lupa untuk menambahkan kelas khusus pada formulir sebelum menambahkan kode khusus. Setelah itu, Anda mungkin perlu mengubah pengaturan desain bidang formulir untuk memastikannya memiliki cukup ruang untuk label mengambang tersebut. Saya berharap untuk mendengar dari Anda di komentar. Bersulang!