Cara Menyematkan Formulir di Situs Web Anda (3 Cara)

Diterbitkan: 2022-09-01

Apakah Anda ingin menyematkan formulir di situs web Anda? Baik itu formulir kontak sederhana atau survei pelanggan, formulir menambahkan fungsionalitas. Ada banyak cara untuk menggunakannya.

Dalam posting ini, kami telah menyusun panduan langkah demi langkah untuk menunjukkan kepada Anda cara termudah untuk menyematkan formulir di situs web WordPress Anda.

Buat Formulir WordPress Anda Sekarang

Bagaimana Saya Menambahkan Formulir yang Dapat Diisi ke Situs Web Saya?

Anda dapat menyematkan formulir di situs web Anda dengan menggunakan plugin WPForms, yang merupakan cara termudah dan tercepat. Ini memiliki 3 metode berbeda untuk menyematkan formulir yang dapat diisi di situs web Anda. Kami akan memandu Anda melalui mereka di posting ini.

Cara Menyematkan Formulir di Situs Web Anda

Kami akan menunjukkan kepada Anda 3 cara berbeda untuk memublikasikan formulir di WordPress dengan mudah.

Dalam Artikel Ini

  • Bagaimana Saya Menambahkan Formulir yang Dapat Diisi ke Situs Web Saya?
  • Langkah 1: Instal Plugin WPForms
  • Langkah 2: Buat Formulir
  • Langkah 3: Sematkan Formulir Anda
    • Menggunakan Tombol Sematkan WPForms
    • Menggunakan Editor Blok WordPress
    • Menggunakan Sematan Kode Pendek
  • Langkah 4: Publikasikan Formulir Anda

Mari kita mulai.

WPForms adalah plugin Pembuat Formulir WordPress terbaik. Dapatkan secara gratis!

Langkah 1: Instal Plugin WPForms

WPForms home

WPForms memungkinkan Anda membuat formulir sendiri atau memilih dari 400+ template, dan sangat mudah untuk disematkan di situs WordPress Anda. Untuk memulai, unduh plugin WPForms.

Setelah Anda mengunduh plugin, Anda harus mengunggahnya ke situs web Anda. Jika Anda tidak yakin bagaimana melakukannya, panduan pemula untuk menginstal plugin WordPress ini dapat memandu Anda melalui prosesnya.

Langkah 2: Buat Formulir

Setelah Anda menginstal plugin WPForms, Anda siap untuk memulai. Apakah Anda ingin membuat formulir sendiri atau memulai dari templat terserah Anda, tetapi hal pertama yang harus dilakukan adalah mengklik Tambah Baru .

Add new form

Setelah Anda mengklik tombol itu, Anda akan melihat berbagai template yang dapat Anda pilih. Ada juga opsi untuk memilih formulir kosong dan membuatnya sendiri.

Saat Anda mengarahkan mouse ke pilihan Anda, Anda akan melihat 2 opsi:

  1. Gunakan templat
  2. Lihat demo

Jika Anda melihat demo, itu akan menunjukkan seperti apa bentuk yang disematkan. Ingat bahwa template dapat disesuaikan, jadi jika ada yang ingin Anda ubah, Anda bisa.

Setelah Anda menentukan template mana yang ingin Anda gunakan, lanjutkan dan klik tombol gunakan template . Ini akan terbuka di editor. Untuk posting ini, kami akan menggunakan templat formulir kontak sederhana.

Sekarang saatnya untuk menyesuaikan formulir Anda jika Anda mau. Dalam kasus kami, template hanya mengumpulkan nomor telepon. Kami menyesuaikannya dengan terlebih dahulu menambahkan bidang kotak centang yang meminta preferensi kontak mereka dan menambahkan opsi email.

Preferred contact checkbox field

Kemudian kami menyiapkan sedikit logika kondisional, yang dapat Anda temukan di tab Logika Cerdas di bawah Opsi Bidang . Logika bersyarat memungkinkan Anda menyiapkan aturan sehingga pengguna hanya melihat bidang yang berlaku untuknya.

Dalam contoh ini, jika mereka memilih email, mereka akan melihat bidang untuk memberikan alamat email. Jika Anda ingin menyertakan kotak centang GDPR di sini, Anda juga dapat melakukannya dengan mudah.

Conditional logic radio buttons

Jika mereka memilih telepon, mereka dapat memberikan nomor telepon.

Sekarang saatnya untuk memilih bagaimana Anda ingin menyematkan formulir Anda.

Langkah 3: Sematkan Formulir Anda

WPForms memiliki tiga cara untuk menyematkan formulir Anda di situs web Anda. Kami akan menunjukkan kepada Anda ketiga cara melakukannya di sini dan Anda dapat memilih salah satu yang paling mudah bagi Anda.

Menggunakan Tombol Sematkan WPForms

Metode penyematan pertama adalah cukup menggunakan tombol semat di bagian atas editor formulir Anda.

