Terakhir diedit oleh Vinci pada 26 Mei 2022.
Membuat formulir kontak WordPress tanpa plugin itu mudah. Dalam dua artikel terakhir, kami melihat cara membuat formulir kontak WooCommerce menggunakan plugin.
Plugin adalah tempat yang bagus untuk menambahkan fitur ke situs WordPress Anda. Dan mereka memiliki referensi universal yang mengaktifkan / menonaktifkan plugin dengan instruksi yang dapat disesuaikan.
Kami telah melihat plugin yang tersedia untuk membuat formulir kontak WordPress. Juga, kami belajar cara membuat plugin khusus untuk mencapainya.
Meskipun plugin WordPress adalah solusi sistematis, pemula mungkin lebih memilih jalan keluar yang mudah. Ketika saya masih pemula, sulit bagi saya untuk memahami plugin WordPress pada awalnya.
Artikel ini untuk menampilkan formulir kontak WordPress tanpa plugin di halaman produk. Menggunakan file function.php dari template WordPress yang aktif.
Langkah-langkah untuk membuat formulir kontak WordPress tanpa plugin
Membuat formulir kontak WordPress tanpa plugin itu mudah hanya dengan 3 langkah. Langkah-langkah ini menunjukkan formulir kontak di toko WordPress dan mengaktifkan pengiriman email. Kesederhanaan dan kode kurang dari keuntungan utama dari contoh ini.
- Buat tema anak untuk tema WordPress aktif. Kemudian, batalkan salinan aset subjek utama.
- Letakkan formulir kontak HTML, CSS, dan JavaScript di templat anak.
- Kaitkan kait tindakan / filter WordPress dari functions.php. Ini untuk mengaktifkan formulir kontak WordPress tanpa plugin.
Langkah 1: Buat tema anak WordPress untuk memiliki file formulir kontak
function.php adalah tempat yang baik untuk memulai tindakan WordPress tanpa plugin. Dalam contoh ini, dua operasi panggilan WordPress utama dimulai melalui file ini.
- Dengan memuat template dan aset, render formulir.
- Kirim surat sambil mendengarkan permintaan WordPress AJAX.
File functions.php terletak di direktori tema WordPress. Memiliki tema anak alih-alih mengubah file tema utama adalah praktik yang baik.
Langkah 1 menunjukkan struktur file direktori tema anak. Ini termasuk formulir kontak HTML dengan daftar “Templat”. Ini juga termasuk file functions.php dan style.css yang dikloning.
style.css memiliki gaya formulir kontak WordPress dengan header halaman gaya standar. Dan header CSS menyertakan yang berikut ini.
- Sebuah “nama tema”.
- Referensi topik utama dengan informasi “templat”.
- Templat URI dan sebagainya
/*
Theme Name: Twenty Twenty-Two Child
Theme URI: https://phppot.com/twentytwentytwo-child/
Description: Twenty Twenty-Two Child Theme
Author: Vincy
Author URI: https://phppot.com
Template: twentytwentytwo
Version: 1.0.0
Tags: contact-form, enquiry-form, product-enquiry
Text Domain: twentytwentytwo-child
*/
#woocommerce-contact-form {
width: 500px;
border: #CCC 1px solid;
padding: 25px 5px 25px 25px;
border-radius: 3px;
}
#woocommerce-contact-form input {
border: #CCC 1px solid;
width: 50%;
padding: 10px;
margin: 15px 20px 15px 0px;
border-radius: 3px;
}
#woocommerce-contact-form textarea {
border: #CCC 1px solid;
width: 96%;
border-radius: 3px;
box-sizing: border-box;
padding: 10px;
margin: 15px 20px 15px 0px;
}
.display-flex {
display: flex;
}
#woocommerce-contact-form input.btn-send {
color: #FFF;
background: #232323;
border-radius: 3px;
border: #000 1px solid;
}
#response {
display: none;
}
Langkah 2: Buat template HTML dari formulir kontak WordPress dengan aset JavaScript
Bagian ini menunjukkan konten file templat formulir kontak WordPress. Ini termasuk bidang Nama, Email, dan Pesan untuk dikumpulkan dari pelanggan.
Ini menyediakan formulir minimal dan kompatibel dengan menambahkan WooCommerce untuk menambahkan lebih banyak bidang.
<h3>Product enquiry</h3>
<div id="woocommerce-contact-form">
<form method="post" id="frmContactForm" action="">
<div class="display-flex">
<input name="customer_name" id="customer_name" placeholder="Name" /><input
name="customer_email" id="customer_email" placeholder="Email" />
</div>
<div>
<textarea name="customer_message" id="customer_message"
placeholder="Enquire seller about order, product.."></textarea>
</div>
<div>
<input type="submit" name="send_mail" class="btn-send" value="Send Enquiry" />
</div>
<div id="response"></div>
</form>
</div>
Aset JavaScript bukan paket besar, tetapi satu file dengan satu fungsi. Ini hanya memeriksa validitas formulir sehingga semua bidang wajib diisi.
Setelah validasi, URL memanggil titik akhir WordPress melalui AJAX. Alamat web ini menggunakan aturan .htaccess. URL menggambar titik akhir dari AJAX WordPress.
$(document).ready(function(e) {
// WooCommerce product enquiry form submit event handler
$("#frmContactForm").on('submit', function(e) {
e.preventDefault();
var name = $('#customer_name').val();
var email = $('#customer_email').val();
var message = $('#customer_message').val();
// Validate all fields in client side
if (email == "" || message == "" || name == "") {
$("#response").show();
$("#response").text("All fields are required.");
} else {
$("#response").hide();
$('.btn-send').hide();
$('#loader-icon').show();
// Post form via wp-ajax
$.ajax({
url: "/wordpress/send-contact-email/",
type: "POST",
data: $("#frmContactForm").serialize(),
success: function(response) {
$("#response").show();
$('#loader-icon').hide();
if (!response) {
$('.btn-send').show();
$("#response").html("Problem occurred.");
} else {
$('.btn-send').hide();
$("#response").html("Thank you for your message.")
};
},
error: function() { }
});
}
});
});
Langkah 3: Kaitkan filter dan tindakan WordPress dari functions.php
function.php memulai kait / filter tindakan WordPress dengan fungsi panggilan balik. Seperti yang kami lakukan dengan plugin.
Awalan URI menempatkan template WordPress untuk memuat HTML formulir kontak dan menyusun skrip. menggunakan get_stylesheet_directory_uri() Untuk mendapatkan jalur direktori tema anak.
Menggunakan get_template_directory_uri() , Akan menunjuk ke jalur direktori tema induk. Kemudian mengembalikan kesalahan 404 di konsol pengembang. Terjadi dalam memuat template dan template tema anak dengan jalur induk.
Ini memiliki tiga kait untuk mengaktifkan formulir kontak WordPress tanpa plugin di toko WordPress. mereka,
| nama hook | Tipe | Fungsi |
|---|---|---|
| Isi | Filter | Menerima konten halaman saat ini dan menambahkan formulir kontak HTML WordPress ke dalamnya. |
| wp_enqueue_scripts | tindakan | Garis gaya tema anak, skrip validasi, dan perpustakaan jQuery melalui CDN. |
| wp_ajax_nopriv_send_contact_email | tindakan | Mendengarkan permintaan dengan URL, skrip memanggil surat wp-admin / admin-ajax.php? action = send_contact_email |
<?php
function load_contact_form($contactHTML) {
// Load the contact form on a single product page
if ( is_product() ){
$template_path = get_stylesheet_directory_uri() . '/templates/contact-form.php';
$contactHTML .= file_get_contents( $template_path);
}
return $contactHTML;
}
// add filter to hook 'the_content' with a plugin functions.
add_filter('the_content', 'load_contact_form');
/**
* Enqueues scripts and styles for front end.
*
* @return void
*/
function woocommerce_contact_form_styles()
{
if (is_product()) {
wp_enqueue_style( 'theme-style', get_stylesheet_directory_uri() . '/style.css' );
wp_enqueue_script('contact-form-jquery', 'https://code.jquery.com/jquery-3.6.0.min.js', array(), null);
wp_enqueue_script('contact-form-script', get_stylesheet_directory_uri() . 'assets/js/form.js', array(), null);
}
}
add_action('wp_enqueue_scripts', 'woocommerce_contact_form_styles');
function send_contact_email()
{
$customerName = filter_var($_POST["customer_name"], FILTER_SANITIZE_STRING);
$customerEmail = filter_var($_POST["customer_email"], FILTER_SANITIZE_STRING);
$customerMessage = filter_var($_POST["customer_message"], FILTER_SANITIZE_STRING);
$to = 'Recipient email here';
$subject="Product enquiry";
$body = 'The customer details: <br/><br/>';
if(!empty($customerName)) {
$body = 'Customer Name:' . $customerName . '<br/>';
$body .= 'Customer Email:' . $customerEmail . '<br/>';
$body .= 'Customer Message:' . '<br/>';
$body .= $customerMessage . '<br/>';
}
$headers = array('Content-Type: text/html; charset=UTF-8');
$emailSent = wp_mail( $to, $subject, $body, $headers );
print $emailSent;
exit;
}
add_action("wp_ajax_nopriv_send_contact_email", "send_contact_email");
Hasil
Jadi, kami telah membuat formulir kontak WordPress tanpa pihak ketiga atau plugin khusus. Kami telah melihat cara menghubungkan panggilan filter WordPress. Ini membantu membuat perubahan pada perilaku WordPress asli.
Kait membuat perubahan pada halaman produk toko. Menambahkan formulir kontak WordPress tanpa plugin menggunakan file functions.php.
Tema anak memberi Anda ide untuk melakukan hal yang sama untuk setiap komponen melalui implementasi. Misalnya, formulir langganan anggota, langganan sosial, dan komponen lainnya.
Kembali ke atas
Source link