5 Cara Unik untuk Menata Modul Formulir Kontak Divi

Formulir kontak adalah bagian penting dari banyak situs web. Tujuan utama mereka adalah menjadi intuitif dan membantu pengunjung dengan mudah berhubungan. Tapi itu tidak berarti semua formulir kontak harus terlihat dengan cara tertentu dan telah ditentukan sebelumnya. Anda dapat dengan mudah menggabungkan pengalaman intuitif dengan desain yang indah. Itulah tepatnya yang akan kita lakukan dalam posting ini. Kami akan membagikan 5 desain modul formulir kontak Divi unik yang dapat Anda buat menggunakan opsi bawaan Divi saja.

Mari kita lakukan!

Pratinjau Desain Modul Formulir Kontak Divi

Desktop

Mari kita mulai dengan melihat desain modul formulir kontak Divi di desktop.

Seluler

Dan seperti inilah desain modul formulir kontak Divi pada ukuran layar yang lebih kecil:

5 Cara Unik untuk Menata Modul Formulir Kontak Divi

Berlangganan Saluran Youtube Kami

Membuat Formulir Kontak #1

Tambahkan Bagian Baru

Latar Belakang Gradien

Mari kita mulai dengan contoh pertama! Tambahkan bagian baru, buka pengaturan latar belakang dan tambahkan latar belakang gradien.

• Warna 1: #4c00ff
• Warna 2: #ffd400
• Tipe Gradien: Radial
• Arah Radial: Kiri Bawah
• Posisi Awal: 34%
• Posisi Akhir: 34%

Jarak

Lalu, buka pengaturan spasi dan tambahkan beberapa nilai padding khusus.

• Padding Atas: 200px
• Padding Bawah: 200px

Tambahkan Baris Baru

Struktur Kolom

Tambahkan baris baru menggunakan struktur kolom berikut:

Warna Latar Kolom 1

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan latar belakang gradien kolom 1.

• Kolom 1 Warna Latar Belakang: rgba(255,255,255,0.55)

Gambar Latar Kolom 1

Tambahkan gambar latar belakang ke kolom pertama juga.

• Pengulangan Gambar Latar Kolom 1: Tidak Ada Pengulangan
• Kolom 1 Campuran Gambar Latar: Layar

Warna Latar Kolom 2

Dan warna background putih untuk kolom kedua.

• Kolom 2 Warna Latar Belakang: #ffffff

Perekat

Ubah pengaturan ukuran berikutnya.

• Samakan Tinggi Kolom: Ya

Jarak

Hapus semua padding kustom default juga.

• Padding Atas: 0px
• Padding Bawah: 0px

Radius Batas Kolom

Tambahkan beberapa radius batas ke kedua kolom di tab lanjutan.

border-radius: 10px;

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Saatnya mulai menambahkan berbagai modul! Tambahkan Modul Teks ke kolom pertama dengan beberapa konten pilihan.

Pengaturan Teks

Kemudian, buka pengaturan teks dan buat beberapa perubahan.

• Font teks: Satisfy
• Warna Teks: #333333
• Ukuran teks: 100px
• Tinggi Baris Teks: 1em
• Orientasi Teks: Tengah

Jarak

Tambahkan beberapa nilai padding khusus juga.

• Padding Atas: 600px
• Padding Bawah: 100px

Bayangan Kotak

Untuk menambah kedalaman pada desain, gunakan bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 80px
• Kekuatan Penyebaran Bayangan Kotak: -16px
• Warna Bayangan: rgba(0,0,0,0.3)

Tambahkan Modul Gambar ke Kolom 2

Unggah Gambar PNG

Lanjutkan dengan menambahkan Modul Gambar ke kolom kedua. Unggah gambar PNG pilihan.

Perekat

Ubah pengaturan ukuran modul ini.

• Lebar: 25% (Desktop), 50% (Tablet), 60% (Ponsel)
• Penyelarasan Modul: Pusat

Jarak

Buat tumpang tindih dengan menggunakan beberapa margin atas negatif.

• Margin Atas: -60%

Tambahkan Modul Teks #1 ke Kolom 2

Tambah isi

Tepat di bawah Modul Gambar, tambahkan Modul Teks dengan beberapa konten.

Pengaturan Teks

Ubah pengaturan teks modul ini.

• Font Teks: Memuaskan
• Warna Teks: #333333
• Ukuran Teks: 44px
• Orientasi Teks: Tengah

Tambahkan Modul Teks #2 ke Kolom 2

Tambah isi

Tambahkan modul teks lain berikutnya.

Pengaturan Teks

Ubah juga pengaturan teks modul ini.

• Font Teks: Arial
• Warna Teks: #ffd400
• Ukuran Teks: 18px
• Spasi Huruf Teks: 2px
• Orientasi Teks: Tengah

Jarak

Tambahkan beberapa margin bawah berikutnya.

• Margin Bawah: 100px

Tambahkan Modul Formulir Kontak ke Kolom 2

Aktifkan Opsi 'Buat Lebar Penuh' di Bidang Nama & Email

Modul terakhir yang dibutuhkan adalah Modul Formulir Kontak. Sebelum Anda melakukan hal lain, buka bidang nama dan email dan ubah tata letak.

• Buat Lebar Penuh: Ya

Tambahkan Bidang Subjek

Untuk membuat desain ini, kami telah menambahkan bidang lain untuk subjek.

Elemen

Nonaktifkan opsi captcha selanjutnya.

• Tampilan Captcha: Tidak

Pengaturan Teks Bidang Formulir

Buat beberapa perubahan pada pengaturan teks bidang formulir dari Modul Formulir Kontak ini.

• Warna Latar Belakang Bidang Formulir: rgba(255,255,255,0)
• Font Bidang Formulir: Arial
• Berat Font Bidang Formulir: Ringan
• Ukuran Teks Bidang Formulir: 16px
• Jarak Huruf Kolom Formulir: 2px

Pengaturan Tombol

Kami juga memodifikasi tampilan tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Warna Teks Tombol: #ffd400
• Lebar Batas Tombol: 0px
• Jarak Huruf Tombol: 2px
• Font Tombol: Arial
• Gaya Font: Garis Bawah
• Warna Garis Bawah: #4c00ff

Jarak

Tambahkan beberapa nilai padding kustom berikutnya.

• Padding Bawah: 100px
• Padding Kiri: 50px
• Padding Kanan: 50px

Berbatasan

Dan tambahkan batas bawah halus ke masing-masing bidang.

• Lebar Batas Bawah: 2px
• Warna Batas Bawah: #efefef

Jarak Lapangan Individu

Last but not least, tambahkan beberapa margin bawah ke masing-masing bidang individual kecuali untuk yang pesan.

• Margin Bawah: 20px

Membuat Formulir Kontak #2

Tambahkan Bagian Baru

Latar belakang gradien

Lanjut ke contoh berikutnya! Tambahkan bagian baru dengan latar belakang gradien.

• Warna 1: #562fef
• Warna 2: #ffffff
• Tipe Gradien: Linier
• Posisi Awal: 50%
• Posisi Akhir: 50%

Jarak

Tambahkan beberapa nilai padding kustom ke pengaturan spasi bagian ini.

• Padding Atas: 200px
• Padding Bawah: 200px

Tambahkan Baris Baru

Struktur Kolom

Tambahkan baris baru menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang ke baris.

• Warna Latar Belakang: #ffffff

Kolom 2 Latar Belakang Gradien

Tambahkan latar belakang gradien ke kolom kedua dari baris berikutnya.

• Warna 1: #9932ff
• Warna 2: #562fef
• Kolom 2 Jenis Gradien: Linear
• Kolom 2 Arah Gradien: 160deg

Perekat

Ubah juga pengaturan ukuran baris.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Jarak

Kemudian, tambahkan beberapa nilai spasi khusus.

• Padding Atas: 0px
• Padding Bawah: 0px
• Kolom 1 Padding Atas: 100px
• Kolom 1 Padding Bawah: 50px
• Kolom 1 Padding Kiri: 50px
• Kolom 1 Padding Kanan: 50px
• Kolom 2 Padding Atas: 100px
• Kolom 2 Padding Bawah: 100px
• Kolom 2 Padding Kiri: 50px
• Kolom 2 Padding Kanan: 50px

Berbatasan

Tambahkan '20px' ke masing-masing batas baris.

Bayangan Kotak

Terakhir, tambahkan bayangan kotak halus ke baris.

