Cara Menambahkan Formulir Kontak Menggunakan Plugin – P1: Gunakan Formulir Kontak 7

Formulir kontak adalah salah satu elemen terpenting jika Anda ingin memiliki situs web profesional. Bahkan tidak sulit untuk membuat dan mengatur formulir kontak jika Anda menggunakan plugin khusus. Untuk membantu Anda membuat formulir kontak dengan plugin dengan mudah dan cepat, kami telah menyusun dan menulis instruksi tentang cara menggunakan plugin formulir kontak paling populer.

Di bagian pertama dari seri "Formulir Kontak", mari kita cari tahu:

• Apa itu formulir kontak?
• Manfaat formulir kontak
• Bagaimana cara menggunakan plugin Formulir Kontak 7 untuk membuat formulir?

Apa itu Formulir Kontak dan Manfaatnya?

Apa itu Formulir Kontak?

Contact form merupakan istilah yang tidak asing lagi bagi para pemasar. Menggunakan formulir kontak, pengguna dapat mengirim email dan menghubungi Anda langsung di situs web tanpa mengetahui alamat email Anda.

Formulir kontak biasanya memiliki banyak bidang bagi pengguna untuk mengisi informasi yang diperlukan seperti email, nomor telepon, nama, konten email, ... Selain itu, biasanya ditempatkan di halaman Kontak atau area di mana Anda perlu mendapatkan informasi kontak pelanggan . Berikut ini contohnya:

Manfaat Formulir Kontak

Karena pengguna dapat menggunakan formulir kontak untuk mengirim informasi ke pemilik situs (untuk meninggalkan informasi kontak mereka, untuk mengirim permintaan dukungan atau permintaan lainnya, ...) langsung di situs web itu, itu membuat kontak jauh lebih nyaman dan cepat.

Selain itu, menggunakan formulir kontak dapat menjaga kerahasiaan email Anda serta mengurangi spam dan ancaman keamanan. Oleh karena itu, Anda tidak perlu berurusan dengan kotak surat yang penuh dengan spam dan sampah setiap hari.

Selain itu, formulir kontak membantu Anda mengumpulkan informasi pengguna dengan lebih mudah karena mereka harus mengisi informasi yang Anda minta di formulir. Ini adalah salah satu strategi untuk mendapatkan lebih banyak lead.

Secara umum, untuk membangun situs web profesional dan mendapatkan lebih banyak manfaat untuk bisnis Anda, Anda harus menggunakan formulir kontak.

Cara Membuat Formulir Kontak

Anda dapat membuat kode untuk membuat bidang dan formulir sesuka Anda. Namun, jika Anda bukan pembuat kode maka ini tidak mungkin. Atau Anda harus membayar sejumlah uang untuk menyewa seorang pembuat kode untuk melakukan ini.

Oleh karena itu, solusi paling berguna untuk membuat formulir kontak untuk pengguna non-teknologi, atau bahkan pengembang (untuk menghemat waktu dan tenaga) adalah menggunakan plugin. Saat ini sudah banyak sekali plugin contact form yang sederhana, mudah, cepat, dan gratis. Jadi, tidak ada alasan untuk tidak menggunakannya untuk membuat formulir kontak, bukan?

Dalam semua artikel seri ini, saya akan menunjukkan cara membuat formulir pendaftaran universitas sebagai berikut:

Buat Formulir Menggunakan Formulir Kontak 7

Dalam artikel pertama dari seri “Buat Formulir Kontak Menggunakan Plugin” ini, saya menggunakan Formulir Kontak 7 – salah satu plugin formulir kontak gratis paling populer yang tersedia saat ini.

Pertama-tama, unduh dan instal plugin ini dari repositori plugin di wordpress.org, atau buka Dashboard > Plugin > Add New untuk menginstal dan mengaktifkannya.

Formulir Kontak 7

Pengarang: Takayuki Miyoshi

Versi Saat Ini: 5.5.3

Terakhir Diperbarui: 28 November 2021

formulir kontak-7.5.5.3.zip

82% Peringkat 5.000.000+ Menginstal WP 5.7+ Membutuhkan

Berikut adalah instruksi khusus untuk membuat formulir pendaftaran universitas di atas dengan plugin ini.

Antarmuka

Buka Dasbor > Kontak > Tambah Baru untuk membuat formulir kontak baru. Berikut adalah antarmuka yang akan Anda gunakan:

(1): Masukkan nama formulir kontak
(2): Tab untuk membuat dan menyiapkan formulir kontak, termasuk:

