Cara Membuat Form Kontak di Gutenberg dengan Plugin Contact Form 7

Memiliki formulir kontak di website WordPress adalah langkah yang penting untuk berinteraksi dengan pengunjung website Anda. Dengan editor Gutenberg dan plugin populer seperti Contact Form 7, proses ini menjadi lebih mudah. Selain itu, dengan plugin tambahan seperti Contact Form 7 Database Addon (CFDB7), Anda dapat menyimpan semua data kiriman langsung di database WordPress Anda. Tutorial ini akan memandu Anda langkah demi langkah cara membuat form kontak di Gutenberg dengan plugin Contact Form 7. Mulai dari melalui proses instalasi plugin, pembuatan formulir, penambahan formulir ke halaman menggunakan Gutenberg, dan penyimpanan data kiriman.

Apa Itu Gutenberg?

Gutenberg adalah content editor bawaan WordPress yang diperkenalkan pada WordPress versi 5.0. Gutenberg menggantikan editor klasik TinyMCE dengan pendekatan berbasis blok. Editor blok Gutenberg memudahkan Anda dalam membuat konten. Anda dapat menyusun konten dengan menambahkan, mengatur ulang, dan menyesuaikan berbagai jenis blok yang ada. Dengan Gutenberg, pembuatan layout yang lebih kompleks dapat dilakukan tanpa perlu custom code atau page builder pihak ketiga yang berat.

Cara Membuat Form Kontak di Gutenberg

Terdapat beberapa langkah yang harus dilakukan untuk membuat form kontak di Gutenberg. Mulai dari install plugin Contact Form 7, membuat form, hingga membuat halaman kontak. Berikut adalah langkah-langkah cara membuat form kontak di Gutenberg:

Install Plugin Contact Form 7

Untuk membuat form kontak di Gutenberg, hal pertama yang Anda butuhkan adalah plugin kontak. Pada tutorial kali ini, plugin yang digunakan adalah Contact Form 7. Berikut adalah cara install plugin Contact Form 7:

1. Dari dashboard WordPress > Plugins > Add Plugins.

2. Cari Contact Form 7 di kotak pencarian, jika sudah ketemu, silakan klik Install Now.

3. Setelah plugin terinstal, silakan klik Activate.

Cara Membuat Form Kontak di Gutenberg Menggunakan Plugin Contact Form 7

Setelah instalasi selesai, selanjutnya adalah setup plugin Contact Form 7. Berikut adalah langkah-langkah cara setup plugin Contact Form 7:

1. Dari halaman dashboard Contact Form 7, silakan klik Add New.

2. Kemudian Anda akan diarahkan ke halaman pembuatan form. Silakan beri judul form yang ingin Anda buat. Pada tutorial ini, nama form-nya adalah Kontak.

3. Setelah itu, salin kode html ke tab Form.

Berikut adalah penjelasan tag HTML di atas:

• [text* nama-lengkap] : Field teks untuk “Nama Lengkap”. Tanda bintang (*) menandakan field ini wajib diisi. nama-lengkap adalah nama field yang akan Anda gunakan di tab “Mail”.
• [email* email-anda] : Field email untuk “Email”. Wajib diisi.
• [tel nomor-telepon] : Field khusus untuk nomor telepon.
• [text lokasi] : Field teks untuk “Lokasi”.
• [select* kebutuhan …] : Field dropdown untuk “Kebutuhan”. Wajib diisi.
  • include_blank menambahkan opsi kosong di awal.
  • Anda dapat mengganti “Layanan A”, “Layanan B”, dst., dengan pilihan kebutuhan yang relevan.
  • Jika “Kebutuhan” lebih cocok sebagai input teks bebas, Anda bisa menggunakan [textarea* kebutuhan …] seperti pada alternatif yang dikomentari.
• [textarea komentar] : Field area teks yang lebih besar untuk “Komentar”.
• [submit “Kirim Pesan”] : Tombol untuk mengirim formulir.

