How To Make Custom Send Email Form WordPress Plugin

Beside using already form plugin which have been developed freely. Sometimes we need to make custom send email form to send result from calculator or any processing form. Here is tutorial to make simple custom form email

Here are some WordPress function which will be used : wp_register_script , wp_register_style , wp_enqueue_script , wp_localize_script , wp_enqueue_style, add_shortcode and wp_mail

Here is zz-custom-email.php contains

<?php

/*
Plugin Name: ZZ Custom Email
Plugin URI: http://wpamanuke.com
Description: Custom Email. Use short code [zz-custom-email] to use this email form. 
Author: WPAMANUKE
Version: 1.0
Author URI: wpamanuke.com
*/
define( 'ZZCE_VERSION', '1.0');
define( 'ZZCE_URL', plugin_dir_url( __FILE__ ));

// First we register our resources using the init hook
function ZZCE_resources() {
	wp_register_script("ZZCE-script", plugins_url("js/main.js", __FILE__), array('jquery'), ZZCE_VERSION, false);
	wp_register_style("ZZCE-style",  plugins_url("css/style.css", __FILE__) , array(), ZZCE_VERSION, "all");
}
add_action( 'init', 'ZZCE_resources' );

function ZZCE_func( $attr , $content) {
	wp_enqueue_script('jquery');
	wp_enqueue_script( 'ZZCE-script',array('jquery') , ZZCE_VERSION, true);
	$nonce = wp_create_nonce( 'ZZCE_nonce' );
	wp_localize_script( 'ZZCE-script', 'ZZCE_var', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) , 'nonce' => $nonce ) );
	wp_enqueue_style("ZZCE-style");
	ob_start();
	include plugin_dir_path( __FILE__ ) . "/template.php";
	$myvar = ob_get_clean();
	
	return $myvar;
}

add_shortcode('zz-custom-email', 'ZZCE_func');

// sendemail AJAX
add_action( 'wp_ajax_ZZCE_sendmail', 'ZZCE_sendmail' );
add_action( 'wp_ajax_nopriv_ZZCE_sendmail', 'ZZCE_sendmail' );
function ZZCE_sendmail() {
	check_ajax_referer( 'ZZCE_nonce' , '_ajax_nonce' );
	
	//SEND EMAIL TO USER
		$email_user = sanitize_email($_POST["email_user"]);
		$title_user = sanitize_text_field($_POST["title_user"]);
		$message_user = sanitize_text_field($_POST["message_user"]);
		
		add_filter('wp_mail_content_type', function( $content_type ) {
            return 'text/html';
		});
		$to = get_option('admin_email');
		$subject = 'ZZ Custom Email : ' . $title_user;
		$body = '<html>
			<body>
				<table>
					<tr>
						<td>From</td> <td>'. $email_user .'</td>
					</tr>
					<tr>
						<td>Message</td> <td>'. $message_user .'</td>
					</tr>
					
				</table>
			</body>
		</html>';
		$headers = array('Content-Type: text/html; charset=UTF-8');
		
		if (($email_user)&&($title_user)&&($message_user)) {
			$success_user = wp_mail( $to, $subject, $body, '', array( '' ) );
			if ($success_user) {
				echo '<div class="zz-success">Your message has been succesfully sent to admin</div>';
			} else {
				echo '<div class="zz-failed">Your message failed to be sent to admin. Please try again</div>';
			}
		} 
		$aStr = "";
		if (!$email_user) {
			$aStr = '<div class="zz-failed">You must fill your email first</div>';
		}
		if (!$title_user) {
			$aStr = $aStr . '<div class="zz-failed">You must fill your subject first</div>';
		}
		if (!$message_user) {
			$aStr = $aStr . '<div class="zz-failed">You must fill your message first</div>';
		}
		if ($aStr) {
			echo $aStr;
		}
		wp_die();
}
	

?>

template.php

<div class="zz-custom-email">
	<div class="zz-flex">
		<div class="zz-label">
			<label>Your Email Address</label>
		</div>
		<div class="zz-field">
			<input type="text" id="email-user" /> 
		</div>
	</div>
	<div class="zz-flex">
		<div class="zz-label">
			<label>Subject</label>
		</div>
		<div class="zz-field">
			<input type="text" id="title-user" /> 
		</div>
	</div>
	<div class="zz-flex">
		<div class="zz-label">
			<label>Your Message</label>
		</div>
		<div class="zz-field">
			<textarea id="message-user"></textarea>
		</div>
	</div>
	<div class="zz-flex">
		<div class="zz-center">
			<input type="button" id="zz-submit-email" value="SEND RESULT" /> 
		</div>
	</div>
	
	<div id="zz-email-result">
	</div>
</div>

main.js

jQuery(function($){
	
	
	// SEND Email
	$('#zz-submit-email').on('click',function(){
		
		var aData = {
			'_ajax_nonce': ZZCE_var.nonce,
			'action': 'ZZCE_sendmail',
			'email_user': $("#email-user").val(),
			'title_user': $("#title-user").val(),			
			'message_user':$("#message-user").val()
		};
	
		jQuery.ajax({
           url: ZZCE_var.ajax_url,
           type: "POST",
           cache: false,
           data: aData,
		   beforeSend: function() {
			   $("#zz-email-result").html('<div class="zz-process">Processing Sending Email</div>');
		   },
           success:function(response){
			   
			   $("#zz-email-result").html(response);
			}
        }); 
	});
});

style.css

.zz-flex {
	display:flex;
	margin-bottom:10px;
}
.zz-label {
	width:150px;
}
.zz-field {
	width:100%;
}
.zz-failed {
	margin-bottom:10px;
	background-color:#ff0000;
	color:#ffffff;
	padding:5px;
}
.zz-success {
	margin-bottom:10px;
	background-color:#00ff00;
	color:#ffffff;
	padding:5px;
}

That’s all functions , html , javascript and css which are needed. It’s still very simple. But you can developed it further if you have any calculation / other form , just need some modification. Ussualy it’s needed to send pdf file which is generated based on form input. But because it’s too long so i just explain about the sending email using ajax only.

Leave a Reply Cancel reply