Cara Menyertakan Beberapa Alamat Email di Modul Formulir Kontak Divi Anda

Diterbitkan: 2023-11-13

Terkadang, Anda mungkin ingin pengiriman formulir kontak situs web Anda dikirim ke beberapa alamat email, bukan hanya satu. Untungnya, ini sangat mudah dilakukan dengan Divi! Dalam tutorial ini, kami akan menunjukkan cara memasukkan beberapa alamat email ke modul formulir kontak Divi Anda. Selain itu, kami juga akan menunjukkan cara menambahkan dan menyesuaikan desain formulir kontak agar sesuai dengan desain situs web Anda.

Mari kita mulai!

Daftar isi
  • 1 Mengintip
  • 2 Apa yang Anda Butuhkan untuk Memulai
  • 3 Cara Memasukkan Beberapa Alamat Email di Modul Formulir Kontak Divi Anda
    • 3.1 Membuat Halaman Baru dengan Tata Letak Premade
    • 3.2 Memodifikasi Tata Letak Modul Formulir Kontak
    • 3.3 Menambah dan Menyesuaikan Modul Formulir Kontak
    • 3.4 Sertakan Beberapa Alamat Email di Modul Formulir Kontak Divi Anda
  • 4 Hasil Akhir
  • 5 Pikiran Terakhir

Mengintip

Berikut adalah preview dari apa yang akan kami desain

Divi Sertakan Beberapa Alamat Email Dalam Desain Akhir Modul Formulir Kontak

Apa yang Anda Butuhkan untuk Memulai

Sebelum kita mulai, instal dan aktifkan Tema Divi dan pastikan Anda memiliki Divi versi terbaru di situs web Anda.

Cara Menyertakan Beberapa Alamat Email di Modul Formulir Kontak Divi Anda

Sekarang, Anda siap untuk memulai! Kami akan melalui tutorial ini langkah demi langkah.

Buat Halaman Baru dengan Tata Letak Premade

Mari kita mulai dengan menggunakan tata letak yang telah dibuat sebelumnya dari perpustakaan Divi. Untuk desain ini, kita akan menggunakan Therapy Landing Page dari Therapy Layout Pack.

Tambahkan halaman baru ke situs web Anda dan beri judul, lalu pilih opsi Gunakan Divi Builder.

Divi Sertakan Beberapa Alamat Email Dalam Modul Formulir Kontak Gunakan Pembuat

Kami akan menggunakan tata letak yang telah dibuat sebelumnya dari perpustakaan Divi untuk contoh ini, jadi pilih Telusuri Tata Letak.

Divi Sertakan Beberapa Alamat Email Dalam Tata Letak Telusuri Modul Formulir Kontak

Cari dan pilih Halaman Arahan Terapi.

Divi Sertakan Beberapa Alamat Email Dalam Tata Letak Temukan Modul Formulir Kontak

Pilih Gunakan Tata Letak Ini untuk menambahkan tata letak ke halaman Anda.

Divi Sertakan Beberapa Alamat Email Dalam Modul Formulir Kontak Gunakan Tata Letak

Sekarang, kami siap untuk membangun desain kami.

Ubah Tata Letak Modul Formulir Kontak

Pertama, kita perlu menambahkan formulir kontak ke halaman ini. Gulir ke bagian bawah tata letak. Kami akan menambahkan formulir kontak antara bagian testimonial dan footer. Tambahkan baris baru dengan satu kolom di bawah bagian testimonial.

Divi Sertakan Beberapa Alamat Email Dalam Modul Formulir Kontak Tambahkan Baris

Pengaturan Baris

Buka pengaturan baris. Kami akan menambahkan latar belakang untuk formulir kontak. Atur warna latar belakang.

  • Latar Belakang: #e1ecea

Divi Sertakan Beberapa Alamat Email Di Latar Belakang Baris Modul Formulir Kontak