• Kekuatan Buram Bayangan Kotak: 45px
• Kekuatan Penyebaran Bayangan Kotak: -11px
• Warna Bayangan: rgba(0,0,0,0.3)

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Saatnya mulai menambahkan modul! Mulailah dengan Modul Teks di kolom pertama.

Pengaturan Teks

Ubah pengaturan teks modul ini.

• Berat Font Teks: Sangat Tebal
• Gaya Font Teks: Huruf Besar
• Warna Teks: #562fef
• Suze Teks: 100px (Desktop), 80px (Tablet), 60px (Telepon)
• Spasi Huruf Teks: -10px
• Tinggi Baris Teks: 1em

Jarak

Tambahkan beberapa margin bawah juga.

• Margin Bawah: 50px

Tambahkan Modul Formulir Kontak ke Kolom 1

Elemen

Modul kedua yang kita perlukan di kolom pertama adalah Modul Formulir Kontak. Setelah Anda menambahkan modul, nonaktifkan opsi 'Tampilkan Captcha'.

• Tampilan Captcha: Tidak

Pengaturan Teks Bidang Formulir

Ubah warna latar belakang bidang formulir berikutnya.

• Warna Latar Belakang Bidang Formulir: #ffffff

Pengaturan Tombol

Bermain-main dengan pengaturan tombol juga untuk membuat tombol ikon alih-alih yang berisi teks.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 73px
• Warna Teks Botton: rgba(0,0,0,0)
• Warna Latar Tombol Arahkan Arah: rgba(255,255,255,0)
• Lebar Batas Tombol: 0px
• Warna Ikon Tombol: #9932ff
• Hanya Tampilkan Ikon di Arahkan untuk Tombol: Tidak

Bayangan Kotak

Terakhir, tambahkan bayangan kotak halus ke masing-masing bidang.

• Kekuatan Buram Bayangan Kotak: 36px
• Kekuatan Buram Bayangan Kotak: -14px
• Warna Bayangan: rgba(0,0,0,0.3)

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Modul pertama yang kita perlukan di kolom kedua adalah Modul Teks lainnya.

Pengaturan Teks

Setelah Anda menambahkan konten, ubah pengaturan teks modul ini.

• Berat Font Teks: Sangat Tebal
• Warna Teks: #ffffff
• Ukuran Teks: 23px
• Spasi Huruf Teks: -1px

Tambahkan Modul Blurb #1 ke Kolom 2

Tambah isi

Modul kedua yang kita perlukan adalah Modul Blurb. Silakan dan masukkan beberapa informasi kontak.

Pilih Ikon

Kemudian, pilih ikon yang cocok.

Pengaturan Ikon

Ubah pengaturan ikon ini.

• Warna Ikon: #ffffff
• Penempatan Ikon: Kiri

Pengaturan Teks Judul

Lanjutkan dengan melakukan beberapa perubahan pada pengaturan teks judul selanjutnya.

• Ukuran Teks Judul: 15px
• Spasi Huruf Judul: -0.5px

Jarak

Dan tambahkan beberapa margin atas.

• Margin Atas: 120px

Modul Blurb Klon Dua Kali

Setelah Anda selesai memodifikasi Modul Blurb pertama, Anda dapat melanjutkan dan mengkloning modul dua kali.

Ubah Konten & Ikon Kedua Duplikat

Ubah konten dan ikon dari kedua duplikat untuk berbagi berbagai jenis informasi kontak dengan pengunjung.

Ubah Spasi Kedua Duplikat

Margin atas kedua duplikat perlu diubah juga.

• Margin Atas: 30px

Membuat Formulir Kontak #3

Tambahkan Bagian Baru

Warna latar belakang

Ke contoh ketiga! Tambahkan bagian baru dengan warna latar belakang berikut:

• Warna Latar Belakang: #3491CE

Jarak

Lanjutkan dengan menambahkan beberapa nilai padding kustom dalam pengaturan spasi.

• Padding Atas: 200px
• Padding Bawah: 200px

Tambahkan Baris #1

Struktur Kolom

Kemudian, tambahkan baris baru menggunakan struktur kolom berikut:

Tambahkan Modul Teks

Tambah isi

Saatnya mulai menambahkan modul! Modul pertama yang perlu kita tambahkan ke kolom pertama adalah Modul Teks. Masukkan beberapa konten pilihan.

Pengaturan Teks