• Tab formulir : buat bidang untuk formulir kontak
• Tab email : atur email yang Anda terima dari formulir kontak
• Tab pesan : menyertakan pemberitahuan yang diterima pengguna ketika ada kesalahan dalam memasukkan data, formulir tidak dapat dikirim, formulir berhasil dikirim, …
• Tab Pengaturan Tambahan : menambahkan elemen lain ke formulir kontak.

Buat Bidang untuk Formulir Kontak

Seperti yang saya sebutkan, formulir kontak berisi bidang yang memungkinkan pengguna memasukkan informasi atau berinteraksi dengannya. Berikut adalah tab Formulir yang digunakan untuk membuat bidang-bidang ini:

(1) terdiri dari bidang untuk ditambahkan ke formulir seperti nama, email, nomor, tombol kirim, ... Untuk menambahkan bidang apa pun, cukup klik nama bidang yang sesuai.

(2) adalah area untuk menampilkan struktur formulir dalam format HTML. Saat membuat formulir kontak baru, Anda akan memiliki struktur default untuk formulir dasar dengan bidang sederhana seperti email, nama, subjek, dan tombol kirim. Anda dapat langsung menggunakan formulir ini atau membuat formulir baru berdasarkan formulir tersebut.

Instruksi Umum untuk Bidang

Setelah memilih bidang yang diinginkan, sembulan tempat Anda memasukkan informasi yang diperlukan di bidang akan muncul. Setiap bidang memerlukan informasi yang berbeda, tetapi secara umum, semuanya memiliki bagian berikut:

Nama : atribut nama
Nilai default : nilai default bidang
Atribut id : ID bidang
Atribut kelas : kelas bidang

Catatan : atribut ID dan atribut Kelas adalah opsional dan Anda dapat memasukkan informasi khusus Anda di sana. Jika Anda ingin langkah-langkah menata formulir kontak berikut lebih mudah, Anda harus mengisi 2 bagian ini.

Setelah mengisi informasi ini, Anda akan melihat Tag bidang yang telah Anda buat di bagian bawah kotak ini. Klik Sisipkan Tag untuk menyisipkan bidang ini ke dalam HTML formulir.

Biasanya, tag setiap bidang dalam formulir kontak yang dibuat dengan Formulir Kontak 7 akan memiliki struktur berikut:

 [field* name_attribute id:field_id class:field_class "nilai default bidang"]

Penjelasan:

• field * adalah jenis bidang yang Anda pilih. Ini adalah bagian yang paling penting dan harus dimiliki dari sebuah bidang.
• * berarti kolom ini wajib diisi. Jika Anda tidak ingin memaksa pengguna untuk memasukkannya, hapus * .

Untuk memahami lebih lanjut tentang struktur tag bidang di Formulir Kontak 7, lihat dokumentasi ini. Memahami arti dan struktur HTML dari formulir kontak akan memudahkan Anda untuk mengedit, membuat, dan menambahkan bidang baru menggunakan kode. Apalagi dengan coders, mereka bisa menulis kode HTML untuk membuat form sesuai dengan sintaks di atas. Namun, dengan non-coder, mungkin sulit, jadi saya sarankan mengikuti langkah-langkah di bawah ini.

Dengan formulir kontak dalam seri ini, saya harus memilih bidang berikut:

Semua bidang memiliki informasi umum yang saya katakan di atas. Oleh karena itu, saya hanya memandu bagian-bagian tertentu dari setiap bidang sekarang.

Di bawah ini adalah petunjuk rinci untuk setiap bidang.

Buat Bidang untuk Memasukkan Nama

Pilih bidang teks dan masukkan informasi dasar bidang ke dalam kotak:

Pada bagian Jenis bidang , Anda dapat memilih mengharuskan sehingga bidang ini wajib diisi (ini opsional).

Catatan : Di bagian Nilai default , pilih Gunakan teks ini sebagai tempat penampung bidang untuk menampilkan konten ini di bidang sebelum pengguna memasukkan data. Anda harus menggunakan mode ini untuk menjelaskan kepada pengguna apa yang mereka butuhkan untuk mengisi kolom.

Bagian Akismet terkait dengan plugin Akismet – plugin anti-spam. Jika Anda tidak memiliki plugin ini, maka jangan pedulikan bagian ini.

Buat Bidang Untuk Memasukkan Nomor Telepon

Pilih bidang nomor dan isi informasi dasar untuk bidang tersebut.

Di bagian Jenis bidang , pilih jenis untuk bidang ini. Ada dua jenis bidang: Spinbox dan Slider .

Slider akan menampilkan skala untuk memilih nomor sebagai berikut:

Gaya ini cocok untuk mencetak atau memilih angka berdasarkan skala tertentu.

Sementara itu, Spinbox memungkinkan Anda untuk memasukkan nomor apa saja, urutan nomor di bidang seperti nomor telepon, nomor kartu, nomor KTP, ... Jadi dalam contoh ini saya memilih Spinbox.

