Membuat Beberapa Formulir Kontak Tertarget pada Arahkan dalam Satu Desain dengan Divi

Cara Anda menampilkan formulir kontak di situs web Anda pasti dapat membantu meningkatkan tingkat konversi. Selain membuat formulir kontak yang indah dan ramah pengguna, Anda juga dapat mendekatinya dengan cara yang lebih tepat sasaran. Dalam posting ini, kami akan menunjukkan cara membuat satu desain dengan beberapa formulir kontak yang muncul tergantung pada layanan yang diminati pengunjung Anda. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Formulir Kontak yang Ditargetkan GRATIS

Untuk meletakkan tangan Anda pada tata letak formulir kontak bertarget gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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!

Setelah Anda mengunggah tata letak ke halaman Anda, Anda masih harus menambahkan kode CSS ke halaman yang sedang Anda kerjakan. Anda dapat menemukan kode CSS di akhir tutorial ini.

Berlangganan Saluran Youtube Kami

Mari Mulai Berkreasi!

Tambahkan Bagian #1

Buka halaman baru atau yang sudah ada dan tambahkan bagian reguler baru.

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Tambahkan Modul Teks

Tambahkan Konten H2

Tambahkan Modul Teks ke kolom dengan beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Pindah ke tab desain dan ubah pengaturan teks H2 yang sesuai:

• Judul 2 Berat Font: Ultra Tebal
• Judul 2 Gaya Font: Huruf Besar
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #000000
• Judul 2 Ukuran Teks: 6vw
• Spasi Judul 2 Huruf: -0.4vw
• Pos 2 Tinggi Baris: 0.8em

Jarak

Tambahkan beberapa margin atas dan bawah kustom juga.

• Margin Atas: 2vw
• Margin Bawah: 2vw

Tambahkan Bagian #2

Latar Belakang Gradien

Tambahkan bagian lain tepat di bawah yang sebelumnya dan terapkan latar belakang gradien berikut (atau latar belakang gradien pilihan Anda):

• Warna 1: #30fff1
• Warna 2: #4635ff
• Arah Gradien: 110deg
• Posisi Akhir: 85%

Pembagi Atas

Pindah ke tab desain dan tambahkan pembagi atas.

• Gaya Pembagi: Temukan di Daftar
• Pengaturan Pembagi: Isi Bagian Bawah

Pembagi Bawah

Tambahkan pembagi bawah juga.

• Gaya Pembagi: Temukan di Daftar
• Pengaturan Pembagi: Isi Bagian Bawah

Perekat

Ubah ketinggian di pengaturan ukuran berikutnya.

• Tinggi: 200px

Jarak

Tambahkan beberapa pengaturan spasi khusus berikutnya.

• Margin Bawah: 30vw (Desktop), 45vw (Tablet), 200vw (Telepon)
• Padding Atas: 0vw
• Padding Bawah: 0vw

Kelas CSS

Nanti di postingan, kita akan menambahkan beberapa kode CSS untuk membuat efeknya bekerja. Sebagai persiapan untuk itu, kami akan menambahkan kelas CSS ke bagian tersebut.

• Kelas CSS: bagian kontak

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Meluap

Buka pengaturan baris dan sembunyikan luapan.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Transisi

Hapus juga durasi transisi.

• Durasi Transisi: 0ms

Tambahkan Modul Blurb

Tambahkan Judul ke Kotak Konten

Saatnya mulai menambahkan modul! Tambahkan Modul Blurb dan masukkan judul pilihan Anda yang mewakili salah satu layanan Anda.

Pilih Ikon

Pilih ikon berikutnya.

Warna Latar Default

Lanjutkan dengan menambahkan warna latar belakang default.

• Warna Latar Belakang: #ffffff

Arahkan Warna Latar Belakang

Ubah warna latar belakang saat melayang.

• Warna Latar Belakang: #000000

Pengaturan Ikon Default

Pindah ke tab desain dan ubah pengaturan ikon yang sesuai:

• Warna Ikon: #000000
• Gunakan Ukuran Font Ikon: Ya
• Ikon Ukuran Font: 2.5vw (Desktop), 5vw (Tablet), 7vw (Telepon)

Arahkan ke Pengaturan Ikon

Ubah warna ikon saat melayang.

• Warna Ikon: #ffffff

Pengaturan Teks Judul Default

Buka pengaturan teks judul berikutnya dan terapkan perubahan berikut:

• Judul Font Berat: Ultra Tebal
• Judul Font Style: Huruf Besar
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #000000
• Judul Teks Ukuran: 0.9vw (Desktop), 1.8vw (Tablet), 3vw (Telepon)

Arahkan ke Pengaturan Teks Judul

