Buat formulir kontak WordPress WooCommerce tanpa plugin

Programming

Oleh Vinci terakhir diubah pada 11 Juli 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 memiliki referensi global yang mengaktifkan/menonaktifkan plugin dengan arahan yang dapat dikonfigurasi.

Kami telah melihat plugin yang tersedia untuk membuat formulir kontak WordPress. Selain itu, kami belajar cara membuat plugin khusus untuk mencapai tujuan yang sama.

Meskipun plugin WordPress adalah solusi sistematis, pemula mungkin lebih suka cara yang mudah. Ketika saya masih pemula, plugin WordPress sulit untuk saya pahami pada awalnya.

Artikel ini untuk menampilkan formulir kontak WordPress tanpa plugin di halaman produk. Ini menggunakan file function.php dari tema WordPress yang aktif.

Langkah-langkah untuk membuat formulir kontak WordPress tanpa plugin

Membuat formulir kontak WordPress tanpa plugin itu mudah hanya dalam 3 langkah. Langkah-langkah ini akan menampilkan formulir kontak di toko WordPress dan mengaktifkan pengiriman email. Kesederhanaan dan sedikit kode adalah keuntungan utama dari contoh ini.

  1. Buat tema anak untuk tema WordPress aktif. Kemudian, batalkan salinan aset subjek asli.
  2. Tempatkan formulir kontak HTML, CSS, dan JavaScript di tema anak.
  3. Kaitkan kait aksi/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 tepat untuk memulai tindakan WordPress tanpa plugin. Dalam contoh ini, dua tindakan panggilan WordPress utama dimulai melalui file ini.

  1. Dengan memuat template dan aset, render formulir.
  2. Kirim email dengan mendengarkan permintaan WordPress AJAX.

File functions.php terletak di direktori tema WordPress. Ini adalah praktik yang baik untuk memiliki tema anak daripada memodifikasi file tema induk.

Langkah 1 menunjukkan struktur file direktori tema anak. Ini termasuk formulir kontak HTML dengan direktori “Templat”. Ini juga berisi file functions.php dan style.css yang dikloning.

File templat formulir kontak WordPress

style.css memiliki gaya formulir kontak WordPress dengan header halaman gaya standar. Dan header CSS mencakup yang berikut ini.

  • Sebuah “nama tema” yang unik.
  • Referensi topik utama dengan informasi “templat”.
  • Template URI dll
/*
 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 templat HTML formulir kontak WordPress dengan aset JavaScript

Bagian ini memperlihatkan konten file templat formulir kontak WordPress. Ini termasuk bidang nama, email, dan pesan untuk dikumpulkan dari pelanggan.

Ini memberikan bentuk minimal dan dapat disesuaikan untuk menambahkan lebih banyak bidang untuk kebutuhan toko WooCommerce.

<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 bukanlah satu paket besar, tetapi satu file dengan satu fungsi. Itu hanya mengontrol validasi formulir sehingga semua bidang wajib.

Setelah validasi, URL akan memanggil titik akhir WordPress melalui AJAX. URL ini memetakan URL titik akhir WordPress AJAX menggunakan aturan htaccess.

$(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 aksi/filter WordPress dengan fungsi panggilan balik. Ini sama seperti yang kami lakukan dengan plugin.

Awali URI template WordPress untuk memuat formulir kontak HTML dan skrip antrian. menggunakan get_stylesheet_directory_uri() Untuk mendapatkan jalur direktori tema anak.

dengan menggunakan get_template_directory_uri() , akan menunjuk ke jalur direktori tema induk. Kemudian, ia mengembalikan kesalahan 404 di konsol pengembang. Terjadi saat memuat template dan aset 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 Mendapatkan konten halaman saat ini dan menambahkan formulir kontak HTML WordPress ke dalamnya.
wp_enqueue_scripts tindakan Antrean gaya tema anak, skrip validasi, dan pustaka jQuery melalui CDN.
wp_ajax_nopriv_send_contact_email tindakan Dengan mendengarkan permintaan dengan URL, itu memanggil skrip mailer 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 the 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

Oleh karena itu, kami telah membuat formulir kontak WordPress tanpa plugin pihak ketiga atau kustom. Kami telah melihat cara menghubungkan panggilan filter WordPress. Ini membantu membuat perubahan pada perilaku inti WordPress.

Hooks membuat perubahan pada halaman produk toko. Itu menambahkan formulir kontak WordPress tanpa plugin menggunakan file functions.php.

Tema anak memberi Anda ide untuk mengulangi hal yang sama untuk setiap komponen melalui implementasi. Misalnya, formulir berlangganan anggota, berbagi sosial dan komponen lainnya.

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *