Hubungi pengkodean formulir untuk wordpress

Question

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

Table of Contents Show

Apa yang ada di dalam?
Buat lingkungan WordPress
Buat tema anak untuk tema aktif
Kirim permintaan AJAX menggunakan kait wp_ajax
Bagaimana cara membuat formulir kontak di WordPress tanpa plugin?
Apakah ada formulir kontak gratis untuk WordPress?
Bagaimana cara membuat formulir kontak dalam HTML?
Bagaimana cara membuat formulir kontak responsif di 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

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

Bagaimana cara membuat formulir kontak di WordPress tanpa plugin?

Buat Formulir Kontak di WordPress Tanpa Plugin .

Tambahkan formulir kontak HTML. .

Sanitasi data formulir kontak. .

Validasi data formulir kontak. .

Menampilkan pesan validasi. .

Kirim email ke administrator WordPress. .

Bungkus kode dalam panggilan balik kode pendek. .

Tambahkan file JavaScript khusus. .

Validasi formulir kontak

Apakah ada formulir kontak gratis untuk WordPress?

Contact Form 7 adalah salah satu plugin formulir kontak WordPress gratis paling populer di pasaran . Ini adalah plugin yang sangat sederhana, tetapi tidak memiliki antarmuka pembuat formulir visual. Untuk membuat formulir, Anda harus mempelajari sintaks kode khusus di Formulir Kontak 7.