Customizing registration forms is key to providing a seamless user experience. Even though WordPress provides default user registration form and user login form, people still need custom user registration form, why? because of some customize limitation. In this guide, we’ll walk through the process of creating tailored WordPress user registration form, utilizing templates and plugins to optimize the sign-up process.
Sign up in WordPress is one key part if you want to track your visitor’s record. like if you are selling something or you are some club house or anything where you want know, who and when something happened, you will need user registration.
If you also need Custom User Login Form its here.
Why Customize WordPress User Registration Form?
Standard registration forms may not fully capture the essence of your brand or the specific data you need. By customizing user registration form, you can:
- Tailor the registration process to match your branding and design preferences.
- Collect additional user data relevant to your business or community.
- Simplify the sign up in WordPress, leading to higher conversion rates.
- Offer a personalized user experience, fostering stronger connections with your audience.
Creating Custom WordPress User Registration Form
Let’s dive into creating a sample user registration form in WordPress using a theme template:
Step 1: Define Your Custom WordPress User Registration Form Fields
Before diving into customization, identify the additional information you want to collect during user registration. This could include fields such as ‘Full Name’, ‘Phone Number’, or ‘Location’. Define these fields to align with your website’s objectives and audience demographics.
Step 2: Explore Registration Plugins for WordPress
WordPress offers a variety of plugins that simplify the creation of custom registration forms. Explore plugins like ‘User Registration’ or ‘Profile Builder’ to easily add, remove, or rearrange registration fields without delving into code. This should be easier if you are not programmer or you don’t know coding.
If you don’t think plugin meets your requirement, you can create your own sign up form in WordPress.
Lets talk about that next step.
Step 3: Create Your Own WordPress User Registration Form
For advanced customization, create a custom user registration form template within your WordPress theme directory. Name it appropriately, such as custom-registration-form.php. In this template, blend HTML with PHP functions to design and process user registrations according to your specifications.
<?php /* Template Name: User Register Page */ ?>
Save your file and let add more code.
Now add your form elements
<section class="custom-login-page">
<div class="row mx-0">
<div class="col-xs-12 col-md-6 col-md-offset-3">
<div class="panel panel-default login-panel">
<div class="panel-heading">
<h3 class="panel-title">Register New Account</h3>
</div>
<div class="panel-body">
<?php if (!empty($error)) { ?>
<p class="alert alert-danger"><?php _e($error, 'cer'); ?></p>
<?php } ?>
<?php if (!empty($message)) { ?>
<p class="alert alert-success"><?php _e($message, 'cer'); ?></p>
<?php } ?>
<form action="<?php echo site_url('/user-register'); ?>" method="post">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="mb_username" class="form-control" required>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="form-group">
<label for="username">First Name</label>
<input type="text" name="mb_first_name" class="form-control" required>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group">
<label for="username">Last Name</label>
<input type="text" name="mb_last_name" class="form-control" required>
</div>
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="mb_email" id="email" class="form-control" required>
</div>
<div class="form-group">
<label for="professional_bg">Professional Background</label>
<input type="text" name="professional_bg" id="professional_bg" class="form-control" required>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="form-group">
<label for="username">Password</label>
<input type="password" name="mb_password" class="form-control" required>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group">
<label for="username">Confirm Password</label>
<input type="password" name="mb_conf_password" class=" form-control" required>
</div>
</div>
</div>
<div class="form-group">
<div class="display-flex vertical-center justify-between">
<?php $nonce = wp_create_nonce('mb_register_form_nonce'); ?>
<input type="hidden" name="mb_register_form_nonce" value="<?php echo esc_attr($nonce); ?>" />
<button class="btn btn-warning">Register</button>
<p style="margin-bottom:0">already have an account? <a href="/user-register"> Login </a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
We have defined our form elements, you can design it as your site’s need. I have used bootstrap 3 in above code, you can replace class if you want to use latest version of bootstrap or your custom style.
Next part is to handle form submission. Lets do that
/**
* Handle Register Form Submission
*/
$error = "";
$message = "";
if (!empty($_POST['mb_register_form_nonce']) && wp_verify_nonce($_POST['mb_register_form_nonce'], 'mb_register_form_nonce')) {
$mb_username = sanitize_user($_POST['mb_username']);
$mb_firstName = sanitize_text_field($_POST['mb_first_name']);
$mb_lastName = sanitize_text_field($_POST['mb_last_name']);
$mb_email = sanitize_email($_POST['mb_email']);
$mb_professional_bg = sanitize_text_field($_POST['professional_bg']);
$mb_password = $_POST['mb_password']; // No need to sanitize password fields
$mb_conf_password = $_POST['mb_conf_password']; // No need to sanitize password fields
// Perform additional validations
if (
empty($mb_username) || empty($mb_firstName) || empty($mb_lastName) || empty($mb_email) || empty($mb_professional_bg)
|| empty($mb_password) || empty($mb_conf_password)
) {
$error = "All fields are required! Please fill all fields.";
} elseif (!is_email($mb_email)) {
$error = "Please enter a valid email address.";
} elseif (email_exists($mb_email)) {
$error = "Email address is already in use. Please choose a different one.";
} elseif ($mb_password !== $mb_conf_password) {
$error = "Passwords do not match.";
} else {
// Create new user
$user_id = wp_create_user($mb_username, $mb_password, $mb_email);
if (is_wp_error($user_id)) {
$error = $user_id->get_error_message();
} else {
// Update user meta
update_user_meta($user_id, 'first_name', $mb_firstName);
update_user_meta($user_id, 'last_name', $mb_lastName);
update_user_meta($user_id, 'professional_background', $mb_professional_bg);
$message = "User registration successful!. Redirecting...";
}
}
// Redirect after registration
if (empty($error)) {
// Add a delay before redirecting
sleep(2);
// Redirect to login page
wp_redirect('/user-login');
exit;
}
}
Step 4: Customize Registration Form Styling
Enhance the visual appeal of your registration form by applying CSS styles that match your website’s design. Utilize custom stylesheets or plugins like ‘Custom CSS’ to seamlessly integrate your registration form with your WordPress theme.
Full Code Example:
<?php /* Template Name: User Register Page */ ?>
<?php
/**
* The main template file
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* e.g., it puts together the home page when no home.php file exists.
*
* Learn more: {@link https://codex.wordpress.org/Template_Hierarchy}
*
* @package WordPress
* @subpackage
* @since Cer 1.0
*/
/**
* Handle Register Form Submission
*/
$error = "";
$message = "";
if (!empty($_POST['mb_register_form_nonce']) && wp_verify_nonce($_POST['mb_register_form_nonce'], 'mb_register_form_nonce')) {
$mb_username = sanitize_user($_POST['mb_username']);
$mb_firstName = sanitize_text_field($_POST['mb_first_name']);
$mb_lastName = sanitize_text_field($_POST['mb_last_name']);
$mb_email = sanitize_email($_POST['mb_email']);
$mb_professional_bg = sanitize_text_field($_POST['professional_bg']);
$mb_country = sanitize_text_field($_POST['mb_country']);
$mb_password = $_POST['mb_password']; // No need to sanitize password fields
$mb_conf_password = $_POST['mb_conf_password']; // No need to sanitize password fields
// Perform additional validations
if (
empty($mb_username) || empty($mb_firstName) || empty($mb_lastName) || empty($mb_email) || empty($mb_professional_bg)
|| empty($mb_country) || empty($mb_password) || empty($mb_conf_password)
) {
$error = "All fields are required! Please fill all fields.";
} elseif (!is_email($mb_email)) {
$error = "Please enter a valid email address.";
} elseif (email_exists($mb_email)) {
$error = "Email address is already in use. Please choose a different one.";
} elseif ($mb_password !== $mb_conf_password) {
$error = "Passwords do not match.";
} else {
// Create new user
$user_id = wp_create_user($mb_username, $mb_password, $mb_email);
if (is_wp_error($user_id)) {
$error = $user_id->get_error_message();
} else {
// Update user meta
update_user_meta($user_id, 'first_name', $mb_firstName);
update_user_meta($user_id, 'last_name', $mb_lastName);
update_user_meta($user_id, 'professional_background', $mb_professional_bg);
update_user_meta($user_id, 'country', $mb_country);
$message = "User registration successful!. Redirecting...";
}
}
// Redirect after registration
if (empty($error)) {
// Add a delay before redirecting
sleep(2);
// Redirect to login page
wp_redirect('/user-login');
exit;
}
}
/**
* get header
*/
get_header();
?>
<section class="custom-login-page">
<div class="row mx-0">
<div class="col-xs-12 col-md-6 col-md-offset-3">
<div class="panel panel-default login-panel">
<div class="panel-heading">
<h3 class="panel-title">Register New Account</h3>
</div>
<div class="panel-body">
<?php if (!empty($error)) { ?>
<p class="alert alert-danger"><?php _e($error, 'cer'); ?></p>
<?php } ?>
<?php if (!empty($message)) { ?>
<p class="alert alert-success"><?php _e($message, 'cer'); ?></p>
<?php } ?>
<form action="<?php echo site_url('/user-register'); ?>" method="post">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="mb_username" class="form-control" required>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="form-group">
<label for="username">First Name</label>
<input type="text" name="mb_first_name" class="form-control" required>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group">
<label for="username">Last Name</label>
<input type="text" name="mb_last_name" class="form-control" required>
</div>
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="mb_email" id="email" class="form-control" required>
</div>
<div class="form-group">
<label for="professional_bg">Professional Background</label>
<input type="text" name="professional_bg" id="professional_bg" class="form-control" required>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="form-group">
<label for="username">Password</label>
<input type="password" name="mb_password" class="form-control" required>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group">
<label for="username">Confirm Password</label>
<input type="password" name="mb_conf_password" class=" form-control" required>
</div>
</div>
</div>
<div class="form-group">
<div class="display-flex vertical-center justify-between">
<?php $nonce = wp_create_nonce('mb_register_form_nonce'); ?>
<input type="hidden" name="mb_register_form_nonce" value="<?php echo esc_attr($nonce); ?>" />
<button class="btn btn-warning">Register</button>
<p style="margin-bottom:0">already have an account? <a href="/user-register"> Login </a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>
Now, go to wp-admin and create a new page, name is anything like user-registration, and select this newly created template from right sidebar, and save it.
Now visit the page you just created, hurry! you just successfully created your own user registration or sign up in WordPress.
Conclusion
Customizing registration forms in WordPress empowers you to optimize user registration while gathering valuable user data. Whether through plugins or manual template customization, tailoring the registration process enhances user engagement and strengthens your connection with your audience.
Start customizing your WordPress registration forms today to elevate your website’s user experience and achieve your business objectives!
Leave a Reply