Customizing User Registration Template
While user registration (sign in) logic is programmed in a certain way and can not be changed, it is still possible to make contextual and UI modifications to the registration dialog, by overriding its templates.
Video Overview
2-Step Registration Logic
The dialog prompts user to sign in via email or via their Facebook or Google accounts.
Sign In via Email
If user chooses to sign in via email, their account will be looked up in the API. If user does not exist, new record will be automatically created and user will be presented with a second dialog. The dialog welcomes new user and prompts them to complete their registration by providing name and phone number. Upon completion user gets signed in. If user chooses to opt-out, the only option they have is to close the page, go back or refresh the page. If user refreshes the page (or goes back), they will get signed automatically in, since they were registered as anonymous identified only by their email address. This logic was implemented with emphasis to maximize lead capture.
Sign In via Google/Facebook
Choosing Facebook or Google will redirect user to their respective authentication services. After user authenticates, their basic information like name and email are passed back to the WP site and Users plugin either signs existing user in, or creates a new user record (registers user).
Modifying Templates
All Home Junction templates can be overwritten by copying them from their original location to hji-templates folder inside of your child theme directory.
The sign in related templates are located in the plugins folder under /hji-users/classes/views/. For convenience purposes the markup is broken down into 4 templates:
user-login-modal-content.phtml - primary template containing sectional wrappers and loading the rest of the templates within;
user-login-form.phtml - contains the 2-step email sign in/registration markup with registration fields and welcome message;
user-login-social.phtml - contains Facebook/Google sign in links with underlying mechanism implemented via hidden fields;
You can either override a specific template, all of them or even combine them into a single template within user-login-modal-content.phtml like in the following example:
Example:
<?php
use hji\common\utils\WPHelper;
use hji\membership\Membership;
$licenseKey = Membership::settings()->licenseKey;
?>
<style>
#custom-signin-email-container {
text-align: center;
}
#custom-signin-email-container .first-title, #custom-signin-email-container .second-title {
color: #0288d1;
}
.first-title {
text-transform: uppercase;
}
#custom-signin-email-container .second-title {
font-size: 1.4em;
font-weight: 400;
}
#custom-signin-email-container .third-title,
#idx-register-login.modal #custom-signin-email-container #idx-login .signin-title {
font-size: 1.2em;
font-weight: 200;
line-height: 1.4em;
}
#custom-signin-email-container .not-spam-info {
font-size: 1em!important;
}
#custom-signin-email-container #loginemail {
margin-bottom: 1em;
width: 100%;
height: 50px;
}
#custom-signin-email-container .form-sign-in .form-group {
padding: 1em 0em;
margin: 0!important;
}
.custom-sigin-social-container {
display: flex;
justify-content: center;
}
.custom-sigin-social-container {
margin-top: 1em;
}
.custom-sigin-social-container #social-signin-fb,
.custom-sigin-social-container #social-signin-google {
width: 80px!important;
font-size: 1.4em;
}
.custom-sigin-social-container #social-signin-fb {
margin-right: .5em;
}
.custom-sigin-social-container #social-signin-fb a {
color: #6d84b4;
}
.custom-sigin-social-container #social-signin-google a {
color: #d14836;
}
</style>
<div class="social-signin-wrap">
<div id="custom-signin-email-container">
<div data-sign="login-default" class="default-login-content">
<div id="idx-login" data-login="step1" class="email-login-form ">
<h2 class="first-title">Please register to continue...</h2>
<h2 class="second-title">You must register to get full MLS access now</h2>
<h3 class="third-title">Stay informed of great deals, price reductions, daily
listings updates, off market notifications, and more.</h3>
<form id="idx-loginform" class="form-inline form-sign-in" data-form="login">
<div class="errmsg"></div>
<div class="form-group">
<input size="27" type="text" name="loginemail" id="loginemail"
class="form-control" placeholder="Email..."/>
<a href="#" class="btn btn-primary btn-block" id="idx-login-btn"
data-action="sign-in">Continue with Email</a>
</div>
<div class="form-group not-spam-info">
We do not spam nor share your personal information. <br/>
This app does not post to Facebook or Google.
</div>
</form>
<div class="second-title"> or</div>
</div> <!-- Sign in with the email -->
<div class="social-signin-wrap-inner" data-sign="social-login">
<div class="row">
<div class="second-title">Sign in with your favorite platform</div>
<div class="social-signin-forms">
<div class="custom-sigin-social-container">
<form id="social-signin-fb" method="get"
action="https://oauth.homejunction.com/ident" width=60>
<div class="form-group field">
<input type="hidden" name="provider" value="facebook">
<input type="hidden" name="license"
value="<?php echo $licenseKey; ?>">
<input type="hidden" name="callback"
value="<?php echo esc_url(WPHelper::getCurrentUrl()); ?>">
<a id="login-w-fb" data-action="sign-in-facebook"
class="" href="#"
title="Sign In with Facebook"><span
class="fa fa-facebook"></span></a>
</div>
</form>
<form id="social-signin-google" method="get"
action="https://oauth.homejunction.com/ident" width="60px">
<div class="form-group field">
<input type="hidden" name="provider" value="google">
<input type="hidden" name="license"
value="<?php echo $licenseKey; ?>">
<input type="hidden" name="callback"
value="<?php echo esc_url(WPHelper::getCurrentUrl()); ?>">
<a id="login-w-google" data-action="sign-in-google"
class="" href="#"
title="Sign In with Google"><span
class="fa fa-google"></span></a>
</div>
</form>
</div>
</div>
</div>
</div><!-- .social-signin-wrap -->
<div data-login="step2" class="email-login-form" style="display: none;">
<h2 class="first-title">Please enter your name <br> and ell phone to continue</h2>
<div class="signin-title">First time here? Welcome!</div>
<span class="signin-description">Just a few more details to get you started.</span>
<form class="form-inline" data-form="register-details">
<div class="col-md-10 col-md-offset-1">
<div class="form-group field">
<input size="40" type="text" name="regfname" class="form-control"
placeholder="First Name"/>
</div>
<div class="form-group field">
<input size="40" type="text" name="reglname" class="form-control"
placeholder="Last Name"/>
</div>
<div class="form-group field">
<input size="40" type="text" name="regphone" class="form-control"
placeholder="Phone"/>
</div>
<div class="col-md-10 col-md-offset-1" style="padding:0 0.5em;">
<!-- <div class="form-group field"> -->
<a href="#" class="btn btn-primary btn-block" data-action="finished">I'm
Finished! </a>
<!-- </div> -->
</div>
<div class="form-group not-spam-info">
We do not spam nor share your personal information.
</div>
</div>
</form>
</div>
</div>
</div>
</div><br>