Cara Membuat Formulir Kontak Sebaris dengan Divi

Bagian pahlawan (atau paro atas) di beranda adalah real estat utama. Dan seperti kebanyakan pengembang real estat, Anda ingin memaksimalkan ruang Anda. Di situlah formulir kontak inline berguna. Formulir inline pada dasarnya adalah formulir di mana semua bidang atau kontrolnya tetap berdampingan, sejajar, dan rata kiri. Tata letak yang ringkas ini sangat bagus untuk meningkatkan konversi di beranda atau laman landas.

Hari ini saya akan menunjukkan cara membuat formulir kontak sebaris untuk situs web Anda menggunakan Divi's Visual Builder. Pekerjaan yang diperlukan untuk melakukan ini benar-benar tentang menyesuaikan lebar dan perataan bidang formulir. Untuk mencapai ini, kami akan memanfaatkan fitur desain modul kontak serta menambahkan beberapa CSS Kustom dalam tab Lanjutan.

Jika Anda baru mengenal Divi, jangan biarkan tab Advanced menghalangi Anda untuk menangani tutorial ini. Saya telah mencoba yang terbaik untuk menjaga hal-hal sederhana dan jelas.

Menikmati.

Berikut adalah Contoh Bentuk Kontak Sebaris Akan Terlihat

Konsep & Inspirasi

Jika Anda pernah harus berbelanja asuransi mobil atau mencari rumah baru secara online, Anda mungkin pernah melihat formulir sebaris yang sengaja dipadatkan dengan bidang input minimal sehingga Anda (pengguna) akan lebih cenderung membuat bola bergulir di kutipan baru. Jadi saya ingin membuat formulir kontak sebaris sederhana yang akan melakukan hal serupa untuk pengguna Divi. Meskipun formulir kontak ini tidak akan dapat melakukan hal-hal seperti membuat penawaran atau membuat daftar rumah, ini sesuai dengan kebutuhan pemilik bisnis atau blogger yang ingin menyediakan cara mudah bagi klien atau pengguna untuk menjangkau.

Menerapkan Desain Dengan Divi

Berlangganan Saluran Youtube Kami

Kita mulai dengan menambahkan Bagian Reguler dengan satu baris struktur kolom.

Karena sisa elemen kita akan sulit dilihat pada latar belakang putih, mari lanjutkan dan tambahkan warna latar belakang ke bagian kita dengan membuka Pengaturan Bagian dan memperbarui yang berikut:

Opsi Konten

Warna Latar Belakang: #006ea5

Simpan Pengaturan

Sekarang kita dapat menambahkan Modul Formulir Kontak kita ke baris.

Perbarui Pengaturan Formulir Kontak sebagai berikut:

Opsi Konten

Kirim Teks Tombol: “Dapatkan Penawaran”
Email: [Masukkan alamat email tujuan pengiriman pesan]
Tampilan Captcha: TIDAK
Warna Latar Belakang Formulir: rgba(255,255,255,0)

Pilihan Desain

Font Bidang Formulir: Lato
Ukuran Font Bidang Formulir: 24px
Warna Teks Bidang Formulir: #ffffff
Radius Batas Masukan: 3px
Gunakan Perbatasan: YA
Warna Perbatasan: #ffffff
Lebar Perbatasan: 1px
Ukuran Teks Tombol: Desktop 24px, Tablet 20px, Smartphone 20px
Warna Teks Tombol: #0c71c3
Warna Latar Tombol: #f4f11f
Lebar Batas Tombol: 3px
Radius Perbatasan Tombol: 3

Simpan Pengaturan

Kembali ke tab Konten dan hapus bidang pesan dengan mengklik ikon tempat sampah di sebelah kanan bilah bidang. Kemudian tambahkan bidang baru dengan mengklik tombol lingkaran abu-abu dengan tanda plus putih yang terletak di bawah bilah bidang individual. Ini akan menjadi bidang Telepon.

Perbarui Pengaturan Bidang sebagai berikut:

Opsi Konten

ID Bidang: "Telepon"
Judul: Telepon

Pilihan Desain

Buat Lebar Penuh: TIDAK
Simbol yang Diizinkan: Hanya Angka (0-9)

Opsi Lanjutan

Masukkan CSS Kustom berikut di dalam kotak Elemen Utama :

Max-width: 18%;
Float: left;
Margin-top: -1.5%;
Clear: none !important;

Simpan Pengaturan

Sekarang kembali ke tab Konten Pengaturan Formulir Kontak Anda dan duplikat bidang Telepon yang baru saja Anda buat dan ubah menjadi bidang Kode Pos.

Perbarui Pengaturan Bidang sebagai berikut:

Opsi Konten

ID Bidang: "Zip"
Judul: Kode Pos

Opsi Lanjutan

Masukkan CSS Kustom berikut di dalam kotak Elemen Utama :

Max-width: 17%;
Margin-top: -1.5%;

Simpan Pengaturan

Sejauh ini kami telah menyesuaikan lebar dan perataan bidang Telepon dan Kode Pos kami. Sekarang kita perlu melakukan hal yang sama untuk bidang Nama dan Email.

Buka pengaturan bidang Nama dan perbarui Opsi Lanjutan dengan CSS Kustom berikut di dalam kotak Elemen Utama :

Max-width: 20%;
Margin-top: -1.5%;

