I was admiring the new Walmart.com website the other day and really appreciated how they made their register/create account form into a full page layout. For me this makes a much better user experience as it takes away all the distractions.
Walmart Register Page
So I thought to myself, wouldn't it be nice to do this on an EvolutionX store!!
BEFORE
AFTER
Step 1
Add the below JS code to your footer block .
<script>
// Backbutton to work
function registerBackBut() {
window.history.back();
}
// load this only on the register page
if ($('body.register').length > 0) {
// Add the gradient-box
$('.page-content').prepend("<div class=\"gradient-box\"></div>");
// Add the backbutton
$('body').prepend("<button class=\"registerBackBut\" onclick=\"registerBackBut()\"><i class=\"fa fa-arrow-left\" aria-hidden=\"true\"></i></button>");
}
</script>
Step 2
Add the below CSS code to your CSS block
/* start of full page create account */
/* blue bar gradient */
.gradient-box {
position: fixed;
bottom: 0%;
width: 100%;
height: 30%;
z-index: -1;
background: rgb(3,131,185);
background: -moz-linear-gradient(270deg, rgba(3,131,185,1) 41%, rgba(38,169,225,0.8883928571428571) 100%);
background: -webkit-linear-gradient(270deg, rgba(3,131,185,1) 41%, rgba(38,169,225,0.8883928571428571) 100%);
background: linear-gradient(270deg, rgba(3,131,185,1) 41%, rgba(38,169,225,0.8883928571428571) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0383b9",endColorstr="#26a9e1",GradientType=1);
}
/* Darken the shadow and change forms background-color */
.register-form .form-container {
box-shadow: 2px 4px 30px -6px #404041;
background: #ffff;
}
/* Remove the header section */
.register .header-full {
display: none;
}
/* Remove spacing around the logo */
.register-form .logo {
margin-top: 0px;
margin-bottom: 0px;
}
/* Darken form text color */
.log-reg .form-container form .form-group > label {
color: #404041;
}
/* Increase form text size */
.register-form label {
font-size: 1em;
}
/* background */
body.register {
background-color: #fff;
}
/* field borders */
.register .form-control {
border: 1px solid #b6b6b6;
}
/* checkbox borders */
.register .control__indicator {
border: 1px solid #b6b6b6;
}
/* font awesome arrow */
.register .fa-arrow-left {
font-size: 24px;
}
/* back button */
button.registerBackBut {
box-shadow: none;
border: none;
position: absolute;
top:25px;
left:40px;
}
/* back button remove on mobile */
@media (max-width: 768px) {
button.registerBackBut {
display: none;
}
}
/* end of full page create account */
👍 Pro tip
If you want to add your own gradient color. Get the code on https://cssgradient.io/
That's it, now go be Awesome!!