Sign Up Form

Developer
Andy Tran
Size
4,578 Kb
Views
18,216
  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?

Simple Sign Up form by Mohammad Shehbaaz on Dribbble.https://dribbble.com/shots/1819287-Register-Form?list=shots&sort=popular&timeframe=now&offset=387. What is a sign up form? How do you make a sign up form? This script and codes were developed by Andy Tran on 28 November 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> <script src="//use.typekit.net/bzf3ugx.js"></script>
<script>try{Typekit.load();}catch(e){}</script> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container'> <header> <h2>Sign up, it’s free</h2> <p>It is a long established fact that a reader will be distracted</p> </header> <!-- / START Form --> <div class='form'> <form> <div class='field'> <label for='username'>Username</label> <input id='username' name='username' type='text' value='Andy Tran'> </div> <div class='field'> <label for='email'>Email Address</label> <input id='email' name='email' type='email' value='[email protected]'> </div> <div class='field'> <label for='password'>Password</label> <input id='password' name='password' type='password' value='password'> </div> <div class='field'> <label for='rpassword'>Repeat Password</label> <input id='rpassword' name='rpassword' type='password' value='password'> </div> <div class='checkbox'> <input id='checkbox' name='checkbox' type='checkbox'> <label for='checkbox'> By signing up, you agree with the <a href='#'>terms and conditions</a> </label> </div> <button>Sign Up</button> </form> </div> <!-- / END Form --> <footer> Made with <i class='fa fa-heart animated infinite pulse'></i> by <a href='http://andytran.me'>Andy Tran</a> </footer>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sign Up Form - Script Codes CSS Codes

/* Form Styles */
body { background: #f8f8f8; font-family: 'proxima-nova', sans-serif; font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.container { width: 600px; margin: 80px auto;
}
.container header { text-align: center;
}
.container header h2 { color: #333; font-size: 22px; font-weight: 300; line-height: 24px; margin: 0 0 15px; padding: 0;
}
.container header p { color: #666; margin: 0 0 35px;
}
.container footer { width: 100%; padding: 15px 40px; margin: 0 0 -40px -40px; color: #666; font-size: 12px; text-align: center;
}
.container footer a { color: #333; text-decoration: none;
}
.container footer .fa { color: #e74c3c;
}
/* Magic Starts here */
.form { background: #fff; border: 1px solid #e5e5e5; border-radius: 5px;
}
.form:before,
.form:after { content: ''; display: block; clear: both;
}
.form .field { width: 50%; padding: 20px 20px 5px; border-bottom: 1px solid #e5e5e5; box-sizing: border-box; float: left; transition: 0.3s linear;
}
.form .field:nth-child(2n) { border-left: 1px solid #e5e5e5;
}
.form .field label { color: #a1a1a1; font-size: 12px; font-weight: 600; text-transform: uppercase;
}
.form .field input { outline: none; background: none; width: 100%; border: 0; padding: 5px 0; color: #666; font-family: 'proxima-nova'; font-size: 16px; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: 0.3s linear;
}
.form .checkbox { display: block; clear: both; text-align: center; margin-bottom: 25px; padding-top: 30px; color: #a1a1a1; font-family: 'proxima-nova'; font-size: 12px; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.form .checkbox a { color: #009ddc; text-decoration: none;
}
.form input[type="checkbox"] label { background: #000; height: 30px; border: none;
}
.form button { cursor: pointer; display: block; background: #eb5635; width: 180px; margin: 0 auto; margin-bottom: 40px; padding: 16px 0; border: none; border-radius: 100px; color: #fff; font-family: 'proxima-nova'; font-size: 16px; font-weight: 600; text-transform: uppercase; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: 0.2s linear;
}
.form button:hover { background: #f07d63;
}

Sign Up Form - Script Codes JS Codes

// Credits to Mohammad Shehbaaz for the design
// https://dribbble.com/shots/1819287-Register-Form?list=shots&sort=popular&timeframe=now&offset=387
$('input').bind('focus', function() { $(this).parent('.field').css({ 'background-color' : '#f5f8f9'});
});
$('input').bind('blur', function() { $(this).parent('.field').css({ 'background-color' : 'none'});
});
Sign Up Form - Script Codes
Sign Up Form - Script Codes
Home Page Home
Developer Andy Tran
Username andytran
Uploaded November 28, 2022
Rating 4.5
Size 4,578 Kb
Views 18,216
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!

Andy Tran (andytran) Script Codes
Name
Material Login Form
Flat Payment Modal
Flat Login Form 3.0
Code Module - About FAB
Material Playing Cards
Login Form - Modal
Code Module - Floating Action Menu
Interactive Location Modal
The Team - Grid
Flat Login Form
Create amazing marketing copy 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!