Simple Contact Form
A simple yet "smart" contact form using HTML, CSS and JS. This fiddle uses JavaScript's RegExp to check values and alert the user by changing the input color.
by Ian Hazzard
HTML
<div class="body">If you have any questions about me, my teaching or curriculum, etc., please don't hesitate to contact me here. Please fill out all the fields in this form..
<br/>
<br/>
<form name="contact-me" class="contact-me" method="POST" action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" autocomplete="off">First Name:
<input type="text" name="fname" id="fname" onkeyup="warnValue(this)" onblur="blurWarnValue(this)" />Last Name:
<input type="text" name="lname" id="lname" onkeyup="warnValue(this)" onblur="blurWarnValue(this)" />Email Address:
<input type="text" name="email" id="email" onkeyup="warnValue(this)" onblur="blurWarnValue(this)" />Message:
<textarea name="message" id="message" onkeyup="warnValue(this)" onblur="blurWarnValue(this)"></textarea>
</form>
<button onclick="warnSubmit()">Send</button>
</div>CSS
.body {
text-align: center;
}
.success {
color: green;
box-shadow: inset 0px 0px 15px green;
-webkit-box-shadow: inset 0px 0px 15px green;
-moz-box-shadow: inset 0px 0px 15px green;
}
#message.success {
color: green;
box-shadow: inset 0px 0px 15px green;
-webkit-box-shadow: inset 0px 0px 15px green;
-moz-box-shadow: inset 0px 0px 15px green;
}
.success:focus {
color: white;
box-shadow: inset 0px 0px 60px 5px green;
-webkit-box-shadow: inset 0px 0px 60px 5px green;
-moz-box-shadow: inset 0px 0px 60px 5px green;
}
#message.success:focus {
color: white;
box-shadow: inset 0px 0px 120px 5px green;
-webkit-box-shadow: inset 0px 0px 120px 5px green;
-moz-box-shadow: inset 0px 0px 120px 5px green;
}
.error {
color: red;
box-shadow: inset 0px 0px 15px red;
-webkit-box-shadow: inset 0px 0px 15px red;
-moz-box-shadow: inset 0px 0px 15px red;
}
#message.error {
color: red;
box-shadow: inset 0px 0px 15px red;
-webkit-box-shadow: inset 0px 0px 15px red;
-moz-box-shadow: inset 0px 0px 15px red;
}
.error:focus {
color: white;
box-shadow: inset 0px 0px 60px 5px red;
-webkit-box-shadow: inset 0px 0px 60px 5px red;
-moz-box-shadow: inset 0px 0px 60px 5px red;
}
#message.error:focus {
color: white;
box-shadow: inset 0px 0px 120px 5px red;
-webkit-box-shadow: inset 0px 0px 120px 5px red;
-moz-box-shadow: inset 0px 0px 120px 5px red;
}
input[type=text], textarea {
-webkit-appearance: none;
-moz-appearance: none;
}
.contact-me {
text-align:center;
}
input {
display:block;
padding: 7px;
margin-left:auto;
margin-right:auto;
text-align:center;
border-radius:3px;
outline:none;
border:none;
background-color: transparent;
box-shadow: inset 0px 0px 15px black;
-webkit-box-shadow: inset 0px 0px 15px black;
-moz-box-shadow: inset 0px 0px 15px black;
font-family:"Century Gothic", "Apple Gothic",...JavaScript
var nameCheck = /^[a-zA-Z]+$/;
var emailCheck = /^.+\@.+\..+$/;
var messageCheck = /(?=.*?\w)(?=.*?\s)/;
function warnValue(input) {
if (input.id === "fname" || input.id === "lname") {
if (!nameCheck.test(input.value)) {
if (input.className === "success") {
input.className = "error";
}
}
if (nameCheck.test(input.value)) {
if (input.className === "error") {
input.className = "success";
}
}
}
if (input.id === "email") {
if (!emailCheck.test(input.value)) {
if (input.className === "success") {
input.className = "error";
}
}
if (emailCheck.test(input.value)) {
input.className = "success";
}
}
if (input.id === "message") {
if (!/.+/.test(input.value)) {
input.className = "error";
}
if (/.+/.test(input.value)) {
input.className = "";
}
}
}
function blurWarnValue(input) {
if (input.id === "fname" || input.id === "lname") {
if (!nameCheck.test(input.value)) {
input.className = "error";
}
if (nameCheck.test(input.value)) {
input.className = "success";
}
}
if (input.id === "email") {
if (!emailCheck.test(input.value)) {
input.className = "error";
}
if (emailCheck.test(input.value)) {
input.className = "success";
}
}
if (input.id === "message") {
if (!messageCheck.test(input.value)) {
input.className = "error";
}
if (messageCheck.test(input.value)) {
input.className = "success";
}
}
}
function warnSubmit() {
var error = [];
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var email =...