Dalam artikel ini, saya akan menyediakan senarai beberapa plugin borang hubungan WordPress percuma. Saya juga akan membincangkan mengapa anda harus mempertimbangkan untuk melancarkan borang hubungan anda sendiri. Kemudian, saya akan memberikan anda tutorial pendek yang menunjukkan kepada anda bagaimana untuk membina plugin borang hubungan WordPress anda sendiri.

plugin borang hubungan WordPress

Sebelum kita memulakan, kita akan pergi ke beberapa plugin borang hubungan percuma yang popular yang terdapat di direktori plugin WordPress. Ini bagus untuk digunakan, tetapi lebih baik untuk belajar dari ketika anda mula membina plugin anda sendiri.

di bawah adalah beberapa plugin borang hubungan percuma yang paling tinggi untuk WordPress:

Borang hubungan 7 - Ini adalah plugin kedua yang paling popular dengan lebih daripada 18 juta muat turun, ia hampir boleh dianggap sebagai plugin borang hubungan de facto untuk laman web WordPress. Borang Hubungi 7 boleh menguruskan pelbagai borang hubungan dan anda boleh menyesuaikan borang dan kandungan e -mel dengan markup mudah. Ciri-ciri bentuk termasuk penyerahan berkuasa Ajax, Captcha, penapisan spam Akismet dan banyak lagi.

80% masa tindak balas pengguna akhir dibelanjakan di hadapan. Kebanyakan masa ini terikat dalam memuat turun semua komponen di halaman: imej, stylesheets, skrip, flash, dan lain -lain. Mengurangkan bilangan komponen seterusnya mengurangkan bilangan permintaan HTTP yang diperlukan untuk menjadikan halaman tersebut. Ini adalah kunci untuk halaman yang lebih cepat.

<span><span><?php
</span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span>