Bagian Rentang memungkinkan Anda memilih batas untuk nomor tersebut. Dalam contoh ini, saya tidak membutuhkan bagian ini jadi saya tidak mengisi apa pun.

Buat Bidang untuk Memilih Jurusan dan Lokasi Belajar

Dengan bidang ini, pilih menu tarik-turun .

Sekarang isikan pilihan jurusan dan lokasi pada bagian Pilihan , perlu diingat bahwa setiap pilihan adalah garis.

Jika Anda ingin mengizinkan pengguna memilih beberapa opsi sekaligus, klik Izinkan beberapa pilihan .

Buat Bidang untuk Memilih Tujuan Pendaftaran

Pilih bidang kotak centang .

Bagian Opsi ini mirip dengan yang ada di lapangan menu drop-down di atas. Selain itu, ada lebih banyak opsi untuk kotak centang sebagai berikut:

• Letakkan label terlebih dahulu, kotak centang terakhir
• Bungkus setiap item dengan elemen label
• Jadikan kotak centang eksklusif (Anda hanya diperbolehkan memilih 1 opsi).

Buat Tombol Mengirim

Terakhir, pilih kolom submit dan isikan saja informasi sebagai persyaratan berikut (perhatikan bahwa Label adalah kata yang akan muncul pada tombol ini, misalnya “Kirim”, “Daftar”, “Konfirmasi”).

Khususnya, saat membuat formulir baru, plugin ini telah secara otomatis membuat bidang yang dikirimkan. Oleh karena itu, Anda dapat menggunakan bidang ini tanpa membuat yang baru.

Tambahkan Label untuk Bidang

Sekarang Anda telah selesai membuat bidang untuk formulir kontak. Namun, bidang Anda belum memiliki nama untuk ditampilkan pada formulir kontak sebagai berikut:

Oleh karena itu, Anda perlu menambahkan label ke bidang dengan menyisipkan struktur kode berikut di bagian HTML formulir:

 <label> Label Bidang
[Tag bidang] </label>

Selanjutnya, tuliskan label bidang di bagian Label Bidang . Kemudian isi semua informasi di atas, klik Simpan .

Setelah membuat bidang, formulir kontak saya memiliki struktur kode berikut, perhatikan bahwa saya telah mengatur bidang untuk menampilkannya di posisi yang diinginkan di ujung depan:

 <label> Nama Anda (wajib)
[teks* nama-anda "masukkan nama Anda"] </label> 

<label> Nomor Telepon Anda
[number phone placeholder "masukkan nomor telepon Anda"] </label> <label> Email Anda (wajib)
[email* email-anda "masukkan email Anda"] </label>

<label> Jurusan
[pilih* jurusan "Ilmu komputer" "Linguistik" "Pertanian" "Teknik" "eCommerce"] </label>
<label> Lokasi belajar 
[pilih* Lokasi-untuk-belajar "New York" "Chicago" "Los Angeles" "Washington DC" "Houston" "Philadelphia"] </label>

</label> Daftar ke
[kotak centang* daftarkan label_first "Belajar" "Ikuti tur" "Konsultasikan"] </label>

[kirim "Kirim"]

Kali ini, formulir kontak Anda masih belum muncul di situs web. Anda perlu melakukan beberapa langkah lagi untuk menampilkannya di ujung depan.

Pengaturan Formulir Kontak

Siapkan Email

Tab Mail memungkinkan Anda untuk menyesuaikan konten email yang akan Anda terima saat formulir kontak dikirim oleh pengguna. Untuk menyiapkan bagian ini, Anda perlu menyisipkan tag email dari bidang dalam formulir kontak yang baru saja Anda buat. Berikut ini contohnya:

Penjelasan:

• Kepada : Masukkan email penanggung jawab pengecekan form kontak.
• Dari dan Subjek : Anda harus menetapkan nama di sini untuk menentukan siapa yang mengirim formulir kontak ini.
• Badan Pesan : tambahkan tag surat di sini untuk memastikan bahwa ketika Anda menerima email dari formulir kontak, itu akan menampilkan semua informasi yang Anda minta dari pengguna.

Pengaturan lainnya

tab pesan

Masukkan pesan yang digunakan dalam situasi seperti yang Anda lihat di deskripsi tab. Misalnya, setelah pengguna berhasil mengirimkan formulir atau gagal mengirimkannya, Anda harus menambahkan pesan untuk memberi tahu mereka tentang hal ini. Atau ketika pengguna lupa bidang yang wajib diisi, Anda juga harus menambahkan pesan agar pengguna dapat kembali mengisi bidang tersebut. Meskipun ini adalah detail kecil, Anda harus memperhatikan untuk meningkatkan pengalaman pengguna.