Ubah warna teks judul saat mengarahkan kursor.

• Warna Teks Judul: #ffffff

Perekat

Ubah lebar di berbagai ukuran layar berikutnya.

• Lebar: 10vw (Desktop), 17vw (Tablet), 30vw (Telepon)
• Penyelarasan Modul: Pusat

Jarak

Dan tambahkan beberapa nilai margin dan padding khusus ke pengaturan spasi.

• Margin Atas: 4vw
• Margin Bawah: 4vw
• Padding Atas: 2vw (Desktop), 3vw (Tablet), 6vw (Telepon)
• Padding Bawah: 2vw (Desktop), 3vw (Tablet), 6vw (Telepon)

Berbatasan

Kami juga mengubah modul menjadi lingkaran dengan menambahkan '50vw' ke setiap sudut di pengaturan batas.

Bayangan Kotak

Tambahkan bayangan kotak juga.

Skala Transformasi Default

Pindah ke pengaturan transformasi dan pastikan nilai skala transformasi default tetap '100%'.

Arahkan Skala Transformasi

Ubah nilai-nilai ini saat mengarahkan kursor.

• Bawah: 120%
• Kanan: 120%

Tambahkan Formulir Kontak

Jadikan Bidang Nama & Email Lebar Penuh

Modul kedua yang kita butuhkan di baris ini adalah Modul Formulir Kontak. Setelah Anda menambahkan formulir kontak, buka bidang nama dan email dan buat lebar penuh.

• Buat Lebar Penuh: Ya

Hapus Bidang Pesan & Sisipkan Tiga Bidang Masukan untuk Pertanyaan Khusus Layanan

Tambahkan tiga pertanyaan yang berlaku untuk layanan khusus itu berikutnya.

Nonaktifkan Captcha

Nonaktifkan opsi captcha juga.

• Tampilkan Captcha: Tidak

Pengaturan Bidang

Pindah ke tab desain dan ubah pengaturan bidang yang sesuai:

• Bidang Atas Padding: 0.6vw (Desktop), 0.9vw (Tablet), 1.5vw (Telepon)
• Bidang Bawah Padding: 0.6vw (Desktop), 0.9vw (Tablet), 1.5vw (Telepon)
• Ukuran Teks Bidang: 0.8vw (Desktop), 1.6vw (Tablet), 2.3vw (Telepon)

Pengaturan Tombol

Ubah tampilan tombol berikutnya.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #000000
• Lebar Batas Tombol: 0px
• Berat Huruf Tombol: Sangat Tebal
• Gaya Font Tombol: Huruf Besar

Jarak

Tambahkan beberapa nilai padding juga.

• Padding Atas: 2vw
• Padding Bawah: 2vw
• Padding Kiri: 2vw
• Padding Kanan: 2vw

Pengaturan Perbatasan

Last but not least, pergi ke pengaturan perbatasan dan tambahkan '10px' ke masing-masing sudut.

Baris Klon Tiga Kali

Setelah Anda menyelesaikan baris pertama, Anda dapat melanjutkan dan mengkloningnya tiga kali.

Ubah Konten Blurb & Ikon untuk Setiap Baris Duplikat

Pastikan Anda mengubah judul dan ikon uraian untuk setiap duplikat.

Ubah Pertanyaan Khusus Layanan untuk Setiap Baris Duplikat

Ubah juga pertanyaan spesifik formulir kontak.

Pengaturan Baris Tambahan

Tinggi Default

Buka pengaturan baris pertama sekali lagi, buka pengaturan ukuran dan ubah ketinggian di berbagai ukuran layar.

• Tinggi: 18vw (Desktop), 27vw (Tablet), 38vw (Telepon)

Tinggi Arahkan kursor

Kembalikan ketinggian ke otomatis saat mengarahkan kursor.

• Tinggi: otomatis

Perluas Pengaturan Ukuran Baris ke Semua Baris di Bagian

Setelah Anda mengubah pengaturan ukuran untuk baris pertama, Anda dapat memperluas pengaturan ke semua baris di seluruh bagian.

Tempatkan Baris Bersebelahan di Desktop & Tablet

Buka Pengaturan Halaman

Last but not least, kita akan menempatkan keempat baris di samping satu sama lain di tablet dan desktop. Untuk melakukan itu, buka pengaturan halaman.

Masukkan CSS Khusus

Pindah ke kotak CSS khusus dan tambahkan baris Kode CSS berikut:

@media (min-width: 767px) {
.contact-section {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
}

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat beberapa formulir kontak yang ditargetkan dalam satu desain. Ini adalah cara yang bagus untuk mempelajari lebih lanjut tentang pengunjung Anda dan layanan khusus apa yang mereka minati. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.