Learn with us how to create a simple Sign Up Form!
If you found us on TikTok on the following post, check out this article and copy-paste the full code!
Happy coding! 😻
@creative.tim ♬ Standout - Kid Dean
Contents:
1. HTML Code
2. CSS Code
3. Javascript Code
Get your code ⬇️
1. HTML Code
<div class="container">
<header>
<h2>Sign Up Form (Coded)</h2>
<p>Based on <a href="https://drc8llcc7rqy7.cloudfront.net/shots/2409898/24-sign-up-large" target="blank">Sign Up Design #39</a> by <a href="https://dribbble.com/deab" target="blank">Denis Abdullin</a>.</p>
</header>
<div id="app" class="signup">
<transition name="fade" mode="out-in">
<component :is="compname" @change_comp="swapcomp($event)"></component>
</transition>
</div>
<template id="signup-form">
<form>
<div class="form-group">
<label for="email">Email</label>
<input type="text" v-model="email" />
<span v-if="email.length > 1">{{ email_msg }}</span>
</div>
<div class="form-group">
<label for="psw1">Password <span id="characters">(6 or more characters required)</span></label>
<input type="password" v-model="password1" />
<span v-show="msg1">{{ pwd1_msg }}</span>
</div>
<div class="form-group">
<label for="psw2">Repeat Password</label>
<input type="password" v-model="password2" />
<span v-show="msg2">{{ pwd2_msg }}</span>
</div>
<div class="form-group">
<button :class="{active: disable_btn}":disabled="disable_btn" @click.prevent="on_signup()">Sign Up</button>
<a href="#0" @click="show_terms()">terms & conditions</a>
</div>
</form>
</template>
<template id="results">
<div class="results">
<h4>FORM SUBMIT SUCCESSFUL</h4>
<p>Form data gets saved and/or sent to server. There could also be a confirmation sent to email address</p>
<p>Button would take you to some sort of after signup page.<br>In this case it just shows the form again</p>
<button @click="back_to_signup()">Continue</button>
</div>
</template>
<template id="terms">
<div class="terms">
<h4>TERMS & CONDITIONS</h4>
<p>A list of terms, conditions, and policies.</p>
<button @click="back_to_signup()">Back</button>
</div>
</template>
</div>
2. CSS Code
@import url('https://fonts.googleapis.com/css?family=Roboto');
$green-dark: #79CB0A;
$green-light: #B5D020;
$orange-dark: #FF8700;
$orange-light: #FFB100;
$red: #FF3400;
$grey: #8F949B;
* {
box-sizing: border-box;
}
body {
height: 100%;
font-family: 'Roboto', sans-serif;
background: linear-gradient(to left, $green-dark , $green-light);
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
header {
margin: 30px 0;
text-align: center;
h2 {
text-transform: uppercase;
margin: 0;
}
p {
font-size: 1em;
}
a {
text-decoration: none;
border-bottom: 2px dotted $orange-dark;
color: inherit;
}
}
.signup {
width: 700px;
height: 460px;
position: relative;
overflow: hidden;
box-shadow: 10px 10px 60px rgba(0, 0, 0, .4);
display: flex;
justify-content: flex-end;
align-items: center;
border-radius: 5px;
}
.signup:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
transform: scaleX(-1);
z-index: -1;
background: url(https://source.unsplash.com/Qmox1MkYDnY/900x500) no-repeat;
}
form {
width: 50%;
height: 80%;
padding: 20px 50px 20px 20px;;
}
form .form-group {
display: flex;
flex-direction: column;
margin: 0 0 20px 0;
color: $grey;
font-size: .9em;
label {
margin: 0 0 16px 0;
}
span {
font-size: .8em;
color: $red;
}
span#characters {
font-size: .8em;
color: $grey;
}
}
.form-group input[type="text"],
.form-group input[type="password"] {
border: none;
outline: none;
background: transparent;
padding: 0 0 10px 0;
font-size: 1em;
border-bottom: 1px dotted $grey;
}
.form-group input[type="password"] {
color: $red;
}
form .form-group:last-child {
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 40px 0 0 0;
button {
border: none;
background: linear-gradient(to left, $orange-dark , $orange-light);
padding: 10px 30px;
border-radius: 20px;
color: #FFFFFF;
font-size: .8em;
font-weight: bold;
letter-spacing: 1px;
cursor: pointer;
}
button.active {
opacity: .5;
cursor: default;
}
a {
color: $grey;
text-decoration: dotted;
font-size: .8em;
}
}
.results, .terms {
width: 50%;
height: 80%;
padding: 20px 50px 20px 20px;
}
.fade-enter-active, .fade-leave-active {
transition: all .8s;
}
.fade-enter, .fade-leave-active {
opacity: 0;
transform: translateX(-40px);
}
3. Javascript Code
var SignupForm = Vue.component('signup-form', {
// TEMPLATE
template: '#signup-form',
// DATA
data() {
return {
email: '',
email_msg: '',
password1: '',
pwd1_msg: '',
password2: '',
pwd2_msg: '',
disable_btn: true,
msg1: true,
msg2: true
}
},
// WATCH
watch: {
email: function(value) {
this.valid_email(value, 'email_msg');
},
password1: function(value) {
if(this.check_password_length(value, 'pwd1_msg', 6)) {
this.check_passwords_match();
}
},
password2: function(value) {
if(this.check_password_length(value, 'pwd2_msg', 6)) {
this.check_passwords_match();
}
}
},
// METHODS
methods: {
valid_email(email, msg) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
this[msg] = '';
return true;
} else {
this[msg] = 'Keep typing...waiting for a valid email';
return false;
}
},
check_password_length(value, msg, total) {
var length = value.length;
var sum = 0;
var display;
sum = (total - length);
switch(sum) {
case 0:
display = '';
break;
case 1:
display = 'Keep going - just need '+ sum + ' more character.';
break;
default:
display = 'Keep going - just need '+ sum + ' more characters';
}
if(length >= total) {
this[msg] = '';
return true;
} else {
this[msg] = display;
return false;
}
},
check_passwords_match() {
if(this.password1.length > 5 && this.password2.length > 5) {
if(this.password2 != this.password1) {
this.pwd2_msg = 'Passwords do not match';
this.disable_btn = true;
return true;
} else {
this.pwd2_msg = '';
this.disable_btn = false;
return false;
}
}
},
on_signup() {
this.email = '';
this.password1 = '';
this.password2 = '';
this.email_msg = '';
this.pwd1_msg = '';
this.pwd2_msg = '';
this.msg1 = false;
this.msg2 = false;
this.disable_btn = true;
this.$emit('change_comp', 'results');
},
show_terms() {
this.$emit('change_comp', 'terms');
}
}
});
var Results = Vue.component('results', {
// TEMPLATE
template: '#results',
// METHODS
methods: {
back_to_signup() {
this.$emit('change_comp', 'signup-form');
}
}
});
var Terms = Vue.component('terms', {
// TEMPLATE
template: '#terms',
// METHODS
methods: {
back_to_signup() {
this.$emit('change_comp', 'signup-form');
}
}
});
new Vue({
// ELEMENT
el: '#app',
// DATA
data: {
compname: 'signup-form'
},
// COMPONENTS
components: {
'signup-form': SignupForm,
'results': Results,
'terms': Terms
},
methods: {
swapcomp: function(comp) {
this.compname = comp;
}
}
});
I hope you did find this tutorial useful!
For more web development or UI/UX design tutorials, follow us on:
Other useful resources:
