Articles
Snippets
Categories
Quiz
Encryption
Base64 Encode
Base64 Decode
MD5 Hash
SHA1 Hash
SHA256 Hash
SHA512 Hash
URL Encode
URL Decode
Tools
Password generator
IP Locator
Website Down Detector
Character count
Json Formatter
JavaScript Formatter
HTML Formatter
CSS Formatter
Convert
XML to Json
Json to XML
Works with Us
Animated contact us page
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Animated contact us form</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'> <link href="http://dev.see8ch.com/see8ch/v3/fonts/ss-social/ss-social.css" rel="stylesheet" /> <link href="http://dev.see8ch.com/see8ch/v3/fonts/ss-standard/ss-standard.css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <section id="hire"> <h1>Contact Us</h1> <form action="#" method="post"> <div class="field name-box"> <input type="text" id="name" placeholder="Your Name here"/> <label for="name">Name</label> <span class="ss-icon">check</span> </div> <div class="field email-box"> <input type="text" id="email" placeholder="username@email.com"/> <label for="email">Email</label> <span class="ss-icon">check</span> </div> <div class="field msg-box"> <textarea id="msg" rows="4" placeholder="Your message here"/></textarea> <label for="msg">Msg</label> <span class="ss-icon">check</span> </div> <input class="button" type="submit" value="Send" /> </form> </section> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html>
CSS
body { background: #efefef; font-size: 62.5%; font-family: "Lato", sans-serif; font-weight: 300; color: #B6B6B6; } body section { background: white; margin: 60px auto 120px; border-top: 15px solid #313A3D; text-align: center; padding: 50px 0 110px; width: 80%; max-width: 1100px; } body section h1 { margin-bottom: 40px; font-size: 4em; text-transform: uppercase; font-family: "Lato", sans-serif; font-weight: 100; } form { width: 58.3333333333%; margin: 0 auto; } form .field { width: 100%; position: relative; margin-bottom: 15px; } form .field label { text-transform: uppercase; position: absolute; top: 0; left: 0; background: #313A3D; width: 100%; padding: 18px 0; font-size: 1.45em; letter-spacing: 0.075em; -webkit-transition: all 333ms ease-in-out; -moz-transition: all 333ms ease-in-out; -o-transition: all 333ms ease-in-out; -ms-transition: all 333ms ease-in-out; transition: all 333ms ease-in-out; } form .field label + span { font-family: "SSStandard"; opacity: 0; color: white; display: block; position: absolute; top: 12px; left: 7%; font-size: 2.5em; text-shadow: 1px 2px 0 #cd6302; -webkit-transition: all 333ms ease-in-out; -moz-transition: all 333ms ease-in-out; -o-transition: all 333ms ease-in-out; -ms-transition: all 333ms ease-in-out; transition: all 333ms ease-in-out; } form .field input[type=text], form .field textarea { border: none; background: #E8E9EA; width: 80.5%; margin: 0; padding: 18px 0; padding-left: 19.5%; color: #313A3D; font-size: 1.4em; letter-spacing: 0.05em; text-transform: uppercase; } form .field input[type=text]#msg, form .field textarea#msg { height: 18px; resize: none; -webkit-transition: all 333ms ease-in-out; -moz-transition: all 333ms ease-in-out; -o-transition: all 333ms ease-in-out; -ms-transition: all 333ms ease-in-out; transition: all 333ms ease-in-out; } form .field input[type=text]:focus, form .field input[type=text].focused, form .field textarea:focus, form .field textarea.focused { outline: none; } form .field input[type=text]:focus#msg, form .field input[type=text].focused#msg, form .field textarea:focus#msg, form .field textarea.focused#msg { padding-bottom: 150px; } form .field input[type=text]:focus + label, form .field input[type=text].focused + label, form .field textarea:focus + label, form .field textarea.focused + label { width: 18%; background: #FD9638; color: #313A3D; } form .field input[type=text].focused + label, form .field textarea.focused + label { color: #FD9638; } form .field:hover label { width: 18%; background: #313A3D; color: white; } form input[type=submit] { background: #FD9638; color: white; -webkit-appearance: none; border: none; text-transform: uppercase; position: relative; padding: 13px 50px; font-size: 1.4em; letter-spacing: 0.1em; font-family: "Lato", sans-serif; font-weight: 300; -webkit-transition: all 333ms ease-in-out; -moz-transition: all 333ms ease-in-out; -o-transition: all 333ms ease-in-out; -ms-transition: all 333ms ease-in-out; transition: all 333ms ease-in-out; } form input[type=submit]:hover { background: #313A3D; color: #FD9638; } form input[type=submit]:focus { outline: none; background: #cd6302; }
Javascript
$('textarea').blur(function () { $('#hire textarea').each(function () { $this = $(this); if ( this.value != '' ) { $this.addClass('focused'); $('textarea + label + span').css({'opacity': 1}); } else { $this.removeClass('focused'); $('textarea + label + span').css({'opacity': 0}); } }); }); $('#hire .field:first-child input').blur(function () { $('#hire .field:first-child input').each(function () { $this = $(this); if ( this.value != '' ) { $this.addClass('focused'); $('.field:first-child input + label + span').css({'opacity': 1}); } else { $this.removeClass('focused'); $('.field:first-child input + label + span').css({'opacity': 0}); } }); }); $('#hire .field:nth-child(2) input').blur(function () { $('#hire .field:nth-child(2) input').each(function () { $this = $(this); if ( this.value != '' ) { $this.addClass('focused'); $('.field:nth-child(2) input + label + span').css({'opacity': 1}); } else { $this.removeClass('focused'); $('.field:nth-child(2) input + label + span').css({'opacity': 0}); } }); });
Run Code
Copyright 2022 HackTheStuff