Sign Up Form

Developer
Sicontis
Size
5,272 Kb
Views
62,744
  1. Sign Up Form Previews
  2. Sign Up Form HTML Codes
  3. Sign Up Form CSS Codes
  4. Sign Up Form JS Codes

How do I make an sign up form?

Took a random design in the Sign up Form category from Collect UI. Trying to recreate it in CSS and validate form with Vue JS. Had to use different cat image from Unsplash.. What is a sign up form? How do you make a sign up form? This script and codes were developed by Sicontis on 11 July 2022, Monday.

Sign Up Form Previews
IQ Test

Sign Up Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sign Up Form</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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> <script src='https://unpkg.com/[email protected]/dist/vue.js'></script>
<script src='https://unpkg.com/[email protected]/dist/vue-router.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sign Up Form - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Roboto");
* { box-sizing: border-box;
}
body { height: 100%; font-family: 'Roboto', sans-serif; background: linear-gradient(to left, #79CB0A, #B5D020);
}
.container { display: flex; flex-direction: column; justify-content: center; align-items: center;
}
header { margin: 30px 0; text-align: center;
}
header h2 { text-transform: uppercase; margin: 0;
}
header p { font-size: 1em;
}
header a { text-decoration: none; border-bottom: 2px dotted #FF8700; color: inherit;
}
.signup { width: 700px; height: 460px; position: relative; overflow: hidden; box-shadow: 10px 10px 60px rgba(0, 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: #8F949B; font-size: .9em;
}
form .form-group label { margin: 0 0 16px 0;
}
form .form-group span { font-size: .8em; color: #FF3400;
}
form .form-group span#characters { font-size: .8em; color: #8F949B;
}
.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 #8F949B;
}
.form-group input[type="password"] { color: #FF3400;
}
form .form-group:last-child { flex-direction: row; justify-content: space-between; align-items: center; margin: 40px 0 0 0;
}
form .form-group:last-child button { border: none; background: linear-gradient(to left, #FF8700, #FFB100); padding: 10px 30px; border-radius: 20px; color: #FFFFFF; font-size: .8em; font-weight: bold; letter-spacing: 1px; cursor: pointer;
}
form .form-group:last-child button.active { opacity: .5; cursor: default;
}
form .form-group:last-child a { color: #8F949B; 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);
}

Sign Up Form - Script Codes JS Codes

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; } }
});
Sign Up Form - Script Codes
Sign Up Form - Script Codes
Home Page Home
Developer Sicontis
Username Sicontis
Uploaded July 11, 2022
Rating 3.5
Size 5,272 Kb
Views 62,744
Do you need developer help for Sign Up Form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sicontis (Sicontis) Script Codes
Name
A Pen by Sicontis
Striped Sliding Navigation
Bank Quick Transfer Interface Vue JS
Simple Day Timer
Magazine Layout - Contents Page
3D Flip Subscribe Button
Subnav Reveal Animation
Form Elements
TV Search for Latest Episode
VueJS Todo App
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!