Tab Pengaturan Tambahan

Tab ini membantu Anda menambahkan cuplikan kode untuk menginstal yang berikut:

• Mode khusus pelanggan
• Mode demo
• Melewatkan surat
• Penerimaan sebagai validasi
• Pengaturan Flamingo
• Menekan penyimpanan pesan
• kode JavaScript

Ada beberapa bagian yang cukup berguna yang harus Anda gunakan seperti:

• Mode khusus pelanggan : Mode ini hanya mengizinkan pengguna yang masuk dari situs web Anda untuk mengirimkan formulir kontak. Ini menghilangkan pesan spam dan hanya untuk mereka yang benar-benar ingin menghubungi Anda.
• Penerimaan sebagai validasi : tambahkan fitur untuk menampilkan pemberitahuan untuk kotak centang Penerimaan ketika pengguna tidak mencentang kotak ini tetapi pindah ke bidang lain. Karena secara default, jika pengguna tidak mencentang kotak Acceptance, pesan kesalahan hanya akan ditampilkan setelah mereka mengirimkan formulir. Kotak centang Penerimaan ini sering digunakan untuk membuat bidang seperti "Saya setuju dengan persyaratan situs web" tetapi jika Anda membuat jenis konten lain, Anda mungkin perlu menambahkan Penerimaan sebagai validasi .

Untuk mempelajari lebih lanjut tentang fitur lain di tab Pengaturan Tambahan , Anda dapat membaca lebih lanjut di sini.

Tampilkan Formulir Kontak di Situs Web

Langkah terakhir adalah menampilkan formulir kontak yang baru saja Anda buat di situs web.

Masih di antarmuka untuk membuat formulir baru, salin kode pendek dan tempel di halaman atau posting yang diinginkan.

Berikut adalah hasil akhir saya:

Namun, formulir kontak saya tidak terlihat bagus, jadi saya perlu sedikit menatanya.

Jika Anda ingin menata ulang formulir kontak seperti template yang saya berikan di awal artikel ini, Anda perlu mengedit HTML formulir sebagai berikut untuk memudahkan gaya:

 <div class="form__field form__full-width">
<label>Nama Anda (wajib)
[teks* tempat penampung nama-Anda "masukkan nama Anda"]
</label>
</div>
<div class="form__field">
<label>Nomor Telepon Anda
[placeholder nomor telepon "masukkan nomor telepon Anda"]
</label>
</div>
<div class="form__field">
<label>Email Anda (wajib)
[email* placeholder email Anda "masukkan email Anda"]
</label>
</div>
<div class="form__field">
<label>Mayor
[pilih* jurusan "Ilmu komputer" "Linguistik" "Pertanian" "Teknik" "eCommerce"]
</label>
</div>
<div class="form__field">
<label>Lokasi belajar
[pilih* Lokasi-untuk-belajar "New York" "Chicago" "Los Angeles" "Washington DC" "Houston" "Philadelphia"]
</label>
</div>
<div class="form__field form__full-width">
<label>Daftar ke
[kotak centang* daftarkan use_label_element "Belajar" "Ikuti tur" "Konsultasikan"]
</label>
</div>
<div class="form__field form__full-width">
[kirim "Kirim"]</div>

Lalu pergi ke Customizer tema Anda> CSS tambahan dan rekatkan kode berikut:

 #wpcf7-f330-p104-o1 .wpcf7-form { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 20px; background: #eeeeee; } .form__field { width: 50%; padding: 0 15px; margin-bottom: 20px; } .form__field.form__full-width { width: 100%; } .form__field input:focus::placeholder { opacity: 0; } .form__field input, .form__field select { width: 100%; color: #77818e; font-style: italic; } .form__field input::placeholder, .form__field select::placeholder { color: #77818e; } .form__field input[type="submit"] { color: #4299e1; width: auto; background: #fff; border: 1px solid #4299e1; } .form__field span.wpcf7-list-item { margin: 10px 20px 0 0; display: block; } .form__field span.wpcf7-list-item input { width: auto; } .wpcf7-checkbox { display: flex; justify-content: space-between; }

Terakhir, klik Publish untuk menyimpan.

Kata-kata terakhir

Saat pertama kali menggunakan Formulir Kontak 7, Anda mungkin merasa asing dengan HTML jika Anda bukan seorang pembuat kode. Namun, setelah membaca tutorial ini, saya rasa semuanya menjadi lebih mudah bukan?

Jika Anda ingin mencoba membuat formulir kontak dengan beberapa alat lain, nantikan artikel saya yang akan datang dari seri ini. Plugin mana yang ingin Anda sarankan? Tinggalkan komentar di bawah artikel ini!