{"id":5508,"date":"2017-08-28T08:52:15","date_gmt":"2017-08-28T08:52:15","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-id-tutorial\/?p=5508"},"modified":"2023-01-04T15:18:46","modified_gmt":"2023-01-04T08:18:46","slug":"cara-membuat-form-kontak-di-wordpress","status":"publish","type":"post","link":"\/id\/tutorial\/cara-membuat-form-kontak-di-wordpress","title":{"rendered":"Cara membuat form kontak di WordPress dengan Contact Form 7"},"content":{"rendered":"<p>Form kontak sangat bermanfaat bagi website karena membantu menjaga privasi alamat email, salah satunya dengan mengurangi kemungkinan spam. Selain itu, cara ini juga memudahkan pengunjung situs untuk terhubung dengan Anda melalui website Anda.<\/p><p>Jika sudah memiliki halaman Hubungi Kami di website WordPress Anda, selanjutnya akan sangat mudah untuk menambahkan Form Kontak, mengaturnya, lalu mulai menerima pesan.<\/p><p>Cara membuat form kontak di WordPress yang paling mudah adalah dengan menggunakan <strong>plugin<\/strong>. Untuk saat ini, ada banyak plugin yang bisa Anda pilih, dan salah satunya adalah Contact Form 7.<\/p><p>Dengan lebih dari 3 juta plugin yang aktif dan dapat diinstall, <strong>Contact Form 7<\/strong> merupakan plugin Form Kontak WordPress yang paling banyak digunakan. Antarmuka yang intuitif dan pemasangan yang cepat membantu Anda membuat form dalam waktu singkat.<\/p><p>\n\n\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-yang-anda-butuhkan\">Yang Anda Butuhkan<\/h2><ul class=\"wp-block-list\">\n<li>Akses ke dashboard admin WordPress Anda<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-langkah-1-menginstall-contact-form-7\">Langkah 1 &ndash; Menginstall Contact Form 7<\/h2><ol class=\"wp-block-list\">\n<li>Login ke dashboard WordPress Anda, dan pilih&nbsp;<strong>Plugins &gt; Add new&nbsp;<\/strong>di sebelah kiri menu.<\/li>\n\n\n\n<li>Cari&nbsp;<strong>Contact form 7&nbsp;<\/strong>dan pilih&nbsp;<strong>Install<\/strong>.<\/li>\n\n\n\n<li>Setelah diinstall, pilih&nbsp;<strong>Activate&nbsp;<\/strong>untuk mengaktifkan plugin tersebut di website Anda.<img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/05\/install-contact-form-7.png\" alt=\"Plugin form kontak WordPress\" width=\"900\" height=\"507\"><\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-langkah-2-cara-membuat-form-kontak-di-wordpress\">Langkah 2 &ndash; Cara Membuat Form Kontak di WordPress<\/h2><p>Setelah Anda <strong><a href=\"\/id\/tutorial\/cara-install-plugin-wordpress\">install plugin WordPress<\/a><\/strong> tersebut, bagian baru <strong>Contact <\/strong>kemudian ditampilkan pada menu dashboard di sebelah kiri.<\/p><ol class=\"wp-block-list\">\n<li>Pilih&nbsp;<strong>Contact -&gt; Add new&nbsp;<\/strong>untuk membuat form pertama Anda.<\/li>\n\n\n\n<li>Tambahkan judul di form Anda &ndash; contoh,&nbsp;<strong>WordPress Contact Form.<\/strong><\/li>\n\n\n\n<li>Beberapa label dan kolom input telah dibuat di form untuk membantu Anda mulai menggunakan plugin ini. Anda dapat menghapus, atau menambahkan label atau kolom input baru dengan memilihnya dari daftar yang ditampilkan di bagian atas area teks.<img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/06\/contact-form-wordpress.png\" alt=\"Contact Form 7 WordPress\" width=\"900\" height=\"499\"><\/li>\n<\/ol><p>Jika Anda tidak yakin label atau kolom input seperti apa yang dibutuhkan, maka Anda tidak perlu melakukan apa-apa. Anda bisa kembali ke bagian ini kapan pun dan mengeditnya.<\/p><p>Tampilan akhir kode Anda akan terlihat seperti berikut, tergantung pada label dan kolom input yang dipilih:<\/p><pre class=\"wp-block-preformatted\">Your Name (required)\n<\/pre><p>[text* your-name]<\/p><p>\n\nYour Email (required)\n<\/p><p>[email* your-email]<\/p><p>\n\nSubject\n<\/p><p>[text your-subject]<\/p><p>\n\nYour Message\n<\/p><p>[textarea your-message]<\/p><p>\n\n[submit &ldquo;Send&rdquo;]\n<\/p><ul class=\"wp-block-list\">\n<li>Anda dapat menambahkan dan menghapus elemen sesuai kebutuhan. Untuk memulainya, kita bisa mencoba menggunakan placeholder yang ditampilkan di atas form.<img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/06\/wordpress-contact-form-7-placeholders.png\" alt=\"Placeholder Contact form 7\" width=\"900\" height=\"87\"><\/li>\n\n\n\n<li>Ikon bintang<strong> *<\/strong> mengindikasikan bahwa kolom wajib diisi.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-langkah-3-mengatur-format-email-anda\">Langkah 3 &ndash; Mengatur Format Email Anda<\/h2><p>Pada saat pengunjung mengirimkan pesan melalui form yang Anda buat, Anda akan menerima email berisikan nama, informasi kontak, dan isi pesan mereka.<\/p><p>Anda dapat mengatur email melalui tab&nbsp;<strong>Mail<\/strong> &ndash; beberapa&nbsp;<strong>mail-tags&nbsp;<\/strong>tercantum di bagian atas. Jangan khawatir jika Anda ingin menambahkan mail-tags di kolom yang telah ditentukan &ndash; Anda bisa kembali kapan saja untuk mengeditnya.<strong><span style=\"font-weight: 400\"><\/span><\/strong><\/p><p>\n\n\n<div><p class=\"important\">Pastikan Anda membuat perintah &ldquo;masukkan alamat email yang valid&rdquo; di kolom <strong>To <\/strong>karena&nbsp;semua pesan akan dikirimkan melalui alamat email yang diberikan.<span style=\"font-weight: 400\"><\/p><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/06\/contact-form-7-mail-tab.png\" alt=\"Tab Mail Contact form 7\"><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-langkah-4-mengatur-pesan\">Langkah 4 &ndash; Mengatur Pesan<\/h2>\n\n\n\n<p>Di tab&nbsp;<strong>Messages<\/strong>, Anda dapat mengatur pesan yang akan dilihat oleh pengunjung situs Anda pada saat mereka mengirimkan form. Misalnya, Anda dapat mengatur pesan untuk menandai formulir yang telah berhasil dikirimkan dan juga pesan yang berbeda jika terjadi error (sebagai contoh, pengunjung situs memasukkan alamat email yang tidak valid, atau tidak mengisi kolom yang wajib diisi).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/06\/contact-form-7-messages-tab.png\" alt=\"Tab Pesan Contact form 7 WordPress\"><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-langkah-5-menyimpan-dan-menerbitkan-form-anda\">Langkah 5 &ndash; Menyimpan dan Menerbitkan Form Anda<\/h2>\n\n\n\n<p>Jika sudah selesai, Anda dapat menyimpan perubahan yang dilakukan dengan mengklik&nbsp;<strong>Save&nbsp;<\/strong>di sisi kanan panel.<\/p>\n\n\n\n<p>Setelah perubahan form disimpan, &ldquo;shortcode&rdquo; akan ditampilkan di bagian atas. Shortcode tersebut di-highlight dengan warna biru, dan tampilannya akan seperti ini:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/06\/wordpress-contact-form-7-shortcut.png\" alt=\"Shortcut Contact form 7\"><\/figure><\/div>\n\n\n<pre class=\"wp-block-preformatted\">[contact-form-7 id=\"123\" title=\"WordPress Contact Form\"]<\/pre>\n\n\n\n<p>Untuk menampilkan form yang Anda buat:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Pilih lalu salin shortcode.<\/li>\n\n\n\n<li>Tempel (paste) shortcode tersebut di halaman, post, atau <strong><a href=\"\/id\/tutorial\/apa-itu-widget\">widget<\/a><\/strong> di mana Anda hendak menampilkan form Anda.<img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/06\/wordpress-contact-us-page.png\" alt=\"Halaman Hubungi Kami di WordPress\" width=\"900\" height=\"369\"><\/li>\n\n\n\n<li>Hasil akhirnya akan terlihat seperti ini:<img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/06\/wordpress-contact-form-published.png\" alt=\"Form Kontak WordPress yang Telah Diterbitkan\" width=\"900\" height=\"742\"><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-langkah-6-mengetes-form-kontak-wordpress\">Langkah 6 &ndash; Mengetes Form Kontak WordPress<\/h2>\n\n\n\n<p>Untuk melihat tampilan form yang dibuat dan memastikan apakah berfungsi dengan baik, maka Anda harus mengetesnya. Pun sangat penting untuk memastikan bahwa Anda menerima pesan melalui email.<\/p>\n\n\n\n<p>Anggap diri Anda seorang pengunjung website. Buka website WordPress Anda dan kirimkan form &ndash; kapan saja Anda bisa kembali ke halaman form editor untuk melakukan beberapa perubahan.<\/p>\n\n\n\n<p>Jangan lupa untuk mengklik tombol&nbsp;<strong>Save&nbsp;<\/strong>setiap kali Anda melakukan perubahan. Dengan begini, Anda tidak perlu lagi menyalin dan menempel (copy dan paste) shortcode.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/id\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-37614\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-kesimpulan\">Kesimpulan<\/h2>\n\n\n\n<p>Langkah-langkah yang dituliskan dalam tutorial ini merupakan hal-hal dasar yang Anda perlukan untuk membuat dan menerbitkan Form Kontak di website WordPress Anda dan untuk menerima pesan melalui email.<\/p>\n\n\n\n<p>Anda pun tidak dilarang jika ingin bereksperimen dengan tag dan placehorder, bahkan membuat form dan email Anda. Anda juga dapat mencoba menggunakan&nbsp;<a href=\"https:\/\/wordpress.org\/plugins\/flamingo\/\" target=\"_blank\" rel=\"noopener\"><strong>Flamingo <\/strong><\/a>&ndash; plugin penyimpanan pesan, untuk menyimpan semua pesan yang Anda terima ke dalam database (sangat berguna jika server mail Anda mengalami masalah).<\/p>\n<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Form kontak sangat bermanfaat bagi website karena membantu menjaga privasi alamat email, salah satunya dengan mengurangi kemungkinan spam. Selain itu, cara ini juga memudahkan pengunjung situs untuk terhubung dengan Anda melalui website Anda. Jika sudah memiliki halaman Hubungi Kami di website WordPress Anda, selanjutnya akan sangat mudah untuk menambahkan Form Kontak, mengaturnya, lalu mulai menerima [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/id\/tutorial\/cara-membuat-form-kontak-di-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":55,"featured_media":5512,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"Ingin membuat tampilan wordpress Anda terlihat canggih? Tak ada salahnya mengikuti tutorial cara membuat form kontak di WordPress ini.","rank_math_focus_keyword":"cara membuat form kontak di wordpress, form kontak, membuat form kontak di wordpress","footnotes":""},"categories":[4859],"tags":[7691,7692,7693,7696,7695,7697,7694,4860],"class_list":["post-5508","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-contact-form","tag-contact-form-7","tag-contact-form-wordpress","tag-form-kontak","tag-form-kontak-di-wordpress","tag-formulir-kontak","tag-membuat-form-kontak","tag-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/formulario-de-contato-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/formulaire-contact-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/crear-formulario-contacto-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-form-kontak-di-wordpress","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/wordpress-contactformulier","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/joomla-vs-wordpress-cms-utilizar-5","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/joomla-vs-wordpress-cms-utilizar-5","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/crear-formulario-contacto-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/formulario-de-contato-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-create-a-contact-form-on-wordpress","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/5508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=5508"}],"version-history":[{"count":11,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/5508\/revisions"}],"predecessor-version":[{"id":29074,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/5508\/revisions\/29074"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media\/5512"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=5508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=5508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=5508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}