Kemudian, ubah pengaturan teks.

• Berat Font Teks: Sangat Tebal
• Warna Teks: rgba (255,255,255,0.24)
• Ukuran teks: 100px (Desktop), 86px (Tablet), 60px (Ponsel)
• Tinggi Baris Teks: 1em
• Orientasi Teks: Tengah

Jarak

Tambahkan beberapa margin bawah negatif juga.

• Margin Bawah: -100px

Tambahkan Baris #2

Struktur Kolom

Baris kedua yang kita butuhkan untuk melengkapi contoh ini berisi struktur kolom berikut:

Latar Belakang Gradien

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan latar belakang gradien.

• Warna 1: #11CE84
• Warna 2: #10C77F
• Tipe Gradien: Linier
• Arah Gradien: 160deg
• Posisi Awal: 50%
• Posisi Akhir: 50%

Perekat

Ubah juga pengaturan ukuran.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Jarak

Tambahkan beberapa nilai padding kustom berikutnya.

• Padding Atas: 150px
• Padding Bawah: 100px
• Padding Kiri: 50px
• Padding Kanan: 50px

Berbatasan

Kemudian, pergi ke pengaturan perbatasan dan tambahkan '20px' ke masing-masing sudut. Gunakan batas bawah juga.

• Lebar Batas Bawah: 10px
• Warna Batas Bawah: #1ba35a

Bayangan Kotak

Selesaikan pengaturan baris dengan menambahkan bayangan kotak halus.

• Kekuatan Buram Bayangan Kotak: 80px
• Kekuatan Penyebaran Bayangan Kotak: -24px
• Warna Bayangan: rgba(0,0,0,0.3)

Tambahkan Modul Formulir Kontak ke Kolom 1

Aktifkan Opsi 'Buat Lebar Penuh' di Bidang Nama & Email

Modul pertama yang kita butuhkan di kolom pertama baris adalah Modul Formulir Kontak. Buka bidang nama dan email dan ubah pengaturan tata letak.

• Buat Lebar Penuh: Ya

Elemen

Nonaktifkan captcha berikutnya.

• Tampilan Captcha: Tidak

Pengaturan Tombol

Dan ubah pengaturan tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Warna Teks Tombol: #ffffff
• Warna 1: #3AA0E3
• Warna 2: #3491CE
• Tipe Gradien: Linier
• Arah Gradien: 155deg
• Posisi Awal: 50%
• Posisi Akhir: 50%
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 10px
• Kekuatan Penyebaran Bayangan Kotak: -2px
• Warna Bayangan: #0a60af

Berbatasan

Kami juga menambahkan '5px' sudut membulat ke masing-masing bidang.

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Di kolom kedua, modul pertama yang kita perlukan adalah Modul Teks. Silakan dan masukkan beberapa konten.

Warna latar belakang

Kemudian, ubah warna latar belakang.

• Warna Latar Belakang: rgba(255,255,255,0.13)

Pengaturan Teks

Bermain-main dengan pengaturan teks juga.

• Berat Font Teks: Ringan
• Warna Teks: #ffffff
• Ukuran Teks: 15px
• Spasi Huruf Teks: -0.5px

Jarak

Dan tambahkan beberapa bantalan khusus untuk memberi ruang modul untuk bernafas.

• Padding Atas: 12px
• Padding Bawah: 12px
• Padding Kiri: 10px
• Padding Kanan: 10px

Berbatasan

Kami juga menambahkan '20px' ke sudut kiri atas dan kiri bawah. Selain itu, kami akan menambahkan batas kiri.

• Lebar Batas Kiri: 34px
• Warna Batas Kiri: #edf000

Visibilitas

Untuk membuat desain ini sesuai dengan ukuran layar yang berbeda, kita akan menonaktifkan Modul Teks di ponsel dan tablet.

Modul Teks Klon Dua Kali

Setelah Anda selesai memodifikasi Modul Teks pertama, lanjutkan dan klon modul dua kali.

Ubah Konten Kedua Duplikat

Ubah konten kedua duplikat menjadi sesuatu yang lain.

Ubah Spasi Kedua Duplikat

Dan tambahkan beberapa margin atas untuk menciptakan ruang di antara masing-masing modul.

• Margin Atas: 20px

Ubah Batas Kedua Duplikat

Last but not least, ubah warna batas kiri masing-masing duplikat satu per satu.

• Warna 1: #00faff
• Warna 2: #00f76f

Membuat Formulir Kontak #4

Tambahkan Bagian Baru

Warna latar belakang

Ke contoh keempat! Tambahkan bagian baru menggunakan warna latar belakang berikut:

• Warna Latar Belakang: #FFBABD

Jarak

Hapus padding default bagian ini.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Latar Belakang Gradien

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan latar belakang gradien.

• Warna 1: #ffffff
• Warna 2: rgba(41.196.169,0)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 38%
• Posisi Akhir: 38%

Perekat

Ubah pengaturan ukuran berikutnya.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Dan tambahkan beberapa bantalan khusus.

• Padding Atas: 160px
• Padding Bawah: 160px

Tambahkan Modul Teks

Tambah isi

Modul pertama yang kita butuhkan adalah Modul Teks. Silakan dan masukkan beberapa konten.

Pengaturan Teks

Ubah pengaturan teks yang sesuai:

• Font Teks: Abril Fatface
• Warna Teks: #640076
• Ukuran Teks: 45px (Desktop), 34px (Tablet), 20px (Telepon)
• Tinggi Baris Teks: 1em
• Orientasi Teks: Tengah

Jarak

Tambahkan beberapa nilai spasi kustom berikutnya.

• Margin Atas: 300px
• Padding Atas: 50px
• Padding Bawah: 50px

Tambahkan Modul Formulir Kontak

Aktifkan Opsi 'Buat Lebar Penuh' di Bidang Nama & Email

Modul kedua dan terakhir yang kita butuhkan adalah Modul Formulir Kontak. Buka bidang nama dan email dan ubah pengaturan tata letak.

• Buat Lebar Penuh: Ya

Elemen

Kemudian, nonaktifkan opsi captcha di pengaturan elemen.

• Tampilan Captcha: Tidak

Pengaturan Teks Bidang Formulir

Buat beberapa perubahan pada pengaturan teks bidang formulir juga.

• Warna Latar Belakang Bidang Formulir: #fff6f6
• Warna Teks Bidang Formulir: #ff7c7c

Pengaturan Tombol

Ubah tombol menjadi tombol ikon menggunakan pengaturan berikut:

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 88px
• Warna Teks Tombol: rgba(255,255,255,0)
• Warna Latar Tombol Arahkan Arah: rgba(255,255,255,0)
• Lebar Batas Tombol: 0px
• Warna Ikon Tombol: #e60085
• Hanya Tampilkan Ikon di Arahkan untuk Tombol: Ya

Perekat

Dan bermain-main dengan nilai ukuran untuk membuat desain cocok dengan semua ukuran layar.

• Lebar: 42% (Desktop), 50% (Tablet), 77% (Ponsel)
• Penyelarasan Modul: Pusat

Jarak

Lanjutkan dengan menambahkan beberapa nilai spasi khusus ke modul.

• Margin Bawah: 200px
• Padding Kiri: 50px
• Padding Kanan: 50px

Berbatasan

Dan tambahkan '10px' ke masing-masing sudut.

Margin Tombol

Last but not least, tekan tombol ikon ke kanan dengan menggunakan baris kode CSS berikut di tab lanjutan:

margin-right: -100px;

Membuat Formulir Kontak #5

Tambahkan Bagian Baru

Latar Belakang Gradien

Ke contoh terakhir! Tambahkan bagian baru dengan latar belakang gradien berikut:

• Warna 1: #4bf2d0
• Warna 2: #ffffff
• Tipe Gradien: Radial
• Arah Radial: Kiri
• Posisi Awal: 36%
• Posisi Akhir: 36%

Jarak

Lalu, buka pengaturan spasi dan tambahkan beberapa bantalan khusus.

• Padding Atas: 250px
• Padding Bawah: 250px

Tambahkan Baris Baru

Struktur Kolom

Setelah Anda selesai mengubah pengaturan bagian, tambahkan baris baru menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang.

• Warna Latar Belakang: #ffffff

Warna Latar Kolom 1

Tambahkan warna latar belakang lain ke kolom pertama.

• Warna Latar Kolom 1: #f9f9f9

Perekat

Kemudian, ubah pengaturan ukuran baris.

• Gunakan Lebar Kustom: Ya
• Satuan: PX
• Lebar Kustom: 1730px
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Jarak

