Styled Contact Form - jQuery Validate

Developer
EricPorter
Size
4,663 Kb
Views
24,288
  1. Styled Contact Form - jQuery Validate Previews
  2. Styled Contact Form - jQuery Validate HTML Codes
  3. Styled Contact Form - jQuery Validate CSS Codes
  4. Styled Contact Form - jQuery Validate JS Codes

How do I make an styled contact form - jquery validate?

Styled Contact Form with jQuery Validation and sliding labels.. What is a styled contact form - jquery validate? How do you make a styled contact form - jquery validate? This script and codes were developed by EricPorter on 03 September 2022, Saturday.

Styled Contact Form - jQuery Validate Previews
IQ Test

Styled Contact Form - jQuery Validate - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Styled Contact Form - jQuery Validate</title> <link href='https://fonts.googleapis.com/css?family=Raleway:100,400,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,100,700,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *::before, *::after { box-sizing: border-box;
}
*:focus { outline: none;
}
html, body { height: 100%;
}
.flexCenter, body { height: 100%; display: flex; align-items: center; justify-content: center;
}
body { background: #111; font-size: 16px; color: #999999; font-family: 'Raleway';
}
h1 { font-size: 3em; margin: 0 0 30px 0;
}
form { padding: 3px; outline: 3px solid black; background-color: #0a0a0a; position: relative; width: 400px; margin: 0 20px;
}
.input-block { position: relative; overflow: hidden;
}
input,
textarea { font-family: 'Alegreya Sans'; border: none; padding: 25px; color: #999999; font-size: 1em; line-height: 1.5; letter-spacing: .8px; background: black; width: 100%; margin-bottom: 0; opacity: 1; border: 0; transition: all 0.2s ease;
}
textarea { overflow: auto; resize: none; min-height: 8em;
}
input[type=submit] { color: #262626; background: black; border: none; padding: 5px 5px 2px 5px; text-transform: uppercase; position: relative; cursor: pointer; font-size: 1.2em; font-weight: 700; transition: none;
}
input[type=submit]:hover, input[type=submit]:focus, input[type=submit]:active { color: #262626; outline: 1px solid #262626;
}
input ~ label,
textarea ~ label { position: absolute; width: 100%; top: 5px; left: 10px; text-align: left; display: inline-block; font-size: 4em; font-weight: 100; color: #262626; pointer-events: none; transition: all 0.3s ease; text-transform: uppercase; padding-right: 20px; transform-origin: right top;
}
input:focus ~ label,
textarea:focus ~ label { transition: all 0.5s ease; transform: translate(-100%); opacity: 0;
}
input:focus.error ~ label,
textarea.error:focus ~ label { opacity: 0;
}
input.error ~ label,
textarea.error ~ label { transition: all 0.5s ease; opacity: 1; text-align: right;
}
input.valid,
textarea.valid { border-left: 4px solid rgba(0, 255, 0, 0.2);
}
input.error,
textarea.error { border-left: 4px solid rgba(255, 0, 0, 0.2);
}
label.error { display: none !important;
}
input.valid ~ label,
textarea.valid ~ label { display: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <form id="contactForm" method="post"> <div id="inputs"> <div class="input-block"> <input class="input-text" type="text" name="name" tabindex="1" /> <label for="form-email" class="form-label">Name</label> </div> <div class="input-block"> <input class="input-text" type="text" name="email" tabindex="2" /> <label for="form-email" class="form-label">Email</label> </div> <div class="input-block"> <textarea class="input-text" name="comment" tabindex="3"></textarea> <label for="form-email" class="form-label">Mssg</label> </div> </div> <input type="submit" class="contact-button" id="submit" value="Send It" tabindex="4" />
</form> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Styled Contact Form - jQuery Validate - Script Codes CSS Codes

*, *::before, *::after { box-sizing: border-box;
}
*:focus { outline: none;
}
html, body { height: 100%;
}
.flexCenter, body { height: 100%; display: flex; align-items: center; justify-content: center;
}
body { background: #111; font-size: 16px; color: #999999; font-family: 'Raleway';
}
h1 { font-size: 3em; margin: 0 0 30px 0;
}
form { padding: 3px; outline: 3px solid black; background-color: #0a0a0a; position: relative; width: 400px; margin: 0 20px;
}
.input-block { position: relative; overflow: hidden;
}
input,
textarea { font-family: 'Alegreya Sans'; border: none; padding: 25px; color: #999999; font-size: 1em; line-height: 1.5; letter-spacing: .8px; background: black; width: 100%; margin-bottom: 0; opacity: 1; border: 0; transition: all 0.2s ease;
}
textarea { overflow: auto; resize: none; min-height: 8em;
}
input[type=submit] { color: #262626; background: black; border: none; padding: 5px 5px 2px 5px; text-transform: uppercase; position: relative; cursor: pointer; font-size: 1.2em; font-weight: 700; transition: none;
}
input[type=submit]:hover, input[type=submit]:focus, input[type=submit]:active { color: #262626; outline: 1px solid #262626;
}
input ~ label,
textarea ~ label { position: absolute; width: 100%; top: 5px; left: 10px; text-align: left; display: inline-block; font-size: 4em; font-weight: 100; color: #262626; pointer-events: none; transition: all 0.3s ease; text-transform: uppercase; padding-right: 20px; transform-origin: right top;
}
input:focus ~ label,
textarea:focus ~ label { transition: all 0.5s ease; transform: translate(-100%); opacity: 0;
}
input:focus.error ~ label,
textarea.error:focus ~ label { opacity: 0;
}
input.error ~ label,
textarea.error ~ label { transition: all 0.5s ease; opacity: 1; text-align: right;
}
input.valid,
textarea.valid { border-left: 4px solid rgba(0, 255, 0, 0.2);
}
input.error,
textarea.error { border-left: 4px solid rgba(255, 0, 0, 0.2);
}
label.error { display: none !important;
}
input.valid ~ label,
textarea.valid ~ label { display: none;
}

Styled Contact Form - jQuery Validate - Script Codes JS Codes

$(document).ready(function() { $('#contactForm').validate({ debug: true, rules: { name: { required: true, minlength: 2 }, email: { required: true, email: true }, comment: { required: true, minlength: 2 } } });
});
Styled Contact Form - jQuery Validate - Script Codes
Styled Contact Form - jQuery Validate - Script Codes
Home Page Home
Developer EricPorter
Username EricPorter
Uploaded September 03, 2022
Rating 3
Size 4,663 Kb
Views 24,288
Do you need developer help for Styled Contact Form - jQuery Validate?

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!

EricPorter (EricPorter) Script Codes
Name
Graphs - animated on scroll, responsive, data-driven
Video - Responsive - Embed
Lazy Loading
Mobile accordion dropdown nav - animation
Image Hover Effects
Add a Vignette to an image
3d font animation - 1 class
CSS Magnifying Glass
Webpage Hero header - scroll effects
Scroll Image Reveal effects
Create amazing video scripts 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!