Waryanto Technical Content Writer, Menyukai dunia Technical IT, Digital Marketing & Travel Blogging. Suka berbagi hal baru yang bermanfaat bagi orang lain.

Membuat Formulir Kontak WordPress dengan Contact Form 7

1 min read

Cara Membuat formulir kontak wordpress

Formulir kontak pada website memiliki manfaat besar bagi website Anda. Pengunjung Anda jadi lebih mudah menghubungi Anda lewat website. Selain itu, formulir kontak juga dapat mengurangi pesan masuk ke spam. 

Nah, membuat formulir kontak WordPress lebih mudah menggunakan plugin. Salah satunya yang terbaik adalah Contact Form 7. Plugin ini merupakan salah satu plugin yang paling banyak digunakan hingga saat ini. 

Nah, di artikel ini, kami akan jelaskan cara setting Contact Form 7 untuk membuat formulir kontak. Langsung saja simak pembahasannya! 

Cara Setting Contact Form 7 Untuk Membuat Formulir di WordPress

Berikut ini cara menggunakan Contact Form 7 yang bisa Anda ikuti.

1. Login Dashboard WordPress

Langkah pertama cara setting Contact Form 7 adalah login ke dashboard admin WordPress dengan username dan password Anda.

Login ke dashboard admin WordPress

2. Install dan Aktifkan Plugin Contact Form 7 

Jika sudah, klik menu Plugins > Add New. Cari plugin Contact Form 7 di kolom pencarian. Kemudian klik tombol Install Now > Activate.

contact form 7

3. Buat Formulir Kontak Baru

Setelah plugin aktif, klik menu Contact > Add New untuk membuat formulir kontak baru.

setting contact form 7

Buat judul untuk formulir kontak Anda, misalnya WordPress Contact Form.

Lalu perhatikan tab Form di bawahnya. Itu adalah daftar label form input yang akan ditampilkan. Anda dapat menambah dan mengurangi elemen sesuai dengan kebutuhan Anda, Untuk yang bertanda bintang nantinya berarti wajib diisi oleh pengunjung.

contact form 7

4. Konfigurasi Format Email

Ketika pengunjung mengirimkan email melalui formulir kontak, secara otomatis Anda akan menerima email yang berisi nama, detail kontak, serta body dari pesan Anda.

Anda bisa melakukan pengaturan atau konfigurasi formai email melalui tab Mail. 

[ecko_alert color=”gray”]PENTING – Pastikan Anda memasukkan alamat email aktif pada form To. Ini adalah email untuk menerima pesan.[/ecko_alert]

form kontak di blog

5. Atur Tampilan Formulir Kontak

Langkah selanjuntya cara setting Contact Form 7 ialah mengatur tampilan formulir. Untuk mengatur pesan yang ingin ditampilkan di form, klik tab Message.

pesan pada contact form

Anda bisa tambahkan pesan untuk notifikasi ketika pesan telah terkirim atau gagal terkirim.

6. Simpan Konfigurasi Formulir Kontak

Jika sudah melakukan pengaturan, klik tombol Save. Setelah berhasil disimpan, akan ada shortcode yang terlihat seperti berikut.

form kontak di wordpress

7. Publish Formulir 

Untuk mempublish formulir, tinggal klik menu Contact Form > nama kontak form Anda. Kemudian, salin shortcode tersebut.

membuat form kontak di wordpress

Paste shortcode ke dalam halaman, postingan, maupun widget tempat Anda ingin menampilkannya. Pada contoh ini kami meletakkannya di suatu halaman dengan memilih menu Pages > Add New.

halaman kontak di wordpress

Hasilnya terlihat seperti gambar di bawah ini.

hubungi kami

8. Tes Formulir Kontak 

Jika sudah terpublish, cobalah isi formulir tersebut. Tujuannya, untuk memastikan formulir telah berfungsi dengan baik. Jika pesan berhasil terkirim, Anda akan melihat notifikasi seperti gambar di bawah ini.

email terkirim

Baca juga: Baca juga 10 Plugin Email Marketing Terbaik WordPress

Yuk Buat Formulir Kontak Website Lebih Mudah dengan Contact Form 7

Bagaimana? Ternyata cara setting Contact Form 7 itu mudah, bukan?

Lewat formulir kontak yang dibuat, pengunjung bisa lebih mudah menghubungi Anda. Nah, selain membuat formulir kontak Anda juga bisa membuat formulir lainnya, seperti form subscribe, pendaftaran, dan lainnya.

Data yang terkumpul bisa Anda manfaatkan untuk strategi email marketing Anda. Nah, untuk pelajari lebih lanjut mengenai email marketing, Anda bisa baca dulu artikel berikut –> Panduan Lengkap Membuat Email Marketing Efektif 2020.

Sekian artikel tutorial ini, selamat mencoba 🙂

