Wordpress Custom Registration Form - html

Question

I have a client that needs a custom registration form.
I need to make a custom design on this page
I need to add custom fields like First Name, Company, Phone, etc.
Someone can help me with this?

Answer 1

A better place to ask WordPress questions is probably on WordPress Answers. Anyhoo, if you want to solve this without plugins, you need three things:
A custom WordPress theme
A Page Template
A WordPress Page that uses the Page Template
When you have these three parts in place, you can do the following in your Page Template:
<?php
/*
Template Name: Registration
*/
global $current_user;
wp_get_current_user();
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$company = $_POST['company'];
if (($firstname != '') && ($lastname != '') && ($company != '')) {
// TODO: Do more rigorous validation on the submitted data
// TODO: Generate a better login (or ask the user for it)
$login = $firstname . $lastname;
// TODO: Generate a better password (or ask the user for it)
$password = '123';
// TODO: Ask the user for an e-mail address
$email = 'test#example.com';
// Create the WordPress User object with the basic required information
$user_id = wp_create_user($login, $password, $email);
if (!$user_id || is_wp_error($user_id)) {
// TODO: Display an error message and don't proceed.
}
$userinfo = array(
'ID' => $user_id,
'first_name' => $firstname,
'last_name' => $lastname,
);
// Update the WordPress User object with first and last name.
wp_update_user($userinfo);
// Add the company as user metadata
update_usermeta($user_id, 'company', $company);
}
if (is_user_logged_in()) : ?>
<p>You're already logged in and have no need to create a user profile.</p>
<?php else : while (have_posts()) : the_post(); ?>
<div id="page-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="content">
<?php the_content() ?>
</div>
<form action="<?php echo $_SERVER['REQUEST_URI'] ?>" method="post">
<div class="firstname">
<label for="firstname">First name:</label>
<input name="firstname"
id="firstname"
value="<?php echo esc_attr($firstname) ?>">
</div>
<div class="lastname">
<label for="lastname">Last name:</label>
<input name="lastname"
id="lastname"
value="<?php echo esc_attr($lastname) ?>">
</div>
<div class="company">
<label for="company">Company:</label>
<input name="company"
id="company"
value="<?php echo esc_attr($company) ?>">
</div>
</form>
</div>
<?php endwhile; endif; ?>
Now, when you want to retrieve the stuff you've stored, you need to know whether the information is within the User object itself or in metadata. To retrieve the first and last name (of a logged-in user):
global $current_user;
$firstname = $current_user->first_name;
$lastname = $current_user->last_name;
To retrieve the company name (of a logged-in user):
global $current_user;
$company = get_usermeta($current_user->id, 'company');
That's the basic gist of it. There's still a lot of stuff missing here, like validation, error message output, the handling of errors occurring within the WordPress API, etc. There's also some important TODO's that you have to take care of before the code will even work. The code should probably also be split into several files, but I hope this is enough to get you started.

Answer 2

An advantage of using a custom registration form is that modifying the code according to the user's needs becomes easy. For a custom submit form you can make use of existing hooks in Wordpress like template_redirect and then map that hook to some function which will do the post-processing of the form, like validation and submitting data to the site's database. You can refer to an in-depth article here.
<div class="employee">
<input type="hidden" name="show_msg">
<form name="customer_details" method="POST" required="required" class="input-hidden">
Your Name: <input type="text" id="name" name="customer_name">
Your Email: <input type="text" id="email" name="customer_email">
Company: <input type="text" id="company" name="company">
Sex: <input type="radio" name="customer_sex" value="male">Male <input type="radio" name="customer_sex" value="female">Female
<textarea id="post" name="experience" placeholder="Write something.." style="height:400px;width:100%"></textarea>
<input type="submit" value="Submit">
<!--?php wp_nonce_field( 'wpshout-frontend-post','form-submit' ); ?-->
</form></div>
PHP function
function wpshout_frontend_post() {
wpshout_save_post_if_submitted();
}
add_action('template_redirect','wpshout_frontend_post', 2);

Answer 3

A custom WordPress registration form has two major advantages over the standard form.
The first is the integration with the overall look and feel of the website theme. Standard forms often don’t work well with custom themes and there is always a chance that the custom CSS files do not render well with the form. A custom form, on the other hand, can be easily set up to work with custom CSS.
The second and more popular reason of using a custom registration form is the option of custom fields that are not included on the standard form. A small custom registration form speeds up the process and collects all the necessary data from a neat interface.
function wordpress_custom_registration_form( $first_name, $last_name, $username, $password, $email) {
global $username, $password, $email, $first_name, $last_name;
echo '
<form action="' . $_SERVER['REQUEST_URI'] . '" method="post">
First Name :
<input type="text" name="fname" value="' . ( isset( $_POST['fname']) ? $first_name : null ) . '">
Last Name:
<input type="text" name="lname" value="' . ( isset( $_POST['lname']) ? $last_name : null ) . '">
Username <strong>*</strong>
<input type="text" name="username" value="' . ( isset( $_POST['username'] ) ? $username : null ) . '">
Password <strong>*</strong>
<input type="password" name="password" value="' . ( isset( $_POST['password'] ) ? $password : null ) . '">
Email: <strong>*</strong>
<input type="text" name="email" value="' . ( isset( $_POST['email']) ? $email : null ) . '">
<input type="submit" name="submit" value="Register"/>
</form>
';
}
This form can be inserted anywhere by using the shortcode [wp_registration_form]. Here is the code snippet for setting up the shortcode:
function wp_custom_shortcode_registration() {
ob_start();
wordpress_custom_registration_form_function();
return ob_get_clean();
}
I hope that by now you have a fair idea of creating a WordPress custom Registration form.Still any confusion kindly check Build Custom WordPress Registration Forms