In the last session, we discussed the Login page in Html with CSS. Now we are going to create a signup form with the help of Html, CSS, and JavaScript.
Sign up form Html content:
It is used by those types of websites used to sell their courses, products, training, ebooks, digital products, etc. This collects the information because it has to sell its services. Without gathering proper information about the users no one can sell their services to their users. So websites and apps have to create a signup or registration form for their company.
This form contains different fields for data. It has two sections. The left section has an image that relates to the type of business. On the right side, we have different fields. Then below this, it has fields.
- Full name
- Username
- Password
- Signup button
So, all these things need to be there in any signup form.
You might like it:
How to create a signup form Html?
It is very simple to create a signup form.
Source code of Html file:
The source code is present below. Create an Html file and name it with the extension of .html and save it in a folder. Html is a markup language and it is used for creating these fields.
<!--Fantacy Design-->
<!--fantacydesign.com-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login V13</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="fonts/Linearicons-Free-v1.0.0/icon-font.min.css">
<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body style="background-color: #999999;">
<div class="limiter">
<div class="container-login100">
<div class="login100-more" style="background-image: url('images/bg-01.jpg');"></div>
<div class="wrap-login100 p-l-50 p-r-50 p-t-72 p-b-50">
<form class="login100-form validate-form">
<span class="login100-form-title p-b-59">
Sign Up
</span>
<div class="wrap-input100 validate-input" data-validate="Name is required">
<span class="label-input100">Full Name</span>
<input class="input100" type="text" name="name" placeholder="Name...">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate = "Valid email is required: [email protected]">
<span class="label-input100">Email</span>
<input class="input100" type="text" name="email" placeholder="Email addess...">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Username is required">
<span class="label-input100">Username</span>
<input class="input100" type="text" name="username" placeholder="Username...">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate = "Password is required">
<span class="label-input100">Password</span>
<input class="input100" type="text" name="pass" placeholder="*************">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate = "Repeat Password is required">
<span class="label-input100">Repeat Password</span>
<input class="input100" type="text" name="repeat-pass" placeholder="*************">
<span class="focus-input100"></span>
</div>
<div class="flex-m w-full p-b-33">
<div class="contact100-form-checkbox">
<input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
<label class="label-checkbox100" for="ckb1">
<span class="txt1">
I agree to the
<a href="#" class="txt2 hov1">
Terms of User
</a>
</span>
</label>
</div>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">
Sign Up
</button>
</div>
<a href="#" class="dis-block txt3 hov1 p-r-30 p-t-10 p-b-10 p-l-30">
Sign in
<i class="fa fa-long-arrow-right m-l-5"></i>
</a>
</div>
</form>
</div>
</div>
</div>
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="vendor/animsition/js/animsition.min.js"></script>
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/select2/select2.min.js"></script>
<script src="vendor/daterangepicker/moment.min.js"></script>
<script src="vendor/daterangepicker/daterangepicker.js"></script>
<script src="vendor/countdowntime/countdowntime.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Source code of CSS file:
Its code is written below. Create a CSS file and save it in the Html folder. Name it with the extension of .css and don’t forget to connect it with an HTML file. . Without using it is impossible to design it.
/*//////////////////////////////////////////////////////////////////
[ FONT ]*/
@font-face {
font-family: Poppins-Regular;
src: url('../fonts/poppins/Poppins-Regular.ttf');
}
@font-face {
font-family: Poppins-Medium;
src: url('../fonts/poppins/Poppins-Medium.ttf');
}
@font-face {
font-family: Poppins-Bold;
src: url('../fonts/poppins/Poppins-Bold.ttf');
}
@font-face {
font-family: Poppins-SemiBold;
src: url('../fonts/poppins/Poppins-SemiBold.ttf');
}
/*//////////////////////////////////////////////////////////////////
[ RESTYLE TAG ]*/
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
/*---------------------------------------------*/
a {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
}
a:focus {
outline: none !important;
}
a:hover {
text-decoration: none;
}
/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
margin: 0px;
}
p {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
}
ul, li {
margin: 0px;
list-style-type: none;
}
/*---------------------------------------------*/
input {
outline: none;
border: none;
}
input[type="number"] {
-moz-appearance: textfield;
appearance: none;
-webkit-appearance: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
textarea {
outline: none;
border: none;
}
textarea:focus, input:focus {
border-color: transparent !important;
}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }
textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; }
input::-webkit-input-placeholder {color: #cccccc;}
input:-moz-placeholder {color: #cccccc;}
input::-moz-placeholder {color: #cccccc;}
input:-ms-input-placeholder {color: #cccccc;}
textarea::-webkit-input-placeholder {color: #cccccc;}
textarea:-moz-placeholder {color: #cccccc;}
textarea::-moz-placeholder {color: #cccccc;}
textarea:-ms-input-placeholder {color: #cccccc;}
/*---------------------------------------------*/
button {
outline: none !important;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
iframe {
border: none !important;
}
/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
font-family: Poppins-Regular;
font-size: 15px;
color: #999999;
line-height: 1.4;
}
.txt2 {
font-family: Poppins-Regular;
font-size: 15px;
color: #666666;
line-height: 1.4;
}
.txt3 {
font-family: Poppins-Regular;
font-size: 16px;
color: #666666;
line-height: 1.4;
}
.hov1:hover {
color: #c87ef0;
}
/*//////////////////////////////////////////////////////////////////
[ login ]*/
.limiter {
width: 100%;
margin: 0 auto;
}
.container-login100 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
align-items: stretch;
flex-wrap: wrap;
}
.wrap-login100 {
width: 520px;
min-height: 100vh;
background: #fff;
border-radius: 2px;
position: relative;
}
/*------------------------------------------------------------------
[ Login100 more ]*/
.login100-more {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: calc(100% - 520px);
position: relative;
z-index: 1;
}
.login100-more::before {
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #e8519e;
background: -webkit-linear-gradient(bottom, #000428 , #c77ff2);
background: -o-linear-gradient(bottom, #614385 , #516395);
background: -moz-linear-gradient(bottom, #ef629f , #516395);
background: linear-gradient(bottom, #e8519e, #ef629f);
opacity: 0.6;
}
/*==================================================================
[ Form ]*/
.login100-form {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.login100-form-title {
display: block;
width: 100%;
font-family: Poppins-Bold;
font-size: 39px;
color: #00cdac;
line-height: 1.2;
text-align: left;
}
/*------------------------------------------------------------------
[ Input ]*/
.wrap-input100 {
width: 100%;
position: relative;
border-bottom: 2px solid #dbdbdb;
margin-bottom: 45px;
}
.label-input100 {
font-family: Poppins-SemiBold;
font-size: 18px;
color: #999999;
line-height: 1.2;
padding-left: 2px;
}
.input100 {
display: block;
width: 100%;
height: 50px;
background: transparent;
font-family: Poppins-Regular;
font-size: 22px;
color: #555555;
line-height: 1.2;
padding: 0 2px;
}
.focus-input100 {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.focus-input100::before {
content: "";
display: block;
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
background-image: linear-gradient(to right, #02aab0 , #00cdac);
}
.input100:focus + .focus-input100::before {
width: 100%;
}
.has-val.input100 + .focus-input100::before {
width: 100%;
}
/*==================================================================
[ Restyle Checkbox ]*/
.input-checkbox100 {
display: none;
}
.label-checkbox100 {
margin: 0;
display: block;
position: relative;
padding-left: 26px;
cursor: pointer;
}
.label-checkbox100::before {
content: "\f00c";
font-family: FontAwesome;
font-size: 13px;
color: transparent;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 16px;
height: 16px;
border-radius: 2px;
background: #e6e6e6;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.input-checkbox100:checked + .label-checkbox100::before {
color: #c87ef0;
}
/*------------------------------------------------------------------
[ Button ]*/
.container-login100-form-btn {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.wrap-login100-form-btn {
display: block;
position: relative;
z-index: 1;
border-radius: 25px;
overflow: hidden;
}
.login100-form-bgbtn {
position: absolute;
z-index: -1;
width: 100%;
height: 300%;
background-image: linear-gradient(to right, #02aab0 , #00cdac);
bottom: -100%;
left: 0;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.login100-form-btn {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
min-width: 244px;
height: 50px;
font-family: Poppins-Medium;
font-size: 16px;
color: #fff;
line-height: 1.2;
}
.wrap-login100-form-btn:hover .login100-form-bgbtn {
bottom: 0;
}
/*------------------------------------------------------------------
[ Alert validate ]*/
.validate-input {
position: relative;
}
.alert-validate::before {
content: attr(data-validate);
position: absolute;
max-width: 70%;
background-color: #fff;
border: 1px solid #c80000;
border-radius: 2px;
padding: 4px 30px 4px 10px;
bottom: calc((100% - 25px) / 2);
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
-ms-transform: translateY(50%);
-o-transform: translateY(50%);
transform: translateY(50%);
right: 2px;
pointer-events: none;
font-family: Poppins-Medium;
color: #c80000;
font-size: 14px;
line-height: 1.4;
text-align: left;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.alert-validate::after {
content: "\f06a";
font-family: FontAwesome;
display: block;
position: absolute;
color: #c80000;
font-size: 18px;
bottom: calc((100% - 25px) / 2);
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
-ms-transform: translateY(50%);
-o-transform: translateY(50%);
transform: translateY(50%);
right: 8px;
}
.alert-validate:hover:before {
visibility: visible;
opacity: 1;
}
@media (max-width: 992px) {
.alert-validate::before {
visibility: visible;
opacity: 1;
}
}
.true-validate::after {
content: "\f26b";
font-family: Material-Design-Iconic-Font;
font-size: 22px;
color: #00ad5f;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: calc((100% - 25px) / 2);
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
-ms-transform: translateY(50%);
-o-transform: translateY(50%);
transform: translateY(50%);
right: 5px;
}
/*//////////////////////////////////////////////////////////////////
[ Responsive ]*/
@media (max-width: 576px) {
.wrap-login100 {
padding-left: 15px;
padding-right: 15px;
}
}
Source code of javascript:
Its code is here. Create a javascript and name it with the extension of .js and save it in the same folder. It can be used for adding functionality and adding validation to our form.
(function ($) {
"use strict";
/*==================================================================
[ Focus Contact2 ]*/
$('.input100').each(function(){
$(this).on('blur', function(){
if($(this).val().trim() != "") {
$(this).addClass('has-val');
}
else {
$(this).removeClass('has-val');
}
})
})
/*==================================================================
[ Validate after type ]*/
$('.validate-input .input100').each(function(){
$(this).on('blur', function(){
if(validate(this) == false){
showValidate(this);
}
else {
$(this).parent().addClass('true-validate');
}
})
})
/*==================================================================
[ Validate ]*/
var input = $('.validate-input .input100');
$('.validate-form').on('submit',function(){
var check = true;
for(var i=0; i<input.length; i++) {
if(validate(input[i]) == false){
showValidate(input[i]);
check=false;
}
}
return check;
});
$('.validate-form .input100').each(function(){
$(this).focus(function(){
hideValidate(this);
$(this).parent().removeClass('true-validate');
});
});
function validate (input) {
if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
return false;
}
}
else {
if($(input).val().trim() == ''){
return false;
}
}
}
function showValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).addClass('alert-validate');
}
function hideValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).removeClass('alert-validate');
}
})(jQuery);
(function ($) {
// USE STRICT
"use strict";
$(document).ready(function () {
var selector_map = $('#google_map');
var img_pin = selector_map.attr('data-pin');
var data_map_x = selector_map.attr('data-map-x');
var data_map_y = selector_map.attr('data-map-y');
var scrollwhell = selector_map.attr('data-scrollwhell');
var draggable = selector_map.attr('data-draggable');
if (img_pin == null) {
img_pin = 'images/icons/location.png';
}
if (data_map_x == null || data_map_y == null) {
data_map_x = 40.007749;
data_map_y = -93.266572;
}
if (scrollwhell == null) {
scrollwhell = 0;
}
if (draggable == null) {
draggable = 0;
}
var style = [
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36
},
{
"color": "#000000"
},
{
"lightness": 40
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 21
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 29
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 18
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 19
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
}
];
var latitude = data_map_x,
longitude = data_map_y,
map_zoom = 14;
var locations = [
['Welcome', latitude, longitude, 2]
];
if (selector_map !== undefined) {
var map = new google.maps.Map(document.getElementById('google_map'), {
zoom: 13,
scrollwheel: scrollwhell,
navigationControl: true,
mapTypeControl: false,
scaleControl: false,
draggable: draggable,
styles: style,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: img_pin
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
});
})(jQuery);Therefore, by using the above methods you can simply create your HTML sign-up form.
If you can’t make it by using this code then we have created a file. It has all these files and you just need to download them for your purpose. Extract files and run them, you will be able to see your output.
If this post was helpful for you then don’t forget to share and comment.
Thanks for reading it.
