Cara Membuat Formulir Kontak di Klik dengan Divi

Dalam tutorial Divi ini, kami akan menunjukkan cara membuat formulir kontak yang muncul setelah mengklik tombol (sebagai overlay) dengan menggunakan tidak lain dari Divi, beberapa kode jQuery dan kode CSS.

Ini adalah cara yang bagus untuk menjaga pengunjung situs Anda tetap fokus pada tindakan yang telah mereka lakukan dengan mengklik tombol. Itu tidak membawa mereka ke halaman yang berbeda tetapi mengunci mereka ke dalam tindakan itu sampai selesai.

Di bawah ini Anda dapat melihat sekilas apa yang akan kita buat dan kemudian masuk ke tutorial!

Hasil di Desktop

Hasil di Ponsel & Tablet

Inspirasi

Inspirasi untuk posting ini berasal dari permintaan komentar dan ditemukan di B3multimedia. Meskipun mereka menggunakan metode lain untuk membuat ini bekerja, mereka juga memiliki cara yang menakjubkan untuk membuat formulir kontak di klik. Lihatlah hasilnya:

Buat Bagian dengan Modul Tombol

Biasanya kami menunjukkan bagaimana melakukan hampir semua hal di pembuat visual frontend Divi. Namun dalam posting hari ini saya akan menggunakan pembuat backend. Karena kode yang kami gunakan sedikit lebih mudah. Yang mengatakan, jika Anda menyukai editor frontend seperti kami, Anda dapat dengan mudah menyelesaikan tutorial ini menggunakan tampilan "kerangka" frontend.

Oke, mari kita masuk ke tutorial ini!

Berlangganan Saluran Youtube Kami

Hal pertama yang perlu kita lakukan adalah menambahkan bagian baru di mana kita menempatkan tombol yang memungkinkan formulir kontak muncul. Cukup tambahkan bagian standar dan pilih baris satu kolom. Setelah Anda selesai melakukannya, tambahkan Modul Tombol ke dalamnya.

Anda dapat mengatur gaya tombol sesuka Anda, tetapi Anda harus memastikan bahwa URL tombol dimulai dengan '#' diikuti dengan yang lain. Anda tidak bisa membiarkannya kosong atau menggunakan karakter '#' saja. Dengan menambahkan '#' dan beberapa teks, halaman tidak akan bergerak setelah Anda mengklik tombol. Jika Anda membiarkannya kosong, halaman akan disegarkan saat diklik. Dan jika Anda hanya menggunakan '#', Anda akan dikirim ke bagian atas halaman.

Hal penting berikutnya yang perlu kita lakukan adalah menetapkan kelas CSS ke tombol. Kami akan menggunakan kelas CSS ini nanti di posting ini dalam kode jQuery untuk memastikan formulir kontak muncul setelah mengklik. Kelas yang harus kita tetapkan ke tombol hanyalah 'tombol'.

Buat Formulir Kontak Desktop di Klik

Hal berikutnya yang perlu kita lakukan adalah membuat formulir kontak desktop yang akan muncul setelah seseorang mengklik tombol yang telah kita buat di bagian sebelumnya dari posting ini. Nanti di postingan ini, kami juga akan menunjukkan cara membuat versi seluler.

Anda pada dasarnya dapat membuat desain apa pun yang Anda inginkan dalam satu baris dan membuatnya muncul sebagai sembulan jika Anda menggunakan metode ini. Kami hanya akan memberi Anda gambaran tentang apa yang dapat Anda capai dengan menunjukkan cara membuat contoh berikut:

Tambahkan Bagian Standar Baru

Mulailah dengan menambahkan bagian standar baru ke halaman yang sedang Anda kerjakan. Buka tab Lanjutan dari bagian yang baru saja Anda tambahkan dan tambahkan 'sembulan' ke bidang Kelas CSS. Gulir ke bawah tab yang sama dan tempatkan baris kode CSS berikut ke dalam bidang Sebelum dari subkategori CSS Kustom:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Dengan menambahkan ini, kami memastikan bahwa bagian tersebut memenuhi seluruh tab. Anda dapat menyesuaikan warna latar belakang dalam kode CSS untuk membuat hamparan latar belakang yang Anda inginkan. Dalam hal ini, kami menggunakan warna hitam dengan sedikit transparansi. Di dalam tab yang sama, tambahkan juga baris kode CSS berikut ke Elemen Utama:

