Jika kita membuat form dengan modul contact form di Divi maka labelnya akan hilang begitu kita mengisi, padahal kita mungkin saja menghendaki suatu form yang labelnya tetap muncul untuk memudahkan calon pelanggan mengisi form order. Artikel ini merupakan kelanjutan artijkel sebelumnya
di https://www.proweb.co.id/articles/divi/contact-form.html .

Langkah-langkah memunculkan label pada Divi Digital Theme adalah

  1. Melihat tampilan sebelumnya

    Gambar di atas adalah hasil pada artikel sebelumnya. Tampak bahwa field nama sudah tidak muncul dan diganti dengan isian.
  2. Update Divi – Theme Options – Custom CSS

    Untuk memunculkan field pada contact form kita memberikan css display:block untuk tag label seperti gambar di atas atau seperti di bawah ini

    /*add labels above the form input fields*/
    .et_pb_contact_form label.et_pb_contact_form_label {
    display: block !important;
    font-weight: bold;
    }
    

  3. Update Fields Color dan Fields Focus Color

    Kita kemudian melakukan seting pada Fields Background Color dan Fields Text Color seperti gambar di atas. Kedua seting ini harus kontras satu dengan yang lain.


    Kita kemudian melakukan seting pada Fields Focus Background Color dan Fields Focus Text Color seperti gambar di atas. Kedua seting ini harus kontras satu dengan yang lain.
  4. Update Divi – Theme Options – Custom CSS
    Pada tampilan kali ini dengan Divi Digital Theme, margin-left dari contact form diisi -3% dan tampak tidak rapi. Kita merapikan dengan menambahkan pada Custom CSS

    .et_pb_contact_form {
    margin-left: auto;
    }
    

  5. Hasil akhir

    Terlihat hasilnya sudah menampilkan label dengan benar sehingga calon pelanggan atau calon client mudah mengisi form ini.

Informasi lebih lanjut silahkan mengunjungi
1. https://www.peeayecreative.com/how-to-move-labels-above-input-fields-in-the-divi-contact-form/ .
2. https://www.elegantthemes.com/documentation/divi/contact/ .
3. https://www.proweb.co.id/articles/divi/wp-mail-smtp.html .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Memunculkan Label pada Contact Form Divi

One thought on “Memunculkan Label pada Contact Form Divi

Comments are closed.