Formulir kontak adalah komponen penting dari situs web apa pun. Ini bertindak sebagai jembatan antara penyedia dan pelanggan. Membuat formulir kontak untuk platform WordPress adalah pekerjaan mudah. Anda hanya perlu melalui beberapa langkah yang harus diikuti untuk meluncurkan formulir kontak yang berhasil untuk situs WordPress
Kami telah melihat terlalu banyak jenis contoh formulir kontak di inti PHP. Tidak masalah platform, kerangka kerja atau CMS, tetapi konsepnya sama untuk menulis alur proses
Jadi, jika Anda sudah familiar dengan formulir kontak tentang cara kerjanya, maka mudah untuk memahami versi WordPress-nya
Saya telah membuat template khusus WordPress untuk UI formulir kontak ini. Kemudian, saya memetakan template untuk halaman kontak yang dibuat menggunakan panel admin
Apa yang ada di dalam?
Buat lingkungan WordPress
Siapkan lingkungan WordPress untuk membuat formulir kontak di dalamnya. Prasyarat pengaturan WordPress adalah,
- PHP 7. 4 dan di atas
- MySQL5. 6 ke atas atau MariaDB 10. 1 dan di atas
- Apache atau Ngink (mod_rewrite diaktifkan)
- Dukungan HTTPS
Pada artikel sebelumnya, kita telah melihat cara menginstal WordPress. Artikel tertaut memiliki langkah-langkah untuk menginstal WordPress ke server Anda
Anda dapat menemukan detail lebih lanjut tentang menyiapkan lingkungan WordPress dari dokumentasi resmi
Jika Anda baru mengenal WordPress, Anda harus mulai dengan panduan pemula untuk mempelajari cara membuat situs web WordPress
Setelah instalasi, itu akan memungkinkan masuk ke panel admin WordPress
Di menu sebelah kiri Pages->Add New navigasi untuk membuat halaman kontak baru. Itu akan meminta judul halaman dan konten
Ada berbagai cara untuk menampilkan konten halaman kontak
- HTML kontak dapat langsung ditambahkan ke halaman buat baru dan antarmuka admin
- Menampilkan tata letak kontak dengan file template WordPress
- Mendaftarkan shortcode untuk merender tata letak halaman kontak di frontend
Dalam kode contoh ini, saya menggunakan file template WordPress untuk memuat tata letak kontak
Buat tema anak untuk tema aktif
Saya telah membuat tema anak WordPress untuk menyesuaikan tema yang saat ini diaktifkan
Kita juga bisa membuat widget dengan formulir kontak dan merendernya ke tata letak tema
Tangkapan layar di bawah menunjukkan struktur file tema dengan tema anak. Tema anak memiliki file template WordPress contact-template. php. File ini memiliki HTML kontak dengan skrip AJAX sisi klien
Fungsi. File php mengaitkan wp_ajax untuk memproses formulir kontak saat dikirim
Ini adalah file templat WordPress yang dibuat untuk contoh formulir kontak ini
Itu memuat judul halaman dan konten halaman yang dibuat di panel admin WordPress untuk ditampilkan di halaman kontak
Selain itu, ia memiliki formulir kontak HTML. Formulir berisi nama bidang dasar, email, dan lainnya. Semua kolom bersifat wajib dan divalidasi melalui JavaScript
Skrip validasi ada di file template. Kita juga dapat mengantrekan aset JavaScript dengan menggunakan fungsi inti WordPress wp_enqueue_script()
contact-template. php
', '
'); ?>
Name:
Email:
Subject:
Message:
File di atas memiliki nama template kontak di awal. Ini membantu untuk menampilkan daftar dropdown Template di admin
Pilih opsi EDIT CEPAT dari halaman kontak dari Pages->All Pages. Tangkapan layar di bawah ini menampilkan opsi untuk memilih templat kontak untuk halaman tersebut
Di layar edit halaman kontak, itu menunjukkan nama template tema anak dalam dropdown
Kirim permintaan AJAX menggunakan kait wp_ajax
Kode JavaScript ini memiliki dua fungsi. formValidation() adalah untuk memvalidasi formulir kontak dan processContactSubmit() adalah untuk memanggil wp_ajax untuk memproses formulir kontak di WordPress
Permintaan AJAX meneruskan data formulir yang divalidasi ke sisi server. Itu memanggil admin_ajax. php dengan parameter action untuk mengaitkan wp_ajax
skrip AJAX
_fungsi. php
Dalam fungsi. php, itu mengaitkan tindakan wp_ajax process_contact_form() saat meminta melalui AJAX
Itu menerima data formulir untuk mengatur subjek email kontak dan konten badan utama
Itu juga mengatur header email dan alamat email penerima untuk melewati fungsi pengiriman email
Kode ini menggunakan wp_mail untuk mengirim email kontak menggunakan WordPress. Ada plugin WordPress untuk mengaktifkan SMTP untuk mengirim email
Problem in sending mail."; } else { echo "Hi, thank you for the message."; } wp_die(); }Keluaran formulir kontak menampilkan tata letak formulir kontak yang dibuat dengan file template WordPress
Tangkapan layar di bawah ini menampilkan respons sisi klien dan sisi server saat mengirimkan data formulir
Setelah menjalankan tindakan pengiriman email wp_ajax, ia mengembalikan respons boolean untuk memeriksa apakah email terkirim atau tidak
Berdasarkan data pengembalian fungsi wp_mail, titik akhir AJAX menyiapkan tanggapan. Angka menunjukkan respons sukses atau gagal dari contoh formulir kontak WordPress ini
Kesimpulan
Jadi, kami telah belajar cara membuat formulir kontak di WordPress. Saya harap, ini akan membantu Anda meniru hal yang sama di situs web WordPress
Kami telah melihat berbagai cara untuk merender formulir kontak atau tata letak apa pun di sisi pengguna. Langkah-langkah untuk membuat templat kontak khusus dapat membantu membuat templat yang berbeda dan membuat penyesuaian
Kode dengan kait tindakan wp_ajax menentukan bagian untuk memproses data formulir kontak dan pengiriman surat
Dengan ide dasar ini, Anda dapat menyiapkan penawaran, pertanyaan proyek, atau template UI berbasis formulir apa pun di WordPress