{"id":10777,"date":"2022-07-06T08:09:19","date_gmt":"2022-07-06T01:09:19","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=10777"},"modified":"2022-09-09T14:53:30","modified_gmt":"2022-09-09T07:53:30","slug":"contact-form-7-dan-cara-menggunakan-di-wordpress","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/contact-form-7-dan-cara-menggunakan-di-wordpress\/","title":{"rendered":"Mengenal Contact Form 7 dan Cara Menggunakannya di WordPress"},"content":{"rendered":"<p>Kalian sudah tahukah bahwa dengan adanya formulir kontak di website akan memudahkan pengunjung menghubungi kalian? Untungnya nih, membuat formulir kontak cukup mudah dan praktis dengan bantuan plugin. Salah satunya, Contact Form 7. Mau tahu lebih lengkap tentang Contact Form 7? Tak usah lama-lama, simak yuk <strong>Mengenal Contact Form 7 dan Cara Menggunakannya di WordPress<\/strong><\/p>\n<h2><strong>Apa Itu Contact Form 7?<\/strong><\/h2>\n<p>Contact Form 7 adalah salah satu plugin <em>contact form<\/em> terbaik. Plugin yang bisa digunakan gratis ini bisa membantu kalian untuk menambahkan formulir kontak di WordPress.<\/p>\n<p>Formulir kontak merupakan formulir di website yang memungkinkan pengunjung untuk mengirimkan pesan kepada kalian. Nantinya, pesan tersebut akan masuk ke <em>inbox email<\/em> admin kalian di WordPress.<\/p>\n<p>Membuat formulir kontak menjadi lebih praktis dengan plugin Contact Form karena berbagai fitur yang dimilikinya dapat menunjang kebutuhan kalian terkait komunikasi yang diinginkan, seperti:<\/p>\n<ul>\n<li>Editor formulir yang memudahkan untuk mengkustomisasi formulir kontak<\/li>\n<li>Template formulir yang siap digunakan<\/li>\n<li>Integrasi dengan layanan pihak ketiga untuk mendukung upaya <em>email marketing<\/em> dan menambahkan opsi pembayaran melalui kartu kredit<\/li>\n<\/ul>\n<p>Selain mudah digunakan, Contact Form 7 juga memiliki beberapa manfaat lainnya, yakni:<\/p>\n<ul>\n<li>Memungkinkan menghapus atau mengedit formulir-formulir yang telah dibuat.<\/li>\n<li>Memperbolehkan untuk menambahkan pesan terima kasih yang muncul setelah formulir diisi.<\/li>\n<li>Mendukung <a href=\"https:\/\/www.jetorbit.com\/blog\/apa-sih-fungsi-captcha-kenapa-harus-ada-captcha\/\">Captcha<\/a> dan filter <a href=\"https:\/\/akismet.com\/\" target=\"_blank\" rel=\"noopener\">Akismet<\/a> untuk menyaring bot dan pesan spam.<\/li>\n<li>Kompatibel dengan berbagai tema WordPress sehingga tidak menyebabkan <em>error<\/em>.<\/li>\n<\/ul>\n<h2><strong>Cara Setting Contact Form 7 di WordPress<\/strong><\/h2>\n<p>Berikut ini adalah langkah-langkah menggunakan Contact Form 7, mulai dari instalasi hingga membuat formulir:<\/p>\n<ol>\n<li>\n<h3><strong> Login Dashboard WordPress<\/strong><\/h3>\n<\/li>\n<\/ol>\n<p>Langkah pertama cara setting Contact Form 7 di WordPress adalah login ke <em>dashboard <\/em>WordPress dengan <em>username <\/em>dan <em>password <\/em>kalian.<\/p>\n<p><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-10780 aligncenter\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-1.png\" alt=\"mengenal contact form 7 1\" width=\"405\" height=\"441\"><\/a><\/p>\n<ol start=\"2\">\n<li>\n<h3><strong> Install dan Aktifkan Plugin Contact Form 7&nbsp;<\/strong><\/h3>\n<\/li>\n<\/ol>\n<p>Klik menu <strong>Plugins =&gt; Add New <\/strong>di sidebar WordPress untuk membuka pencarian plugin. Lalu, ketikkan <strong>Contact Form 7<\/strong> di kolom pencarian.<\/p>\n<p><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-10781\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-2-800x100.png\" alt=\"mengenal contact form 7 2\" width=\"800\" height=\"100\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-2-800x100.png 800w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-2-1160x145.png 1160w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-2.png 1180w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p>Kalau plugin tersebut sudah muncul di hasil pencarian, klik <strong>Install Now<\/strong> dan tunggu proses instalasi. Setelah instalasi selesai, jangan lupa klik <strong>Activate, <\/strong>ya.<\/p>\n<p><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-10782 aligncenter\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-3.png\" alt=\"mengenal contact form 7 3\" width=\"604\" height=\"253\"><\/a><\/p>\n<ol start=\"3\">\n<li>\n<h3><strong> Buat Formulir Kontak Baru<\/strong><\/h3>\n<\/li>\n<\/ol>\n<p>Untuk membuat formulir baru, silakan buka editor Contact Form 7 dengan klik menu <strong>Contact =&gt; Add New<\/strong> di sidebar WordPress.<\/p>\n<p><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-10783 aligncenter\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-4.png\" alt=\"mengenal contact form 7 4\" width=\"316\" height=\"89\"><\/a><\/p>\n<p>Di halaman editor contact form, tentukan judul untuk formulir kontak kalian di kolom paling atas.<\/p>\n<p><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-10784 aligncenter\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-5-800x93.png\" alt=\"mengenal contact form 7 5\" width=\"800\" height=\"93\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-5-800x93.png 800w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-5.png 1024w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p>Selanjutnya, kalian bisa mengedit template formulir yang tersedia pada kotak teks di bawah kolom judul.<\/p>\n<p><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-10785 aligncenter\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-6-800x373.png\" alt=\"mengenal contact form 7 6\" width=\"800\" height=\"373\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-6-800x373.png 800w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-6.png 902w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p>Kalian juga bisa membuat formulir sendiri. Caranya, hapus semua teks dan klik tag informasi di atas kotak teks. Tag-tag ini adalah jenis kolom yang bisa kalian tambahkan ke formulir. Misalnya, jika ingin menambahkan kolom untuk informasi berupa alamat email, kalian klik tag <strong>email<\/strong>.<\/p>\n<p><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10786\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-7.png\" alt=\"mengenal contact form 7 7\" width=\"768\" height=\"147\"><\/a><\/p>\n<p>Akan muncul <em>pop-up <\/em>yang mana kalian bisa menentukan nama kolom dan menentukan apakah kolom tersebut wajib diisi atau tidak. Setelah kalian tentukan, klik <strong>Insert tag<\/strong> untuk menambahkan kolom ke formulir.<\/p>\n<p><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-8.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-10787 aligncenter\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-8.png\" alt=\"mengenal contact form 7 8\" width=\"568\" height=\"487\"><\/a><\/p>\n<p>Kolom yang kalian tambahkan ke formulir belum memiliki label sehingga belum ada petunjuk informasi apa yang harus pengunjung website isikan. Untuk menambahkan label, Anda bisa menambahkan tag <strong>&lt;label&gt;<\/strong>.<\/p>\n<p>Caranya, ketikkan tag pembuka <strong>&lt;label&gt;<\/strong>, lalu diikuti dengan teks yang ingin kalian jadikan label, misalnya <strong>Email Anda<\/strong>. Selanjutnya, ketikkan tag penutup <strong>&lt;\/label&gt;<\/strong> setelah kolom. Supaya lebih jelas, perhatikan contoh berikut ini:<\/p>\n<p><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-9.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-10788 aligncenter\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-9-800x205.png\" alt=\"mengenal contact form 7 9\" width=\"800\" height=\"205\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-9-800x205.png 800w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-9.png 816w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p>Kalian tinggal mengulangi cara tersebut ketika menambahkan kolom dan label lainnya.<\/p>\n<ol start=\"4\">\n<li>\n<h3><strong> Atur Format Email<\/strong><\/h3>\n<\/li>\n<\/ol>\n<p>Ketika pengunjung website mengirimkan pesan melalui formulir kontak, secara otomatis kalian akan menerima email yang berisi nama, detail kontak, serta isi dari pesan tersebut.<\/p>\n<p>Kalian bisa melakukan pengaturan format email yang kalian terima melalui tab <strong>Mail<\/strong>. Pengaturan yang wajib kalian ubah di sini adalah di kolom <strong>To<\/strong>. Pastikan kalian isi kolom itu dengan email admin WordPress agar bisa kalian terima.<\/p>\n<p><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-10.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-10789 aligncenter\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-10.png\" alt=\"mengenal contact form 7 10\" width=\"440\" height=\"441\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-10.png 440w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-10-120x120.png 120w\" sizes=\"auto, (max-width: 440px) 100vw, 440px\" \/><\/a><\/p>\n<ol start=\"5\">\n<li>\n<h3><strong> Atur Pesan di Formulir Kontak<\/strong><\/h3>\n<\/li>\n<\/ol>\n<p>Langkah berikutnya untuk cara setting Contact Form 7 di WordPress adalah mengatur pesan yang muncul di formulir. Misalnya, setelah pengunjung website mengisi formulir, akan muncul pesan terima kasih.<\/p>\n<p>Sebenarnya Contact Form 7 menawarkan template pesan yang sudah siap digunakan, tetapi ditulis dalam Bahasa Inggris. Jika ingin mengubahnya ke Bahasa Indonesia, klik tab <strong>Messages <\/strong>dan ketikkan pesan kalian di masing-masing kolom.<\/p>\n<p><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-11.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-10790 aligncenter\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-11.png\" alt=\"mengenal contact form 7 11\" width=\"509\" height=\"450\"><\/a><\/p>\n<p>Kalian bisa tambahkan pesan untuk notifikasi ketika pesan telah terkirim atau gagal terkirim.<\/p>\n<ol start=\"6\">\n<li>\n<h3><strong> Simpan Konfigurasi Formulir Kontak<\/strong><\/h3>\n<\/li>\n<\/ol>\n<p>Setelah kalian membuat formulir dan menentukan pengaturan, simpan semuanya dengan klik tombol <strong>Save <\/strong>di bagian bawah editor Contact Form 7.<\/p>\n<p>Di bawah judul formulir akan muncul shortcode yang dibutuhkan untuk menampilkan formulir. Salin dan masukkan shortcode itu ke halaman, postingan, atau widget untuk menampilkan formulir.<\/p>\n<p><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-12.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-10791 aligncenter\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-12.png\" alt=\"mengenal contact form 7 12\" width=\"484\" height=\"130\"><\/a><\/p>\n<p>Berikut ini adalah contoh formulir yang dipasang di area widget:<\/p>\n<p><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-13.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-10792 aligncenter\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-13.png\" alt=\"mengenal contact form 7 13\" width=\"390\" height=\"618\"><\/a><\/p>\n<ol start=\"7\">\n<li>\n<h3><strong>Tes Formulir Kontak&nbsp;<\/strong><\/h3>\n<\/li>\n<\/ol>\n<p>Jika sudah ter<em>publish<\/em>, cobalah isi formulir tersebut. Tujuannya adalah untuk memastikan formulir telah berfungsi dengan baik. Jika pesan berhasil terkirim, kalian akan melihat notifikasi seperti gambar di bawah ini.<\/p>\n<p><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-14.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-10793 aligncenter\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/Mengenal-Contact-Form-7-14.png\" alt=\"mengenal contact form 7 14\" width=\"619\" height=\"61\"><\/a><\/p>\n<p>Gimana, cara setting Contact Form 7 ternyata mudah, ya? Dengan memanfaatkan plugin tersebut, kalian bisa membuat formulir kontak untuk memudahkan pengunjung website menghubungi kalian.<\/p>\n<p>Oia, formulir kontak memang termasuk salah satu fitur penting di website lho, terutama toko online. Sebab, calon konsumen jadi bisa bertanya tentang produk atau layanan dengan mudah.<\/p>\n<p>Nah, Jetorbit punya<a href=\"https:\/\/www.jetorbit.com\/jasa-website-toko-online\/\"> Paket Website Toko Online<\/a>, nih. Kalian bisa menjual apa saja dengan toko online milik kalian sendiri! Mudah digunakan oleh siapa saja yang tentunya disertai dengan dukungan bantuan terbaik yang kalian dapatkan. Tenang, kami juga menyediakan produk VPS yang bisa kalian gunakan sesuai kebutuhan kalian tentunya.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kalian sudah tahukah bahwa dengan adanya formulir kontak di website akan memudahkan pengunjung menghubungi kalian? Untungnya nih, membuat formulir kontak cukup mudah dan praktis dengan bantuan plugin. Salah satunya, Contact Form 7. Mau tahu lebih lengkap tentang Contact Form 7? Tak usah lama-lama, simak yuk Mengenal Contact Form 7 dan Cara Menggunakannya di WordPress Apa &#8230; <a title=\"Mengenal Contact Form 7 dan Cara Menggunakannya di WordPress\" class=\"read-more\" href=\"https:\/\/www.jetorbit.com\/blog\/contact-form-7-dan-cara-menggunakan-di-wordpress\/\" aria-label=\"Read more about Mengenal Contact Form 7 dan Cara Menggunakannya di WordPress\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":11137,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[25],"tags":[3341,3342,283,7,3343],"class_list":["post-10777","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-info","tag-contact-form-7","tag-contact-form-7-adalah","tag-domain-murah","tag-hosting-murah","tag-setting-contact-form-7","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"_links":{"self":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/10777","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/comments?post=10777"}],"version-history":[{"count":5,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/10777\/revisions"}],"predecessor-version":[{"id":11139,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/10777\/revisions\/11139"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media\/11137"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media?parent=10777"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/categories?post=10777"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/tags?post=10777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}