Selanjutnya, buka pengaturan spasi di bawah tab Desain dan tambahkan padding.

  • Lapisan Atas: 30px
  • Bantalan Bawah: 30px
  • Bantalan Kiri: 30px
  • Bantalan Kanan: 30px

Divi Sertakan Beberapa Alamat Email Dalam Bantalan Baris Modul Formulir Kontak

Kemudian, buka pengaturan perbatasan dan tambahkan sudut membulat.

  • Sudut Bulat: 50px

Divi Sertakan Beberapa Alamat Email Di Batas Baris Modul Formulir Kontak

Tambahkan Teks Judul

Selanjutnya, tambahkan modul teks ke baris. Kami akan menambahkan beberapa teks judul.

Divi Sertakan Beberapa Alamat Email Dalam Modul Formulir Kontak Tambahkan Teks

Tambahkan teks judul.

  • H2: Hubungi

Divi Sertakan Beberapa Alamat Email Dalam Teks Modul Formulir Kontak

Buka pengaturan teks judul di bawah tab desain dan ubah font dan berat font.

  • Judul 2 Font: Cormorant Garamond
  • Judul 2 Berat Font: Tebal

Divi Sertakan Beberapa Alamat Email Dalam Font Modul Formulir Kontak

Selanjutnya, sesuaikan ukuran teks judul menggunakan opsi responsif untuk mengatur ukuran teks lebih kecil di layar lebih kecil. Selain itu, sesuaikan ketinggian garis.

  • Judul 2 Ukuran Teks Desktop: 60px
  • Judul 2 Ukuran Teks Tablet: 32px
  • Judul 2 Ukuran Teks Seluler: 26px
  • Judul 2 Tinggi Baris: 1,2em

Divi Sertakan Beberapa Alamat Email Dalam Modul Formulir Kontak Ukuran H2

Tambahkan dan Sesuaikan Modul Formulir Kontak

Tambahkan Modul Formulir Kontak

Sekarang pengaturan baris telah disesuaikan dan teks header sudah ada, kita dapat menambahkan modul formulir kontak ke baris. Tambahkan modul di bawah teks judul.

Divi Sertakan Beberapa Alamat Email Dalam Modul Formulir Kontak Tambahkan Modul Formulir Kontak

Buka pengaturan formulir kontak. Di bawah opsi Perlindungan Spam, aktifkan “Gunakan Layanan Perlindungan Spam” untuk mengaktifkan ReCaptcha dan menghapus persyaratan Dasar Captcha dari formulir.

  • Gunakan Layanan Perlindungan Spam: Ya
  • Gunakan Captcha Dasar: Tidak

Divi Sertakan Beberapa Alamat Email Dalam Modul Formulir Kontak Perlindungan Spam

Sesuaikan Desain Modul Formulir Kontak

Pengaturan Bidang

Pindah ke tab desain dan buka pengaturan Bidang. Ubah warna latar belakang dan warna teks.

  • Warna Latar Bidang: rgba(255,255,255,0.42)
  • Warna Teks Bidang: #2e5b61

Divi Sertakan Beberapa Alamat Email Dalam Warna Teks Latar Belakang Bidang Modul Formulir Kontak

Selanjutnya, ubah padding dan font bidang.

  • Bidang Padding Atas: 20px
  • Bidang Padding Bawah: 20px
  • Font Bidang: Inter

Divi Sertakan Beberapa Alamat Email Dalam Padding Modul Formulir Kontak

Lalu, ubah ukuran teks bidang. Gunakan opsi responsif untuk mengatur ukuran teks berbeda pada layar yang lebih kecil.

  • Bidang Ukuran Teks Desktop: 18px
  • Bidang Ukuran Teks Tablet: 16px
  • Bidang Ukuran Teks Seluler: 14px

Divi Sertakan Beberapa Alamat Email Dalam Ukuran Teks Modul Formulir Kontak

Pengaturan Tombol