3. Langkah selanjutnya adalah konfigurasi email. Konfigurasi ini amat penting dilakukan agar data yang diisi oleh pengguna dapat terkirim ke email Anda.

Di tab Mail, Anda akan melihat field seperti “To“, “From“, “Subject“, dan “Messagebody“. Anda perlu menggunakan tag-tag yang sesuai dengan nama field yang Anda buat di formulir.

Berikut adalah field yang harus Anda isi di tab Mail:

• To: [_site_admin_email] isi dengan email admin website Anda.
• From: [_site_title_] <wordpress@learnwp.local> Isi dengan nama website Anda.
• Subject: [_site_title] “[your_subject]” Isi dengan nama website dan subject email yang diinginkan.
• Additionalheaders: Reply-To: taufiq.prasetya2025@gmail.com Isi dengan alamat email tempat pengguna membalas email Anda.
• Messagebody: From: [your-name] [your-email] Isi dengan pesan yang ingin Anda sampaikan pada audiens.
• File attachment: Isi dengan dokumen pendukung.

Jika sudah sesuai dengan kebutuhan, silakan klik Save.

Cara Buat Halaman Kontak di Gutenberg Menggunakan Plugin Contact Form 7

Setelah selesai, Anda dapat membuat halaman kontak dengan Gutenberg. Berikut adalah langkah-langkahnya:

1. Dari halaman dashboard > Pages > Add Pages.

2. Klik ikon + > Contact Form 7.

3. Pilih form yang tadi telah dibuat. Dalam contoh ini pilih form Kontak > Save

Berikut adalah tampilan form kontak yang selesai dibuat:

Cara agar Form Submission Tersimpan di Database

Secara default, Contact Form 7 tidak menyimpan data formulir yang dikirim ke database WordPress Anda. Fungsi utamanya adalah mengirimkan data tersebut melalui email.

Namun, Anda dapat menyimpan data kiriman Contact Form 7 ke database menggunakan plugin tambahan. Pada tutorial kali ini, plugin yang digunakan adalah CFDB7. Berikut adalah cara menggunakan CFDB7:

Instal dan Aktifkan Plugin CFDB7

• Dari dashboard WordPress Anda, masuk ke menu Plugins > Add New.

• Cari ContactForm 7 Database Addon – CFDB7 > Install Now

• Setelah terinstal, klik Activate

CFDB7 biasanya akan langsung bekerja dan menyimpan kiriman formulir setelah diaktifkan.

Cara Melihat Data yang Tersimpan

Untuk melihat data yang tersimpan, Anda dapat melakukannya di item menu baru bernama Contact Forms pada bilah admin WordPress Anda.

Di sini Anda dapat melihat daftar formulir Anda. Klik pada nama formulir untuk melihat semua kiriman yang tersimpan untuk formulir tersebut.

Berhasil Membuat Form Kontak di Gutenberg?

Itulah tadi cara membuat form kontak di Gutenberg. Membuat formulir kontak yang fungsional di WordPress menggunakan Gutenberg, Contact Form 7, dan CFDB7 adalah proses yang cukup mudah. Dengan plugin Contact Form 7, Anda mendapatkan fleksibilitas untuk membuat formulir sesuai kebutuhan, dan dengan CFDB7, Anda memiliki jaminan bahwa setiap kiriman data akan tersimpan dengan aman di database Anda. Selalu uji formulir Anda setelah melakukan pengaturan untuk memastikan email terkirim dengan benar dan data tersimpan di CFDB7.

Untuk Anda yang tak ingin pusing mengelola website WordPress dan hanya fokus pada peningkatan bisnis, percayakan pada Tonjoo. Kami adalah jasa pembuatan website custom profesional dengan ratusan klien seperti Universitas Gajah Mada, Polygon Bikes, dan banyak lagi lainnya. Kami siap menciptakan website sesuai dengan kebutuhan spesifik Anda, yang fungsional dan canggih.

Last Updated on Juni 12, 2025 by rosyida.fajarwati