Waryanto Technical Content Writer, Menyukai dunia Technical IT, Digital Marketing & Travel Blogging. Suka berbagi hal baru yang bermanfaat bagi orang lain.

16 Replies to “Membuat Formulir Kontak WordPress dengan Contact Form 7”

    1. Silahkan periksa folder spam anda, kadangkala email dari contact form 7 terkirim kesana. kemudian move / drag email tersebut ke folder utama anda agar setiap ada notifikasi selalu terpantau.

  1. Lalu bagaimana cara untuk membuat contact us dengan tambahan upload gambar atau biasa di sebut attachment ?

    1. Untuk menambahkan attachment Anda dapat menggunakan tag file, pilih menu Contact > Contact Form > Edit Shortcode yang sudah dibuat > Klik tab Form > Pilih tag file.

    2. Untuk halaman contact us tidak disarankan menggunakan fitur tersebut pak karena umumnya contact us hanya sekedar berfungsi untuk pertanyaan ringan.
      Untuk komunikasi yang lebih intens dan melibatkan sharing document dapat memanfaatkan email.

  2. mas kalau cara mengganti email yang sudah ada pada contact us sebelumnya bagaimana? saya sudah mengeditnya tetapi yang muncul di webnya tetap email yang sebelumnya? terimkasih

    1. Untuk mengganti email tujuan, Anda dapat mengubahnya melalui menu "Contact > Contact Forms > Klik Edit pada contact form yang Anda buat > pilih tab Mail", silakan ubah alamat email pada kolom "To" sesuai email yang Anda inginkan, kemudian simpan perubahan dengan menekan tombol "Save".

      Semoga membantu, 🙂

  3. Instalasi sesui dengan TUTORIAL disini dan di Plugin Homepage, settingan dari Tab, FORM, MAIL, MESSAGES, sudah sesuai. tetapi, setelah di TEST, tidak ada pesan masuk ke email saya, kesalahan dimana yah. Pencerahannya bg. dibantu ..

    1. Jika sudah sesuai dengan tutorial biasanya ada masalah pada server hosting, silakan tanyakan ke support hosting Anda terkait hal tersebut. Selain itu, biasanya email akan masuk folder spam, silakan untuk dicek pada folder spam email Anda. Semoga membantu. 🙂

  4. saya sudah setting sesuai tutroial,diwaktu uji coba untuk di formnya keluar notifikasi bahwa sukses ,tapi diemail tidak ada pesan apapun yang diterima? bagaimana gan?

  5. Tadi udah belajar pake contact form 7, sekarang udah lumayan bisa. Cocok buat link pendaftaran misalnya untuk event – event dan lain sebagainya. Makasih untuk tutorialnya.

  6. Mas untuk edit contact form 7 jadi form pemesanan gimana ya? Bisa ga kolom emailnya ga diaktifin, maksudnya biar kolomnya cuma nama, no tlp, jumlah pesanan, alamat & kode pos!
    Saya pengguna niagahoster, kebetulan..
    Terima kasih

  7. Ketika ada yang contact kok yg muncul malah script bukan “kalimat ” itu bagaimana solusinya

Leave a Reply

Your email address will not be published. Required fields are marked *

[{"code":"","label":"Coba Lagi","win":false},{"code":"HOSTING50","label":"Extra Diskon 50rb ","win":true},{"code":"HOSTING20","label":"Extra Diskon 20rb ","win":true},{"code":"HOSTING100","label":"Extra Diskon 100rb ","win":true},{"code":"","label":"Belum Beruntung","win":false},{"code":"HOSTING20","label":"Extra Diskon 20rb ","win":true},{"code":"","label":"Coba Lagi","win":false},{"code":"HOSTING50","label":"Extra Diskon 50rb ","win":true},{"code":"HOSTING20","label":"Extra Diskon 20rb ","win":true},{"code":"FREESHIPPING","label":"Coba Lagi","win":false},{"code":"","label":"Sedikit Lagi! ","win":false},{"code":"HOSTING50","label":"Extra Diskon 50rb ","win":true}]
[{"code":"","label":"Coba Lagi","win":false},{"code":"HOSTING50","label":"Extra Diskon 50rb ","win":true},{"code":"HOSTING20","label":"Extra Diskon 20rb ","win":true},{"code":"HOSTING100","label":"Extra Diskon 100rb ","win":true},{"code":"","label":"Belum Beruntung","win":false},{"code":"HOSTING20","label":"Extra Diskon 20rb ","win":true},{"code":"","label":"Coba Lagi","win":false},{"code":"HOSTING50","label":"Extra Diskon 50rb ","win":true},{"code":"HOSTING20","label":"Extra Diskon 20rb ","win":true},{"code":"FREESHIPPING","label":"Coba Lagi","win":false},{"code":"","label":"Sedikit Lagi! ","win":false},{"code":"HOSTING50","label":"Extra Diskon 50rb ","win":true}]