display: none;

Hal terakhir yang perlu kita lakukan di tab Lanjutan adalah menonaktifkan bagian di ponsel dan tablet di subkategori Visibilitas.

Tambahkan Baris Dua Kolom

Lanjutkan dengan menambahkan baris dua kolom dan buka tab Desain. Mulailah dengan memodifikasi lebar baris di subkategori Ukuran. Dalam contoh ini, kami telah menggunakan lebar kustom 1291px.

Gulir ke bawah tab Desain dan gunakan '30px' untuk padding atas, kiri dan kanan kedua kolom dalam subkategori Spasi.

Selesaikan dengan masuk ke tab Advanced. Di dalam Elemen Utama, tambahkan baris kode CSS berikut:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Tambahkan Modul Teks Pertama

Setelah Anda membuat semua perubahan pada bagian dan baris, saatnya menambahkan modul berbeda yang ingin Anda tampilkan. Hal pertama yang akan kita tambahkan adalah judul yang muncul. Mulailah dengan menambahkan Modul Teks baru ke kolom pertama baris, tulis teks di dalam tab Konten dan pindah ke tab Desain. Di dalam tab Desain, kami telah menggunakan pengaturan berikut untuk subkategori Teks:

• Orientasi Teks: Tengah
• Font Teks: Lobster
• Gaya Font: Tebal
• Ukuran Font Teks: 37
• Warna Teks: #002282
• Tinggi Baris Teks: 1.7em

Tambahkan Modul Teks Kedua

Lanjutkan dengan menambahkan Modul Teks baru dan ketik teks yang ingin Anda tampilkan di tab Konten. Pindah ke tab Desain dan buat pengaturan berikut berlaku untuk Subkategori Teks:

• Orientasi Teks: Tengah
• Font Teks: Arial
• Ukuran Font Teks: 13
• Warna Teks: #002282
• Tinggi Baris Teks: 1.7em

Tambahkan Modul Ikuti Media Sosial

Selanjutnya, kita akan menambahkan Modul Ikuti Media Sosial ke kolom pertama juga. Dalam hal ini, kami telah memilih tiga ikon sosial; Facebook, Twitter, dan Instagram. Setelah Anda menambahkan ikon sosial ini di tab Konten, ubah Bentuk Tautan menjadi 'Lingkaran' di subkategori Ikon.

Hal terakhir yang perlu kita lakukan adalah menambahkan padding kiri ke modul ini di tab Advanced. Tambahkan baris kode CSS berikut ke Elemen Utama:

padding-left: 40%;

Tambahkan Modul Formulir Kontak

Kemudian, kita bisa pergi ke kolom kedua dari baris. Di kolom itu, hal pertama yang akan kita tempatkan adalah Modul Formulir Kontak. Untuk contoh ini, kami hanya memilih dua bidang; nama dan emailnya. Setelah Anda menambahkan Modul Formulir Kontak, buka tab Desain Modul Formulir Kontak dan buat perubahan berikut pada subkategori Teks Bidang Formulir:

• Ukuran Font Bidang Formulir: 15
• Warna Teks Bidang Formulir: #002282
• Bentuk Garis Bidang Tinggi: 1.7em

Di dalam tab yang sama, buat perubahan berikut berlaku untuk subkategori Tombol:

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 20
• Warna Teks Tombol: #FFFFFF
• Warna Latar Belakang Tombol: #0086c4
• Lebar Perbatasan Tombol: 2
• Jari-jari Tombol: 3

Pindah ke tab Advanced dan tambahkan padding atas 5%.

Tambahkan Modul Blurb

Hal lain yang perlu kita tambahkan ke kolom kedua adalah Modul Blurb. Satu-satunya hal yang kita butuhkan untuk Modul ini adalah ikon keluar di kanan atas popup. Pilih ikon berikut dalam daftar ikon dan biarkan semua hal lainnya kosong.

Selanjutnya, buka tab Advanced dan ketik 'close' sebagai kelas CSS. Di dalam tab yang sama, tambahkan baris kode berikut ke Elemen Utama dari subkategori CSS Kustom:

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

Terapkan Latar Belakang Gradien ke Baris

