How to create custom register form using ajax in wordpress

Wordpress

Custom register form using ajax in wordpress

rajat_developer 20 April 2021

Create Custom html form

Add this code in functions.php file

function cust_form(){
	?>

	<div class="form-wrapper form-custom">

<h2 class="register-heading"><?php _e( 'Sign Up', 'debate' ); ?></h2>

<div id="error-message"></div>

<form method="post" name="cust-register-form">

 <div class="form-label"><label for="st-username"><?php _e( 'Username', 'debate' ); ?></label></div>
 <div class="field"><input type="text" autocomplete="off" name="username" id="st-username" /></div>

<div class="form-label"><label for="st-email"><?php _e( 'Email', 'debate' ); ?></label></div>
 <div class="field"><input type="text" autocomplete="off" name="mail" id="st-email" /></div>

<div class="form-label"><label for="st-psw"><?php _e( 'Password', 'debate' ); ?></label></div>
 <div class="field"><input type="password" name="password" id="st-psw" /></div>

 <div class="form-label"><label for="st-fname"><?php _e( 'First Name', 'debate' ); ?></label></div>
 <div class="field"><input type="text" autocomplete="off" name="fname" id="st-fname" /></div>

<div class="form-label"><label for="st-lname"><?php _e( 'Last Name', 'debate' ); ?></label></div>
 <div class="field"><input type="text" autocomplete="off" name="lname" id="st-lname" /></div>

<div class="frm-button"><input type="button" id="register-user" value="Register" /></div>

</form>

</div>

<?php
}

add_shortcode('custom_register','cust_form');

Add this code below

function cust_handle_registration(){

if( $_POST['action'] == 'register_action' ) {

$error = '';

$uname = trim( $_POST['username'] );
 $email = trim( $_POST['mail_id'] );
 $fname = trim( $_POST['firname'] );
 $lname = trim( $_POST['lasname'] );
 $pswrd = $_POST['passwrd'];

if( empty( $_POST['username'] ) )
 $error .= '<p class="error">Enter Username</p>';

if( empty( $_POST['mail_id'] ) )
 $error .= '<p class="error">Enter Email Id</p>';
 elseif( !filter_var($email, FILTER_VALIDATE_EMAIL) )
 $error .= '<p class="error">Enter Valid Email</p>';

if( empty( $_POST['passwrd'] ) )
 $error .= '<p class="error">Password should not be blank</p>';

if( empty( $_POST['firname'] ) )
 $error .= '<p class="error">Enter First Name</p>';
 elseif( !preg_match("/^[a-zA-Z'-]+$/",$fname) )
 $error .= '<p class="error">Enter Valid First Name</p>';

if( empty( $_POST['lasname'] ) )
 $error .= '<p class="error">Enter Last Name</p>';
 elseif( !preg_match("/^[a-zA-Z'-]+$/",$lname) )
 $error .= '<p class="error">Enter Valid Last Name</p>';

if( empty( $error ) ){

$status = wp_create_user( $uname, $pswrd ,$email );

if( is_wp_error($status) ){

$msg = '';

 foreach( $status->errors as $key=>$val ){

 foreach( $val as $k=>$v ){

 $msg = '<p class="error">'.$v.'</p>';
 }
 }

echo $msg;

 }else{

$msg = '<p class="success">Registration Successful</p>';

 echo $msg;
 }

}
 else{

echo $error;
 }
 die(1);
 }
}
add_action( 'wp_ajax_register_action', 'cust_handle_registration' );
add_action( 'wp_ajax_nopriv_register_action', 'cust_handle_registration' );

Call ajax file for ajax submission

function cust_ajaxurl(){ ?>
<script>

var ajaxurl = '<?php echo admin_url('admin-ajax.php') ?>';

</script>
<?php 
}
add_action('wp_head','cust_ajaxurl');

2. Add this in footer

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> // if already added skip this
<script type="text/javascript">
/* Registration Ajax */
 jQuery('#register-user').on('click',function(){

var action = 'register_action';

var username = jQuery("#st-username").val();
 var mail_id = jQuery("#st-email").val();
 var firname = jQuery("#st-fname").val();
 var lasname = jQuery("#st-lname").val();
 var passwrd = jQuery("#st-psw").val();

var ajaxdata = {

action: 'register_action',
 username: username,
 mail_id: mail_id,
 firname: firname,
 lasname: lasname,
 passwrd: passwrd,

};

jQuery.post( ajaxurl, ajaxdata, function(res){ // ajaxurl must be defined previously

jQuery("#error-message").html(res);
 });
 });	
	
</script>

Thanks for visting and comment below if it is useful for You!!!!

Leave a Reply Cancel reply