Dan tambahkan beberapa nilai spasi khusus agar sesuai dengan semua ukuran layar.

• Padding Atas: 0px
• Padding Bawah: 0px
• Kolom 1 Padding Atas: 200px (Desktop), 0px (Tablet & Ponsel)
• Kolom 1 Padding Bawah: 150px (Desktop), 0px (Tablet & Ponsel)
• Kolom 1 Padding Kiri: 50px
• Kolom 1 Padding Kanan: 50px
• Kolom 2 Padding Atas: 200px (Desktop), 100px (Tablet & Ponsel)
• Kolom 2 Padding Bawah: 150px, 100px (Tablet & Ponsel)

Bayangan Kotak

Hal terakhir yang perlu Anda lakukan dalam pengaturan baris adalah menambahkan bayangan kotak halus.

• Kekuatan Buram Bayangan Kotak: 56px
• Kekuatan Penyebaran Bayangan Kotak: -17px
• Warna Bayangan: rgba(0,0,0,0.3)

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Saatnya mulai menambahkan modul! Tambahkan Modul Teks ke kolom pertama.

Pengaturan Teks

Setelah Anda menambahkan konten, buka pengaturan teks dan buat beberapa perubahan.

• Font Teks: Cambay
• Warna Teks: #000000
• Ukuran Teks: 26px
• Spasi Huruf Teks: -0.5px
• Orientasi Teks: Kanan

Jarak

Tambahkan beberapa margin atas juga.

• Margin Atas: 60px

Visibilitas

Dan sembunyikan modul di ponsel dan tablet.

Modul Teks Klon Dua Kali

Ubah Konten Kedua Duplikat

Setelah Anda selesai memodifikasi Modul Teks pertama, lanjutkan dan klon modul dua kali. Ubah konten kedua duplikat.

Ubah Spasi Kedua Duplikat

Ubah margin atas kedua duplikat juga.

• Margin Atas: 80px

Tambahkan Modul Formulir Kontak ke Kolom 2

Aktifkan Opsi 'Buat Lebar Penuh' di Bidang Nama & Email

Satu-satunya modul yang kita butuhkan di kolom kedua adalah Modul Formulir Kontak. Buka bidang nama dan email dan ubah pengaturan tata letak.

• Buat Lebar Penuh: Ya

Elemen

Nonaktifkan opsi captcha selanjutnya.

• Tampilan Captcha: Ya

Pengaturan Teks Bidang Formulir

Kemudian, buka pengaturan teks bidang formulir dan buat beberapa modifikasi.

• Warna Latar Belakang Bidang Formulir: rgba(255,255,255,0)
• Font Bidang Formulir: Cambay

Pengaturan Tombol

Dan buat tombol unik menggunakan pengaturan tombol berikut:

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 64px (Desktop), 50px (Tablet), 40px (Telepon)
• Warna Teks Tombol: #000000
• Warna 1: #4bf2d0
• Warna 2: rgba(41.196.169,0)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 25%
• Posisi Akhir: 25%
• Lebar Batas Tombol: 0px
• Hanya Tampilkan Tombol di Arahkan untuk Tombol: Tidak

Jarak

Tambahkan beberapa margin atas ke modul ini juga.

• Margin Atas: 50px

Berbatasan

Dan gunakan batas bawah yang halus untuk masing-masing bidang.

• Lebar Batas Bawah: 0.5px
• Warna Batas Bawah: #000000

Jarak Lapangan Individu

Last but not least, tambahkan margin bawah berikut ke masing-masing bidang satu per satu dan selesai!

• Margin Bawah: 50px

Pratinjau

Desktop

Sekarang setelah kita melalui semua langkah, mari kita lihat desain modul formulir kontak Divi di desktop.

Seluler

Dan inilah yang dapat Anda harapkan dari desain modul formulir kontak Divi pada ukuran layar yang lebih kecil:

Pikiran Akhir

Dalam posting ini, kami telah membagikan 5 desain modul formulir kontak Divi yang indah yang dapat Anda gunakan dan modifikasi dengan mudah untuk situs web apa pun yang Anda buat. Formulir kontak adalah bagian penting dari banyak situs web di luar sana, jadi penting untuk memastikan desain Anda meyakinkan pengunjung Anda untuk menghubungi. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!