Cara membuat plugin formulir kontak di wordpress

Catatan. Petunjuk dari panduan ini mengacu pada Editor Klasik. Jika Anda menggunakan editor blok WordPress, silakan lihat panduan ini

Ini bukanlah metode yang aman untuk mengumpulkan informasi pribadi, seperti nomor kartu kredit, nomor rekening bank, nama pengguna, sandi, dll. Untuk mengumpulkan pembayaran, harap gunakan PayPal atau layanan pemrosesan pembayaran serupa yang menangani transaksi keuangan dengan aman

Daftar isi

Video tutorial

Tonton video di bawah untuk ikhtisar singkat tentang cara kerjanya, dan baca di bawah untuk contoh dan setelan lainnya

Cara Menambahkan Formulir Kontak di Posting atau Halaman Anda

1. Buka Halaman atau Posting di bilah sisi kiri dasbor situs Anda
2. Pilih posting atau halaman yang ingin Anda tambahkan formulirnya, atau tambahkan yang baru
3. Di atas bilah alat, klik Tambahkan Formulir Kontak

Formulir kontak dilengkapi dengan empat bidang yang telah ditentukan sebelumnya. Nama, Email, Situs Web, dan Komentar

Anda bebas mengedit, menghapus, atau menambahkan lebih banyak bidang ke formulir Anda. Perhatikan bahwa Anda dapat memutuskan untuk membuat bidang Anda wajib atau tidak

Pilih tombol Edit di bagian atas untuk mengedit pengaturan formulir

Preferensi Notifikasi

• Secara default, ketika pengunjung mengirimkan formulir kontak Anda, itu akan dikirim melalui email ke penulis posting atau halaman menggunakan alamat email yang mereka miliki di file untuk WordPress mereka. akun com
• Baris subjek akan menjadi judul postingan jika Anda tidak menambahkan teks khusus
• Anda dapat mengubah penerima dan subjek email email Anda dari opsi di bagian atas area pengeditan formulir
• Pisahkan email penerima dengan koma untuk dikirim ke beberapa penerima
• Anda juga dapat mengubah alamat dan subjek email menggunakan kode pendek, seperti yang telah dibahas

Bidang Formulir Kontak

Setiap bidang memerlukan label dan jenis bidang. Anda dapat memilih di antara jenis bidang berikut

• Kotak centang. memungkinkan pengguna untuk mencentang kotak untuk membuat pilihan
• Drop-down. membuat dropdown pilihan
• Alamat email. memerlukan format alamat email
• Nama. bidang teks
• Tombol radio. mirip dengan jenis bidang kotak centang
• Teks. satu baris teks
• Area Teks. beberapa baris teks
• Alamat web. membutuhkan format URL

• Setelah Anda menambahkan bidang yang Anda inginkan, klik tombol Perbarui Formulir untuk menyimpan perubahan dan menambahkannya ke posting atau halaman Anda

Setelah Anda selesai menambahkan kolom dan mengatur preferensi notifikasi, pilih tombol Sisipkan untuk menambahkannya ke postingan atau halaman

Mengedit Formulir Kontak

Setelah menambahkan formulir kontak, Anda dapat menambahkan atau mengedit kolom dan mengakses tab pengaturan dengan mengeklik formulir, lalu memilih ikon pensil. Buat perubahan yang Anda inginkan, lalu pilih Perbarui

Melihat Informasi Kontak Anda Sendiri Yang Sudah Diisi Di Formulir

Jika Anda mengunjungi situs langsung Anda untuk melihat formulir kontak Anda, Anda mungkin melihat bahwa informasi kontak Anda sudah diisi sebelumnya. Hanya Anda yang melihat informasi ini karena Anda melihat situs Anda saat sedang masuk ke WordPress Anda. akun com

• Masuk ke WordPress. com pengunjung ke situs Anda akan melihat formulir kontak diisi secara otomatis dengan informasi mereka sendiri
• Pengunjung yang tidak masuk tidak akan melihat informasi apa pun yang diisi secara otomatis
• Anda dapat menguji ini dengan keluar dari WordPress. com dan melihat formulir kontak – mereka akan tampak kosong
• Fitur ini tidak berlaku untuk situs yang dihosting sendiri menggunakan Jetpack

Menambahkan Formulir Kontak dengan Kode Pendek

Anda dapat menambahkan formulir kontak dasar menggunakan kode khusus WordPress yang disebut shortcode. Anda dapat membaca lebih lanjut tentang shortcode di sini

Untuk menambahkan formulir kontak menggunakan kode pendek, salin dan tempel teks di bawah ini ke pos, halaman, atau widget teks mana pun

[contact-form]
[contact-field label="Name" type="name" required="true" /]
[contact-field label="Email" type="email" placeholder="Your Email Address" required="true" /]
[contact-field label="Website" type="url" /]
[contact-field label="Comment" type="textarea" required="true" /]
[/contact-form]