Pindah ke pengaturan tombol dan aktifkan gaya khusus. Kemudian, ubah ukuran teks dan warna teks.

  • Gunakan Gaya Kustom untuk Tombol: Ya
  • Ukuran Teks Tombol: 14px
  • Warna Teks Tombol: #2e5b61

Divi Sertakan Beberapa Alamat Email Dalam Gaya Tombol Modul Formulir Kontak

Selanjutnya, atur lebar batas, warna, dan radius.

  • Lebar Batas Tombol: 1px
  • Warna Batas Tombol: #2e5b61
  • Radius Batas Tombol: 50px

Divi Sertakan Beberapa Alamat Email Di Perbatasan Tombol Modul Formulir Kontak

Ubah font tombol dan berat font.

  • Font Tombol: Antar
  • Berat Font Tombol: Semi Tebal

Divi Sertakan Beberapa Alamat Email Dalam Font Tombol Modul Formulir Kontak

Terakhir, tambahkan padding ke tombol.

  • Bantalan Tombol Atas: 20px
  • Bantalan Tombol Bawah: 20px
  • Bantalan Tombol Kiri: 40px
  • Bantalan Tombol Kanan: 40px

Divi Sertakan Beberapa Alamat Email Dalam Bantalan Tombol Modul Formulir Kontak

Pengaturan Perbatasan

Sekarang buka pengaturan Perbatasan dan tambahkan sudut membulat ke masukan.

  • Masukan Sudut Bulat: 50px

Divi Sertakan Beberapa Alamat Email Dalam Input Modul Formulir Kontak Sudut Bulat

Ini menyelesaikan desain modul formulir kontak.

Sertakan Beberapa Alamat Email di Modul Formulir Kontak Divi Anda

Menyertakan beberapa alamat email dalam modul formulir kontak Divi dapat berguna jika Anda ingin banyak orang dapat menerima pesan masuk dari situs web Anda atau jika Anda memerlukan pesan dikirim ke beberapa alamat email. Jika Anda bekerja dengan banyak orang dalam satu tim atau memiliki beberapa kotak masuk yang menjadi tujuan pengiriman pesan, fitur ini mungkin berguna. Untungnya, memasukkan beberapa alamat email ke modul formulir kontak Anda menggunakan Divi sangatlah mudah.

Pertama, buka pengaturan formulir kontak. Arahkan ke pengaturan Email yang terletak di bawah tab Konten. Untuk menambahkan beberapa alamat email, pisahkan dengan koma dan tambahkan ke kolom “Alamat Email”. Anda dapat memberi spasi di antaranya seperti ini:

“[dilindungi email], [dilindungi email]”

Atau cukup beri koma untuk memisahkan email:

“[dilindungi email],[dilindungi email]”

Divi Sertakan Beberapa Alamat Email Dalam Modul Formulir Kontak Tambahkan Beberapa Alamat Email

Setelah Anda menambahkan email ke formulir kontak Anda, pastikan untuk mengisinya dan, kirimkan pesan percobaan dan periksa apakah pesan tersebut terkirim ke semua alamat email yang tercantum di formulir.

Hasil Akhir

Sekarang, mari kita lihat desain akhir formulir kontak kita.

Divi Sertakan Beberapa Alamat Email Dalam Desain Akhir Modul Formulir Kontak

Pikiran Terakhir

Mengirim kiriman formulir kontak Anda ke beberapa email akan lebih mudah, terutama jika Anda memiliki banyak orang yang memerlukan salinan pesan tersebut. Untungnya, ini sangat mudah diterapkan menggunakan modul formulir kontak Divi. Untuk mempelajari lebih lanjut tentang apa yang dapat Anda lakukan dengan modul formulir kontak Divi, lihat artikel ini tentang cara membuat formulir serbaguna dengan logika kondisional dan cara menyertakan formulir kontak slide-in di bagian pahlawan. Bagaimana Anda menyesuaikan formulir kontak situs web Anda? Kami ingin mendengar pendapat Anda di kolom komentar!