Simpan Pengaturan

Selanjutnya pergi ke pengaturan bidang Email dan perbarui Opsi Lanjutan dengan CSS Kustom berikut di dalam kotak Elemen Utama :

Max-width: 20%;
Margin-top: -1.5%;

Simpan Pengaturan

Catatan Penting: Perhatikan bahwa CSS khusus yang digunakan untuk setiap bidang memiliki properti max-width yang disetel ke persentase tertentu. Persentase ini menentukan seberapa lebar bidang Anda akan terkait dengan lebar area konten Anda. Misalnya, area konten default Divi adalah 1080px sehingga bidang nama adalah 20% dari 1080px. Ini penting untuk diketahui jika Anda ingin membuat lebih banyak ruang untuk formulir sebaris Anda. Yang perlu Anda lakukan hanyalah menyesuaikan nilai persentase untuk properti max-width sesuai kebutuhan.

Hampir selesai. Sekarang yang harus kita lakukan adalah membersihkan jarak bagian dan baris yang menampung formulir. Buka Pengaturan Bagian , di bawah tab Desain , dan perbarui yang berikut ini:

Padding Kustom: Atas 12px, Bawah 14px

Simpan Pengaturan

Sekarang buka Pengaturan Baris , di bawah tab Desain , dan perbarui yang berikut:

Padding Kustom: 48px Atas, 0px Kanan, 0px Bawah, 0px Kiri

Simpan Pengaturan

Menjadikannya Responsif

Karena ini adalah formulir horizontal, bidang formulir perlu disesuaikan pada perangkat seluler. Untuk memperbaikinya, yang diperlukan hanyalah satu potongan kecil CSS khusus. Buka Pengaturan Halaman , di bawah tab Lanjutan , dan berikut ini di kotak CSS Khusus :

@media (max-width: 767px) {

p.et_pb_contact_field {
max-width: 100% !important;
}
}

Inilah cara formulir merespons ukuran layar yang berbeda.

Membuat Formulir Kontak Sebaris Tiga Bidang

Sekarang setelah Anda membuat formulir sebaris dengan empat bidang, Anda dapat dengan mudah mengonversinya menjadi bidang tiga formulir dengan memperbarui beberapa opsi. Berikut langkah-langkahnya:

1. Edit formulir sebaris yang baru saja Anda buat atau duplikat formulir.
2. Hapus Bidang Kode Pos (sekarang Anda hanya memiliki tiga bidang)
3. Perbarui Pengaturan Bidang Telepon (atau apa pun bidang ketiga), di bawah tab Lanjutan, dengan CSS Kustom berikut di

   Main Element box:max-width: 25%;
   float:left;
   margin-top: -1.5%;
   clear: none !important;

4. Perbarui Pengaturan Bidang Email (atau apa pun bidang kedua), di bawah tab Lanjutan, dengan CSS Kustom berikut di kotak Elemen Utama:

   max-width: 25%;
   margin-top: -1.5%;

5. Perbarui Pengaturan Bidang Nama (atau apa pun bidang pertama), di bawah tab Lanjutan, dengan CSS Kustom berikut di kotak Elemen Utama:

   max-width: 25%;
   margin-top: -1.5%;

Catatan: Perhatikan properti max-width untuk masing-masing bidang sekarang 25% untuk menambah lebar bidang.

Membuat Formulir Kontak Sebaris Dua Bidang

Anda juga dapat mengonversi formulir sebaris menjadi formulir dua bidang dengan memperbarui beberapa opsi. Berikut langkah-langkahnya:

1. Edit formulir sebaris yang baru saja Anda buat atau duplikat formulir.
2. Hapus Bidang Kode Pos dan Bidang Telepon sehingga Anda hanya memiliki dua bidang (nama dan email)
3. Perbarui Pengaturan Bidang Nama (atau apa pun bidang pertama), di bawah tab Lanjutan, dengan CSS Kustom berikut di kotak Elemen Utama:

   max-width: 37%;
   margin-top: -1.5%;

4. Perbarui Pengaturan Bidang Email (atau apa pun bidang kedua), di bawah tab Lanjutan, dengan CSS Kustom berikut di kotak Elemen Utama:

   max-width: 37%;
   margin-top: -1.5%;
   clear: none !important;

Menambahkan Jenis Bidang Lainnya

Tutorial ini terutama untuk jenis bidang masukan biasa, tetapi Anda dapat dengan mudah mengubahnya ke jenis bidang yang berbeda. Misalnya, jika Anda ingin menggunakan jenis bidang tarik-turun pilih, Anda dapat menerapkan semua gaya yang sama seperti yang Anda lakukan untuk bidang lainnya. Namun, Anda perlu menambahkan warna latar belakang (#006ea5) ke bidang tertentu sehingga Anda dapat melihat opsi.

Berikut adalah tampilan bidang drop-down…

Pikiran Akhir

Dalam pengalaman saya, formulir kontak sebaris dapat menjadi alat yang ampuh untuk bisnis Anda. Ada plugin yang lebih canggih di luar sana dengan opsi yang lebih kuat di luar kotak, tetapi jika plugin lain bukan pilihan Anda dan solusi yang lebih sederhana masuk akal, cobalah ini. Harap Anda menyukainya.

Looking forward untuk mendengar dari Anda di komentar.