{"id":16415,"date":"2020-08-25T16:22:25","date_gmt":"2020-08-25T09:22:25","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=16415"},"modified":"2021-03-19T20:22:24","modified_gmt":"2021-03-19T13:22:24","slug":"cara-membuat-contact-form-di-wordpress-dengan-elementor","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/cara-membuat-contact-form-di-wordpress-dengan-elementor\/","title":{"rendered":"Cara Membuat Contact Form di WordPress dengan Elementor"},"content":{"rendered":"\n

Setiap website pasti memiliki menu halaman sesuai dengan profile website yang digunakan. Namun, salah satu halaman penting yang harus ada di dalam sebuah website adalah halaman contact form. Halaman ini berfungsi sebagai sarana dimana pengunjung situs website dapat berkomunikasi atau menghubungi pengelola\/pemilik website secara langsung.<\/p>\n\n\n\n\n\n\n\n\n\n

Install Plugin Contact Form<\/h2>\n\n\n\n

Untuk website yang dibuat dengan platform WordPress, ada banyak sekali plugin contact form yang bisa Anda gunakan seperti Contact Form 7<\/a>, Ninja Form<\/a> hingga Elementor<\/a>. Kali ini, Rumahaweb akan berbagi Tips untuk membuat form contact melalui plugin elementor.<\/p>\n\n\n\n

Pastikan plugin elementor sudah Anda install sebelumnya. Jika belum, Anda bisa mengikuti panduan berikut : install plugin di WordPress<\/a> <\/p>\n\n\n\n

Membuat Contact Form dengan Elementor<\/h2>\n\n\n\n

Setelah plugin elementor aktif, Anda bisa mengikuti panduan berikut untuk membuat form di menu pages : <\/p>\n\n\n\n

  1. Untuk halaman kontak pada menu Laman<\/strong> \/ Pages<\/strong>, kemudian cari dengan nama halaman Contact.<\/li><\/ol>\n\n\n\n
    \"menu<\/figure><\/div>\n\n\n\n

    <\/p>\n\n\n\n

    2. Lalu klik Edit<\/strong> \/ Sunting<\/strong> pada halaman Contact.<\/p>\n\n\n\n

    \"halaman<\/figure><\/div>\n\n\n\n

    <\/p>\n\n\n\n

    3. Setelah muncul halaman editor, klik tombol \u201cEdit with Elementor<\/strong>\u201d.<\/p>\n\n\n\n

    \"tampilan<\/figure><\/div>\n\n\n\n

    <\/p>\n\n\n\n

    4. Pada menu Element, cari widget Form bisa melalui fitur \u201cSearch Widget\u201d atau dengan scroll widget.<\/p>\n\n\n\n

    \"form<\/figure><\/div>\n\n\n\n

    <\/p>\n\n\n\n

    5. Klik pada widget Form<\/strong>, kemudian drag and drop (tarik dan lepas) pada halaman contact seperti gambar dibawah ini.<\/p>\n\n\n\n

    \"get<\/figure><\/div>\n\n\n\n

    <\/p>\n\n\n\n

    6. Setelah berhasil menambahkan widget Form akan tampil seperti gambar berikut. Secara default untuk form ada 3 kolom, diantaranya : Name, Email, dan Message.<\/p>\n\n\n\n

    \"contoh<\/figure><\/div>\n\n\n\n

    <\/p>\n\n\n\n

    7. Pada Form Fields, untuk Form Name bisa diisikan dengan \u201cContact Form<\/strong>\u201d atau sesuai dengan halaman yang Anda inginkan.<\/p>\n\n\n\n

    \"halaman<\/figure><\/div>\n\n\n\n

    <\/p>\n\n\n\n

    8. Sebagai opsi tambahan, Anda bisa menambahkan kolom No. Handphone dengan klik tombol \u201c+ ADD ITEM<\/strong>\u201c.<\/p>\n\n\n\n

    \"form<\/figure><\/div>\n\n\n\n

    <\/p>\n\n\n\n

    9. Kemudian bisa sesuaikan dengan urutan form yang Anda inginkan seperti gambar dibawah ini.<\/p>\n\n\n\n

    \"\"<\/figure><\/div>\n\n\n\n

    <\/p>\n\n\n\n

    10. Selanjutnya, klik tombol \u201cButton<\/strong>\u201d untuk disesuaikan dengan form kontak Anda.<\/p>\n\n\n\n

    \"menu<\/figure><\/div>\n\n\n\n

    11. Lalu bisa edit dari tombol \u201cSend<\/strong>\u201d menjadi \u201cKirim Pesan<\/strong>\u201d.<\/p>\n\n\n\n

    \"setting<\/figure><\/div>\n\n\n\n

    12. Selanjutnya konfigurasi email agar berhasil terima pesan dari pengunjung dengan klik menu \u201cEmail<\/strong>\u201d<\/p>\n\n\n\n

    \"setting<\/figure><\/div>\n\n\n\n

    <\/p>\n\n\n\n

    13. Berikut adalah pengaturan yang perlu Anda konfigurasikan di bagian Email :
    To<\/strong> : masukkan alamat email ke mana pesan harus dikirim setelah formulir kontak dikirim.
    Email Subject<\/strong> : tambahkan perihal yang akan ditampilkan di kotak surat Anda.
    From Email<\/strong> : masukkan alamat email tujuan pengiriman pesan.
    Form Name<\/strong> : tambahkan nama dari siapa email itu dikirim.
    Reply-To<\/strong> : masukkan alamat email yang dapat Anda kirimi balasan setelah pesan diterima. Secara default, jika kolom ini kosong, balasannya akan dikirim ke pengirim. Anda dapat mengubahnya dan menambahkan alamat email lain di  kolom Cc dan Bcc.<\/p>\n\n\n\n

    14. Setelah berhasil setting dan konfigurasi, selanjutnya klik tombol \u201cUPDATE<\/strong>\u201d.<\/p>\n\n\n\n

    \"update<\/figure><\/div>\n\n\n\n

    <\/p>\n\n\n\n

    15. Kemudian Anda bisa mencoba tes kirim pesan untuk memastikan apakah konfigurasi sudah benar atau tidaknya.<\/p>\n\n\n\n

    \"test<\/figure><\/div>\n\n\n\n

    <\/p>\n\n\n\n

    16. Apabila konfigurasi email sudah benar, maka testing pengiriman email akan berhasil dengan muncul pesan \u201cThe form was sent successfully.<\/em><\/strong>\u201d<\/p>\n\n\n\n

    \"hasil<\/figure><\/div>\n\n\n\n

    <\/p>\n\n\n\n

    Demikian panduan Rumahweb tentang\u00a0cara mudah membuat contact form di WordPress<\/span> dengan Elementor. Selamat mencoba.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Setiap website pasti memiliki menu halaman sesuai dengan profile website yang digunakan. Namun, salah satu halaman penting yang harus ada di dalam sebuah website adalah halaman contact form. Halaman ini berfungsi sebagai sarana dimana pengunjung situs website dapat berkomunikasi atau menghubungi pengelola\/pemilik website secara langsung.<\/p>\n","protected":false},"author":336,"featured_media":16449,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[463],"tags":[726,1288,14],"class_list":{"0":"post-16415","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-wordpress","8":"tag-contact-form","9":"tag-elementor","10":"tag-wordpress"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/16415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/336"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=16415"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/16415\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/16449"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=16415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=16415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=16415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}