<span>function html_form_code() {
</span>    <span>echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Name (required) <br />';
</span>    <span>echo '<input type="text" name="cf-name" pattern="[a-zA-Z0-9 ]+" value="' . ( isset( $_POST["cf-name"] ) ? esc_attr( $_POST["cf-name"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Email (required) <br />';
</span>    <span>echo '<input type="email" name="cf-email" value="' . ( isset( $_POST["cf-email"] ) ? esc_attr( $_POST["cf-email"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Subject (required) <br />';
</span>    <span>echo '<input type="text" name="cf-subject" pattern="[a-zA-Z ]+" value="' . ( isset( $_POST["cf-subject"] ) ? esc_attr( $_POST["cf-subject"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Message (required) <br />';
</span>    <span>echo '<textarea rows="10" cols="35" name="cf-message">' . ( isset( $_POST["cf-message"] ) ? esc_attr( $_POST["cf-message"] ) : '' ) . '</textarea>';
</span>    <span>echo '</p>';
</span>    <span>echo '<p><input type="submit" name="cf-submitted" value="Send"/></p>';
</span>    <span>echo '</form>';
</span><span>}</span>

regex dalam borang hubungan Adakah pengesahan medan berikut:

• [a-z0-9]: Hanya huruf, ruang dan nombor yang dibenarkan dalam medan nama; Simbol khas dianggap tidak sah.

• [a-za-z]: Hanya huruf dan ruang yang dibenarkan dalam bidang subjek.

• Kawalan borang e -mel mengesahkan medan e -mel oleh itu tidak ada keperluan untuk atribut corak.

Untuk maklumat lanjut tentang bagaimana ini berfungsi, baca artikel saya mengenai pengesahan borang klien dengan HTML5 untuk memahami bagaimana atribut corak membantu dengan pengesahan bentuk.

<span><span><?php
</span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span>

• sanitize_text_field (): membersihkan data dari input pengguna.

• sanitize_email (): Strip keluar semua aksara yang tidak dibenarkan dalam e -mel.

• esc_textarea (): melarikan diri

  mesej nilai kawasan teks.

terima kasih kerana menghubungi saya, mengharapkan respons tidak lama lagi akan ditunjukkan, jika tidak ralat yang tidak dijangka berlaku dipaparkan.

<span>function html_form_code() {
</span>    <span>echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Name (required) <br />';
</span>    <span>echo '<input type="text" name="cf-name" pattern="[a-zA-Z0-9 ]+" value="' . ( isset( $_POST["cf-name"] ) ? esc_attr( $_POST["cf-name"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Email (required) <br />';
</span>    <span>echo '<input type="email" name="cf-email" value="' . ( isset( $_POST["cf-email"] ) ? esc_attr( $_POST["cf-email"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Subject (required) <br />';
</span>    <span>echo '<input type="text" name="cf-subject" pattern="[a-zA-Z ]+" value="' . ( isset( $_POST["cf-subject"] ) ? esc_attr( $_POST["cf-subject"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Message (required) <br />';
</span>    <span>echo '<textarea rows="10" cols="35" name="cf-message">' . ( isset( $_POST["cf-message"] ) ? esc_attr( $_POST["cf-message"] ) : '' ) . '</textarea>';
</span>    <span>echo '</p>';
</span>    <span>echo '<p><input type="submit" name="cf-submitted" value="Send"/></p>';
</span>    <span>echo '</form>';
</span><span>}</span>

<span>function deliver_mail() {
</span>
    <span>// if the submit button is clicked, send the email
</span>    <span>if ( isset( $_POST['cf-submitted'] ) ) {
</span>
        <span>// sanitize form values
</span>        <span>$name    = sanitize_text_field( $_POST["cf-name"] );
</span>        <span>$email   = sanitize_email( $_POST["cf-email"] );
</span>        <span>$subject = sanitize_text_field( $_POST["cf-subject"] );
</span>        <span>$message = esc_textarea( $_POST["cf-message"] );
</span>
        <span>// get the blog administrator's email address
</span>        <span>$to = get_option( 'admin_email' );
</span>
        <span>$headers = "From: <span><span>$name</span> <<span>$email</span>>"</span> . "\r\n";
</span>
        <span>// If email has been process for sending, display a success message
</span>        <span>if ( wp_mail( $to, $subject, $message, $headers ) ) {
</span>            <span>echo '<div>';
</span>            <span>echo '<p>Thanks for contacting me, expect a response soon.</p>';
</span>            <span>echo '</div>';
</span>        <span>} else {
</span>            <span>echo 'An unexpected error occurred';
</span>        <span>}
</span>    <span>}
</span><span>}</span>

Kesimpulan

Untuk lebih memahami bagaimana plugin dibina dan bagaimana untuk melaksanakannya di laman WordPress anda, salin kod di bawah, tampal dalam fail dan muat naiknya ke kandungan/plugin/plugin/wp anda.

<span><span><?php
</span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span>

Plugin Pentadbiran WordPress Mudah (Tutorial)
plugin widget WordPress (tutorial)
dokumentasi pemaju plugin WordPress Codex rasmi
saluran php sitepoint

Bagaimana saya boleh gaya borang hubungan WordPress saya untuk menyesuaikan reka bentuk laman web saya? Anda boleh menambah kelas tersuai ke elemen borang anda dan menentukan gaya dalam fail CSS tema anda atau plugin CSS tersuai. Ini membolehkan anda mengawal warna, fon, susun atur, dan banyak lagi. Dikendalikan dalam pelbagai cara bergantung kepada keperluan anda. Anda boleh menghantar data ke alamat e-mel, menyimpannya dalam pangkalan data WordPress anda, atau mengintegrasikan dengan perkhidmatan pihak ketiga seperti sistem CRM atau platform pemasaran e-mel. Ini memerlukan pengekodan php tambahan untuk memproses penyerahan borang.

Bolehkah saya membuat borang hubungan WordPress Multi-Step? pengekodan. Ini melibatkan mewujudkan pelbagai halaman bentuk dan menguruskan data antara langkah -langkah menggunakan sesi atau medan tersembunyi. Borang pelbagai langkah dapat meningkatkan pengalaman pengguna dengan memecahkan borang panjang ke bahagian yang boleh diurus. Mengintegrasikan dengan perkhidmatan CAPTCHA seperti Google Recaptcha. Ini memerlukan mendapatkan kunci API dari perkhidmatan dan menambah kod HTML dan PHP yang diperlukan ke borang anda. Captcha membantu melindungi borang anda dari spam dan penyerahan automatik.

Bolehkah saya membuat borang hubungan WordPress yang responsif? Baik dan berfungsi dengan baik pada semua saiz peranti. Ini termasuk menetapkan lebar, margin, dan padding yang sesuai untuk elemen bentuk dan menggunakan pertanyaan media untuk menyesuaikan gaya untuk saiz skrin yang berbeza. Dengan borang hubungan WordPress anda melibatkan mengenal pasti masalah, memeriksa kod anda untuk kesilapan, dan menguji borang di bawah keadaan yang berbeza. Isu -isu biasa termasuk borang yang tidak menghantar e -mel, bentuk yang tidak memaparkan dengan betul, atau membentuk penyerahan yang tidak disimpan. Jika anda tidak dapat menyelesaikan masalah ini, pertimbangkan untuk mendapatkan bantuan daripada komuniti WordPress atau pemaju profesional.