Last but not least, kita akan menambahkan beberapa latar belakang gradien yang tampak bagus ke baris. Buka pengaturan dan buat perubahan berikut berlaku untuk opsi latar belakang gradien:

• Warna Gradien Pertama: #FFFFFF
• Warna Gradien Kedua: #0c71c3
• Tipe Gradien: Linier
• Arah Gradien: 124deg
• Posisi Awal: 50%
• Posisi Akhir: 50%

Buat Formulir Kontak Tablet & Telepon di Klik

Sekarang setelah kita membuat versi desktop, versi untuk tablet dan ponsel akan berjalan jauh lebih cepat. Sebagian besar modul yang kami gunakan untuk versi Desktop sama untuk versi seluler. Hasil akhirnya di ponsel terlihat seperti ini:

Tambahkan Bagian Standar Baru

Mulailah dengan menambahkan bagian standar lainnya. Bagian ini harus memiliki pengaturan yang sama dengan bagian yang telah kita buat sebelumnya. Tambahkan 'popup' ke kelas CSS dan tambahkan baris kode CSS berikut ke bidang Sebelum:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Tambahkan baris kode CSS berikut ke Elemen Utama juga:

display: none;

Alih-alih menonaktifkannya untuk ponsel dan tablet, seperti yang kami lakukan untuk versi desktop, kami akan menonaktifkannya di desktop dalam subkategori Visibilitas:

Tambahkan Baris Satu Kolom

Untuk popup ponsel dan tablet, kita hanya membutuhkan satu kolom. Untuk baris ini, kita tidak akan menggunakan lebar kustom. Namun, kami akan menerapkan padding khusus seperti yang kami lakukan untuk versi desktop; 30px untuk padding atas, kiri dan kanan kolom.

Kita juga perlu memastikan bahwa baris kode CSS berikut ditambahkan ke Elemen Utama dalam subkategori CSS Kustom:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Kloning Modul Teks, Ikuti Media Sosial & Formulir Kontak

Hal berikutnya yang perlu kita lakukan adalah mengkloning Modul Teks pertama yang kita gunakan untuk versi Desktop bersama dengan Modul Follow Media Sosial dan Formulir Kontak. Setelah Anda mengkloningnya, letakkan di baris satu kolom dari bagian baru yang baru saja Anda buat.

Modul Blurb Klon & Ubah Kode CSS di Tab Tingkat Lanjut

Anda juga dapat mengkloning Modul Blurb yang digunakan untuk versi desktop tetapi perlu ada sedikit perubahan pada kode CSS. Alih-alih menggunakan kode untuk desktop, gunakan yang berikut ini sebagai gantinya:

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

Pastikan kelas CSS 'tutup' juga digunakan untuk Modul Blurb.

Terapkan Latar Belakang Gradien ke Baris

Untuk versi seluler, kami menggunakan pengaturan yang berbeda untuk latar belakang gradien baris:

• Warna Gradien Pertama: #FFFFFF
• Warna Gradien Kedua: #0c71c3
• Tipe Gradien: Linier
• Arah Gradien: 180 derajat
• Posisi Awal: 40%
• Posisi Akhir: 40%

Tambahkan Kode jQuery ke Opsi Tema

Hal terakhir yang perlu kita lakukan untuk tutorial ini adalah menambahkan kode jQuery. Anda dapat menambahkan kode melalui Opsi Tema atau melalui Modul Kode yang Anda tempatkan di dalam halaman yang sedang Anda kerjakan. Untuk contoh ini, kita hanya akan meletakkannya di Opsi Tema.

Untuk melakukannya, buka Dasbor WordPress > Divi > Opsi Tema > Integrasi > Dan tempel baris kode jQuery berikut di dalam kepala situs web Anda:

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

Hasil

Jika Anda mengikuti posting, langkah demi langkah, Anda harus dapat mencapai hasil berikut di desktop:

Dan berikut hasilnya di tablet dan ponsel:

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat formulir kontak di klik. Menggunakan metode ini untuk berhubungan dengan pengunjung Anda halus namun efektif. Jika Anda memiliki pertanyaan atau saran; pastikan Anda meninggalkan komentar di bagian komentar di bawah.

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!

Gambar Unggulan oleh La1n / shutterstock.com