Cara Menambahkan Label Mengambang ke Bidang Formulir di Divi

Menambahkan label mengambang ke bidang formulir di Divi dapat meningkatkan desain dan UX bentuk Divi apa pun dengan cara yang halus, namun kuat. Setiap formulir situs web (bukan hanya Divi) biasanya menyertakan beberapa jenis bidang masukan dan label untuk bidang masukan tersebut. Misalnya, formulir mungkin memiliki bidang input teks untuk nama di mana Anda dapat memasukkan teks (atau nama) dan label untuk kotak input bidang itu (yaitu "Nama"). Label ini mungkin terlihat atau tersembunyi tergantung pada gaya formulir. Selain label, kolom input juga dapat berisi elemen pseudo placeholder yang berfungsi sebagai semacam label sementara di dalam kolom input yang tetap terlihat hingga pengguna memasukkan nilai input. Di Divi, desain default menyembunyikan elemen label dan hanya menampilkan teks placeholder. Menambahkan label mengambang ke formulir Divi akan memungkinkan desainer untuk mempertahankan nuansa ramping gaya formulir "hanya placeholder" dan juga mengungkapkan (atau mengapung) label di atas bidang setiap kali pengguna menambahkan nilai.

Dalam tutorial ini, kami akan menunjukkan cara menambahkan label mengambang ke formulir opsi email Divi. Untuk melakukan ini, kita akan menggunakan pembuat Divi untuk mendesain formulir opsi email. Kemudian kita akan menambahkan beberapa CSS dan JQuery khusus untuk menampilkan label tersembunyi tersebut saat pengguna berfokus pada bidang.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

https://youtu.be/j1m14XFztdc

Berlangganan Saluran Youtube Kami

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Menambahkan Label Mengambang ke Bidang Formulir di Divi

Membangun Formulir Email Optin

Tambahkan baris satu kolom ke bagian default di Divi Builder.

Tambahkan formulir Email Optin ke kolom.

Buka modal Pengaturan Keikutsertaan Email. Di bawah tab konten, perbarui teks judul dan hapus teks isi.

Pastikan untuk menautkan penyedia layanan akun email Anda. Jika tidak, email optin tidak akan muncul di halaman live.

Selanjutnya, tambahkan warna latar belakang berikut ke email optin:

• Warna Latar Belakang: #1f4b74

Di bawah tab desain, perbarui tata letak formulir:

• Tata Letak: Tubuh Di Atas, Bentuk Di Bawah

Kemudian perbarui gaya bidang sebagai berikut:

• Warna Latar Belakang Bidang: transparan
• Warna Teks Bidang: #ffffff
• Margin Bidang: 1.5em atas
• Bidang Padding: 0.5em atas, 0.5em bawah, 1em kiri, 1em kanan
• Ukuran Teks Bidang: 1.2em
• Tinggi Garis Bidang: 2em

Selanjutnya, perbarui gaya batas bidang:

• Bidang Sudut Bulat: 0px
• Lebar Batas Bawah Bidang: 2px
• Warna Batas Bawah Bidang: #ffffff

Mari kita juga memperbarui gaya font Judul:

• Judul Font Berat: Tebal
• Judul Font Gaya: TT
• Perataan Teks Judul: Tengah

Dan sekarang mari kita lanjutkan dan gaya tombolnya.

• Gunakan Gaya Kustom untuk Tombol: YA
• Warna Teks Tombol: #1f4b74
• Warna Latar Tombol: #ffffff
• Jarak huruf tombol: 0.1em
• Berat Huruf Tombol: Tebal
• Gaya Font Tombol: TT

Untuk kustomisasi desain terakhir kami, mari tambahkan max-width dan padding ke formulir sebagai berikut:

• Lebar Maks: 500px
• Padding: 5% atas, 5% bawah, 3% kiri 3% kanan

Terakhir, kita perlu menambahkan Kelas CSS ke modul sehingga kita dapat menargetkannya dengan kode CSS dan JQuery kita di langkah berikutnya.

Menambahkan Kode Kustom

Untuk menambahkan CSS dan JQuery khusus, tambahkan modul kode di bawah modul formulir keikutsertaan email.

CSS

Di kotak konten kode, tempel CSS berikut memastikan untuk membungkus CSS dalam tag gaya yang diperlukan:

.et-float-labels p {
  position: relative !important;
}

.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;
}

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

.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;
}

JQuery

Di bawah tag gaya akhir, tempel JQuery berikut dan bungkus dengan tag skrip yang diperlukan.

jQuery(document).ready(function ($) {
  var $floatLabelInput = $(".et-float-labels .input");
  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });
  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });
});

Memecah Kode

Tentang CSS

Pertama, kami menargetkan bidang dan memberinya posisi relatif sehingga kami dapat memberi elemen label posisi absolut di dalam bidang (atau elemen p).

.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!