Template Embed Button

Setelah Anda mengklik tombol itu, Anda akan mendapatkan opsi untuk memilih halaman yang ada atau membuat halaman baru. Anda dapat memilih mana yang paling masuk akal untuk situs Anda. Kami membuat halaman kontak di sini. Setelah Anda mendapatkannya, Anda dapat mengklik Let's Go! tombol.

Embed to a Page

Setelah Anda melakukannya, draf halaman akan terbuka dan Anda akan melihat formulir yang disematkan. Klik terbitkan dan Anda siap melakukannya!

Menggunakan Editor Blok WordPress

Menyematkan formulir langsung dari editor blok WordPress adalah cara mudah lain untuk menambahkan salah satu formulir Anda ke postingan atau halaman.

Buka halaman tempat Anda ingin formulir muncul, dan klik ikon + biru.

Embed from block editor

Sebuah menu akan terbuka dengan berbagai opsi widget. Gulir ke bawah hingga Anda menemukan widget WPForms dan klik di atasnya. Ketika Anda melakukannya, sebuah kotak akan terbuka dan Anda dapat memilih formulir yang ingin Anda sematkan.

Widget embed options

Setelah Anda membuat pilihan, Anda akan melihat formulir yang disematkan di halaman Anda.

Menggunakan Sematan Kode Pendek

Cara sederhana lain untuk menyematkan formulir di situs web Anda adalah dengan menempelkan kode pendek, yang hanya membutuhkan waktu beberapa detik. Anda dapat menemukan kode pendek formulir Anda di 2 tempat:

Tombol sematkan

Saat Anda mengklik tombol sematkan dari editor, seperti yang kami lakukan di atas, salah satu opsi alternatif adalah menggunakan kode pendek . Jika Anda mengkliknya, kode pendek formulir Anda akan muncul dan Anda dapat menyalinnya.

Form short code embed option

Daftar formulir Anda di plugin WPForms

Dari dasbor WordPress Anda, klik plugin WPForms di bilah sisi. Ini akan menampilkan daftar formulir yang telah Anda buat dan Anda akan melihat kode pendek untuk semuanya. Ini berguna jika Anda tidak secara aktif mengerjakan formulir tetapi perlu mengambil kode pendek dengan cepat untuk menyematkannya di suatu tempat.

WPForms shortcode

Setelah Anda menyalin kode pendek, buka halaman atau pos tempat Anda ingin menyematkannya. Sekali lagi, Anda akan ingin mengklik tanda + biru di sudut kiri atas untuk mendapatkan daftar opsi dropdown.

Embed from block editor

Alih-alih memilih widget WPForms seperti yang kita lakukan sebelumnya, kita akan memilih widget Shortcode sebagai gantinya.

Embed a form with the shortcode widget

Ketika Anda mengkliknya, sebuah kotak muncul di editor posting Anda. Yang harus Anda lakukan adalah menempelkan kode pendek itu ke dalam kotak.

Embedding a form from shortcode

Jika Anda mempratinjau halaman, Anda akan melihat bahwa formulir berhasil disematkan.

Selain itu, Anda juga dapat menempelkan kode pendek langsung ke editor alih-alih melalui widget.

Shortcode pasted in editor

Dan lagi, setelah menempelkannya di tempat yang Anda inginkan untuk muncul di dalam konten, Anda dapat melihat pratinjau halaman dan melihat bahwa halaman tersebut telah disematkan.

Metode ini juga berfungsi dengan baik untuk menambahkan formulir ke footer situs web Anda dengan mudah.

Langkah 4: Publikasikan Formulir Anda

Sekarang Anda telah berhasil membuat dan menyematkan formulir Anda, saatnya untuk mempublikasikannya! Silakan dan klik tombol publish di WordPress. Saat Anda mengunjungi halaman langsung, formulir tersemat Anda siap untuk mengumpulkan informasi.

Published contact form

Secara default, pengguna akan tetap berada di halaman yang sama. Jika Anda ingin mengarahkan pengguna ke halaman lain setelah mereka mengirimkan tanggapan formulir mereka, Anda bisa.

Buat Formulir WordPress Anda Sekarang

Selanjutnya, Amankan Formulir Anda Dengan hCaptcha

Apakah Anda ingin menambahkan lapisan perlindungan spam tambahan ke formulir Anda? WPForms menyertakan integrasi hCaptcha, membuatnya mudah dilakukan. Pelajari cara mengamankan formulir WordPress Anda dengan hCaptcha.

Siap membuat formulir Anda? Mulailah hari ini dengan plugin pembuat formulir WordPress termudah. WPForms Pro menyertakan banyak templat gratis dan menawarkan jaminan uang kembali 14 hari.

Jika artikel ini membantu Anda, silakan ikuti kami di Facebook dan Twitter untuk tutorial dan panduan WordPress gratis lainnya.