• Setiap kode pendek formulir kontak harus dimulai dengan [formulir kontak] dan diakhiri dengan [/formulir kontak]
• Di dalam kode [formulir-kontak]], setiap bidang individual digabungkan dalam tag [bidang-kontak /].
• Bidang dapat ditambahkan atau dihapus dari kode pendek secara manual. Misalnya, jika Anda ingin menghapus kotak teks situs web, Anda akan menghapus baris itu, seperti ini

[[contact-form]
[contact-field label="Name" type="name" required="true" /]
[contact-field label="Email" type="email" placeholder="Your Email Address" required="true" /]
[contact-field label="Comment" type="textarea" required="true" /]
[/contact-form]_

Atribut Bidang Kode Pendek yang Tersedia

Atribut bidang yang tersedia adalah sebagai berikut

label. Memberi bidang label deskriptif

type. Menentukan jenis bidang yang Anda tambahkan. Pilihan yang tersedia antara lain

• text_. Menampilkan kotak teks baris tunggal biasa
• textarea. Menampilkan kotak teks multi-baris
• radio_. Menampilkan opsi radio
• checkbox. Menampilkan satu kotak centang
• select_. Menampilkan drop down dengan beberapa pilihan
• email_. Menampilkan kotak teks satu baris
• [[contact-form]
[contact-field label="Name" type="name" required="true" /]
[contact-field label="Email" type="email" placeholder="Your Email Address" required="true" /]
[contact-field label="Comment" type="textarea" required="true" /]
[/contact-form]_0. Menampilkan kotak teks satu baris
• [[contact-form]
[contact-field label="Name" type="name" required="true" /]
[contact-field label="Email" type="email" placeholder="Your Email Address" required="true" /]
[contact-field label="Comment" type="textarea" required="true" /]
[/contact-form]_1. Menampilkan kotak teks satu baris

[[contact-form]
[contact-field label="Name" type="name" required="true" /]
[contact-field label="Email" type="email" placeholder="Your Email Address" required="true" /]
[contact-field label="Comment" type="textarea" required="true" /]
[/contact-form]_2. Bidang pilih dan radio memiliki opsi keempat yang disebut "opsi". Ini adalah daftar yang dipisahkan koma dari semua opsi yang tersedia dalam bidang drop-down atau radio. Contohnya adalah

[[contact-form]
[contact-field label="Name" type="name" required="true" /]
[contact-field label="Email" type="email" placeholder="Your Email Address" required="true" /]
[contact-field label="Comment" type="textarea" required="true" /]
[/contact-form]_3

Anda juga dapat mengubah preferensi pemberitahuan untuk formulir kontak tersemat dengan menambahkan parameter berikut ke tag formulir kontak pembuka

• [[contact-form]
[contact-field label="Name" type="name" required="true" /]
[contact-field label="Email" type="email" placeholder="Your Email Address" required="true" /]
[contact-field label="Comment" type="textarea" required="true" /]
[/contact-form]_4. Alamat email tujuan pengiriman pemberitahuan formulir yang dikirimkan
• [[contact-form]
[contact-field label="Name" type="name" required="true" /]
[contact-field label="Email" type="email" placeholder="Your Email Address" required="true" /]
[contact-field label="Comment" type="textarea" required="true" /]
[/contact-form]_5. Apa yang muncul di baris subjek untuk notifikasi email

Sebagai contoh

[[contact-form]
[contact-field label="Name" type="name" required="true" /]
[contact-field label="Email" type="email" placeholder="Your Email Address" required="true" /]
[contact-field label="Comment" type="textarea" required="true" /]
[/contact-form]_6

Kode ini akan mengirimkan notifikasi email dengan subjek “Form Submitted” ke alamat email [[contact-form]
[contact-field label="Name" type="name" required="true" /]
[contact-field label="Email" type="email" placeholder="Your Email Address" required="true" /]
[contact-field label="Comment" type="textarea" required="true" /]
[/contact-form]7

Mengubah Teks Tombol Kirim

[[contact-form]
[contact-field label="Name" type="name" required="true" /]
[contact-field label="Email" type="email" placeholder="Your Email Address" required="true" /]
[contact-field label="Comment" type="textarea" required="true" /]
[/contact-form]_8. Memungkinkan Anda mengubah teks tombol formulir kontak dari "Kirim" menjadi apa pun yang Anda suka. Pada contoh di bawah ini, tombol akan menampilkan “Hubungi saya. ” di dalam tombol

[[contact-form]
[contact-field label="Name" type="name" required="true" /]
[contact-field label="Email" type="email" placeholder="Your Email Address" required="true" /]
[contact-field label="Comment" type="textarea" required="true" /]
[/contact-form]_9

label0. Setel placeholder atau teks deskriptif di dalam kolom input hingga terisi. Teks ini menghilang saat Anda mulai mengetik di bidang. Tidak tersedia untuk bidang radio, pilih, dan kotak centang

label1. Jika Anda ingin bidang tersebut wajib diisi, tambahkan label2 atau label3 ke kode pendek. Jika tidak, tinggalkan ini

Apakah WordPress memiliki formulir kontak bawaan?

Bagaimana cara membuat formulir kontak khusus di WordPress tanpa plugin?

Bagaimana cara membuat formulir kontak dinamis di WordPress?

Bagaimana cara membuat formulir kontak?