Buat formulir kontak WordPress WooCommerce tanpa plugin

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.

1. Buat tema anak untuk tema WordPress aktif. Kemudian, batalkan salinan aset subjek utama.
2. Letakkan formulir kontak HTML, CSS, dan JavaScript di templat anak.
3. 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.

1. Dengan memuat template dan aset, render formulir.
2. 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