{"id":134,"date":"2019-11-21T14:50:25","date_gmt":"2019-11-21T07:50:25","guid":{"rendered":"https:\/\/bikin.website\/kb\/?p=134"},"modified":"2019-11-21T14:58:16","modified_gmt":"2019-11-21T07:58:16","slug":"tutorial-setting-plugin-contact-form-7","status":"publish","type":"post","link":"https:\/\/bikin.website\/kb\/tutorial-setting-plugin-contact-form-7\/","title":{"rendered":"Tutorial Setting Plugin Contact Form 7"},"content":{"rendered":"

Contact form<\/strong> atau formulir kontak<\/em> merupakan salah satu halaman yang tidak pernah absen dalam sebuah anatomi website. Pasalnya, dengan formulir sederhana ini pengunjung bisa mengirimkan keluh kesah berupa pertanyaan, kritik maupun saran secara langsung kepada pengelola website.<\/p>\n

Bagi Anda yang baru pertama kali memiliki website mungkin bakal mengalami kesulitan dalam membuat serta mengatur halaman kontak. Namun, Anda tidak perlu khawatir lagi, karena pada kesempatan kali ini kita akan membahas tuntas panduan cara membuat halaman kontak<\/strong> menggunakan plugin Contact Form 7<\/strong>.<\/p>\n

\"plugin
plugin contact form 7<\/figcaption><\/figure>\n

Mengapa harus menggunakan plugin Contact Form 7? Contact Form 7 merupakan salah satu plugin WordPress yang paling terkenal untuk membuat halaman kontak atau formulir kontak. Cara penggunaanya juga simpel dan mudah, sehingga memungkinkan para pengguna pemula untuk melakukan kustomisasi sendiri.<\/p>\n

 <\/p>\n

Cara Membuat Halaman Kontak Menggunakan Plugin Contact Form 7<\/strong><\/h2>\n

 <\/p>\n

Langkah Ke-1: Menginstal Plugin Contact Form 7<\/strong><\/p>\n

Sebelum mulai membuat halaman kontak, hal pertama yang wajib Anda lakukan tentunya adalah menginstall plugin Contact Form 7 ke dalam website. Caranya sangat mudah, yakni Anda hanya perlu masuk ke dashboard WodPress kemudian pilih tab Plugin<\/strong> pada bagian kiri layar.<\/p>\n

Setelah tab Plugin<\/strong> terbuka Anda bisa mengetikkan nama \u201cContact Form 7\u201d<\/strong> di kolom search yang tersedia. Jangan bingung dengan banyaknya pilihan plugin bernama Contact Form 7, pilihlah plugin buatan Takayuki Miyoshi yang memiliki tampilan sebagai berikut ini.<\/p>\n

\"\"<\/p>\n

Klik Install > Activate<\/strong>.<\/p>\n

Selesai. Lanjut ke langkah berikutnya.<\/p>\n

Langkah Ke-2: Membuat Form Baru dan Melakukan Konfigurasi<\/strong><\/p>\n

Pada tahap ini kami asumsikan Anda sudah memiliki plugin Contact Form 7<\/strong> yang sudah aktif dan siap digunakan. Untuk membuat form baru Anda bisa memilih tab Contact<\/strong> > Add New<\/strong>.<\/p>\n

\"\"<\/p>\n

Tuliskan judul<\/strong> untuk menamai form kontak yang ingin Anda buat, lalu gulirkan ke bawah<\/strong> untuk melihat markup<\/strong> penyusun form.<\/p>\n

\"\"<\/p>\n

Di sini Anda bisa mengatur dan menyesuaikan kolom elemen seperti yang Anda inginkan.<\/p>\n

Adapun secara default, Contact Form 7 membawa pengaturan kolom yang terdiri dari nama lengkap, email, subject, message, dan tombol send.<\/p>\n

Jika Anda menginginkan ada tambahan kolom lain seperti nomor telepon atau sistem keamanan Google CAPTCHA Anda bisa memilih markup tag generator<\/strong> yang tersedia di atas kolom edit artikel.<\/p>\n

Setelah selesai, jangan lupa untuk klik Save<\/strong> agar formulir bisa segera kita tampilkan.<\/p>\n

\"\"<\/p>\n

Mengatur Konfigurasi <\/strong><\/h3>\n

Konfigurasi yang dimaksud dalam hal ini adalah mengatur alamat email yang digunakan untuk menerima hasil input dari pengunjung (To)<\/strong>, mengatur email pengirim (From)<\/strong>, subject email (Subject)<\/strong>, additional headers, message body, dan lampiran (file attachment)<\/strong>.<\/p>\n

\"\"<\/p>\n

Pada kolom To<\/strong> pastikan alamat email sudah benar agar pesan dari pengunjung bisa direkap dengan baik dan benar.<\/p>\n

Langkah Ke-3: Menambahkan Shortcode ke Halaman Kontak (Pages)<\/strong><\/p>\n

Langkah ketiga atau terakhir yakni menambahkan form yang sudah dibuat kedalam artikel postingan atau halaman (Pages)<\/strong>. Untuk memasukkan form Anda hanya perlu meng-copy<\/em> shortcode<\/strong> yang dberikan.<\/p>\n

Caranya klik menu Contact > Contact Forms<\/strong>.<\/p>\n

\"\"<\/p>\n

Setelah itu copy shortcode di sebelah judul form yang ingin Anda gunakan. Tampilannya seperti berikut ini:<\/p>\n

\"\"<\/p>\n

Buat Laman (Page)<\/strong> atau Post baru<\/strong> sebagai wadah yang ingin dijadikan halaman kontak. Perlu diketahui, biasanya untuk halaman statis seperti halaman kontak para webmaster kebanyakan menggunakan Laman (Pages)<\/strong> sementara untuk postingan hanya ditambahkan formulir kontak ketika ingin membuka pendaftaran atau semacamnya.<\/p>\n

Isi tab Laman (Pages)<\/strong> yang masih kosong dengan informasi dasar seperti Judul, URL permalink<\/strong>, atau kategori<\/strong>. Kemudian paste shortcode<\/strong> yang sudah Anda dapatkan ke bagian text editor (body)<\/strong>.<\/p>\n

Lakukan Preview<\/strong> halaman untuk meninjau hasilnya, jika Anda sudah puas klik tombol Publish<\/strong>.<\/p>\n

Selesai.<\/p>\n

 <\/p>\n

Cara Edit Halaman Kontak yang Sudah Ada<\/strong><\/h2>\n

 <\/p>\n

    \n
  1. Login ke halaman dashboard WordPress dengan cara mengakses namadomain.com\/wp-admin<\/strong> dan memasukkan informasi login.<\/li>\n<\/ol>\n

    \"\"<\/strong><\/p>\n

      \n
    1. Jika sudah masuk kedalam dashboard WordPress pilih tab Contact<\/strong> > Contact Form.<\/strong><\/li>\n<\/ol>\n

      \"\"<\/strong><\/p>\n

        \n
      1. Akan muncul halaman berisi daftar form yang pernah Anda buat sebelumnya. Untuk menyunting dan mengedit form, Anda tinggal memilih salah satu judul kemudian klik edit<\/strong>.<\/li>\n<\/ol>\n

        \"\"<\/p>\n

          \n
        1. Setelah masuk ke dalam text editor<\/strong> Anda bisa menyesuaikan bagian mana saja yang perlu diperbaiki.<\/li>\n<\/ol>\n

          \"\"<\/p>\n

            \n
          1. Jangan lupa klik Save <\/strong>jika sudah selesai mngedit.<\/li>\n<\/ol>\n

            Bagaimana apakah tutorial cara setting halaman kontak menggunakan plugin Contact Form 7 di atas sudah cukup jelas? Jangan sungkan untuk meninggalkan jejak di kolom komentar jika ada hal-hal yang urang tepat atau ingin ditambahkan.<\/p>\n

            Selamat mencoba.<\/p>\n

             <\/p>\n","protected":false},"excerpt":{"rendered":"

            Contact form atau formulir kontak merupakan salah satu halaman yang tidak pernah absen dalam sebuah anatomi website. Pasalnya, dengan formulir sederhana ini pengunjung bisa mengirimkan … Read More ›<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[25,3],"tags":[7,23,22,24,6,4],"yoast_head":"\nTutorial Setting Plugin Contact Form 7 | Bikin.website Manual Knowledge Base<\/title>\n<meta name=\"description\" content=\"Bikin.website Manual Knowledge Base | Tutorial Setting Plugin Contact Form 7 Tutorial\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bikin.website\/kb\/tutorial-setting-plugin-contact-form-7\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial Setting Plugin Contact Form 7 | Bikin.website Manual Knowledge Base\" \/>\n<meta property=\"og:description\" content=\"Bikin.website Manual Knowledge Base | Tutorial Setting Plugin Contact Form 7 Tutorial\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bikin.website\/kb\/tutorial-setting-plugin-contact-form-7\/\" \/>\n<meta property=\"og:site_name\" content=\"Bikin.website Manual Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-21T07:50:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-21T07:58:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bikin.website\/kb\/wp-content\/uploads\/2019\/11\/Screenshot_121.png\" \/>\n<meta name=\"author\" content=\"Andy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial Setting Plugin Contact Form 7 | Bikin.website Manual Knowledge Base","description":"Bikin.website Manual Knowledge Base | Tutorial Setting Plugin Contact Form 7 Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bikin.website\/kb\/tutorial-setting-plugin-contact-form-7\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial Setting Plugin Contact Form 7 | Bikin.website Manual Knowledge Base","og_description":"Bikin.website Manual Knowledge Base | Tutorial Setting Plugin Contact Form 7 Tutorial","og_url":"https:\/\/bikin.website\/kb\/tutorial-setting-plugin-contact-form-7\/","og_site_name":"Bikin.website Manual Knowledge Base","article_published_time":"2019-11-21T07:50:25+00:00","article_modified_time":"2019-11-21T07:58:16+00:00","og_image":[{"url":"https:\/\/bikin.website\/kb\/wp-content\/uploads\/2019\/11\/Screenshot_121.png"}],"author":"Andy","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Andy","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/bikin.website\/kb\/tutorial-setting-plugin-contact-form-7\/#article","isPartOf":{"@id":"https:\/\/bikin.website\/kb\/tutorial-setting-plugin-contact-form-7\/"},"author":{"name":"Andy","@id":"https:\/\/bikin.website\/kb\/#\/schema\/person\/3a5665ab219f734a37b8b2133a06bc4b"},"headline":"Tutorial Setting Plugin Contact Form 7","datePublished":"2019-11-21T07:50:25+00:00","dateModified":"2019-11-21T07:58:16+00:00","mainEntityOfPage":{"@id":"https:\/\/bikin.website\/kb\/tutorial-setting-plugin-contact-form-7\/"},"wordCount":674,"commentCount":0,"publisher":{"@id":"https:\/\/bikin.website\/kb\/#organization"},"keywords":["bikin website","contact form 7","plugin","tutorial","website","wordpress"],"articleSection":["Manage WordPress","Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/bikin.website\/kb\/tutorial-setting-plugin-contact-form-7\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/bikin.website\/kb\/tutorial-setting-plugin-contact-form-7\/","url":"https:\/\/bikin.website\/kb\/tutorial-setting-plugin-contact-form-7\/","name":"Tutorial Setting Plugin Contact Form 7 | Bikin.website Manual Knowledge Base","isPartOf":{"@id":"https:\/\/bikin.website\/kb\/#website"},"datePublished":"2019-11-21T07:50:25+00:00","dateModified":"2019-11-21T07:58:16+00:00","description":"Bikin.website Manual Knowledge Base | Tutorial Setting Plugin Contact Form 7 Tutorial","breadcrumb":{"@id":"https:\/\/bikin.website\/kb\/tutorial-setting-plugin-contact-form-7\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bikin.website\/kb\/tutorial-setting-plugin-contact-form-7\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/bikin.website\/kb\/tutorial-setting-plugin-contact-form-7\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bikin.website\/kb\/"},{"@type":"ListItem","position":2,"name":"Tutorial Setting Plugin Contact Form 7"}]},{"@type":"WebSite","@id":"https:\/\/bikin.website\/kb\/#website","url":"https:\/\/bikin.website\/kb\/","name":"Bikin.website Manual Knowledge Base","description":"Bikin.website Manual Knowledge Base","publisher":{"@id":"https:\/\/bikin.website\/kb\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bikin.website\/kb\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/bikin.website\/kb\/#organization","name":"Bikin.website","url":"https:\/\/bikin.website\/kb\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bikin.website\/kb\/#\/schema\/logo\/image\/","url":"https:\/\/bikin.website\/kb\/wp-content\/uploads\/2019\/11\/logo-blue-scaled.png","contentUrl":"https:\/\/bikin.website\/kb\/wp-content\/uploads\/2019\/11\/logo-blue-scaled.png","width":2560,"height":313,"caption":"Bikin.website"},"image":{"@id":"https:\/\/bikin.website\/kb\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/bikin.website\/kb\/#\/schema\/person\/3a5665ab219f734a37b8b2133a06bc4b","name":"Andy","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bikin.website\/kb\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9ae509f9672b601e324430c787bc1731?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9ae509f9672b601e324430c787bc1731?s=96&d=mm&r=g","caption":"Andy"},"url":"https:\/\/bikin.website\/kb\/author\/andy\/"}]}},"_links":{"self":[{"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/posts\/134"}],"collection":[{"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":5,"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/posts\/134\/revisions"}],"predecessor-version":[{"id":150,"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/posts\/134\/revisions\/150"}],"wp:attachment":[{"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/media?parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/categories?post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bikin.website\/kb\/wp-json\/wp\/v2\/tags?post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}