Basic Form

by Robert Herring

HTML

<form id="form" class="sendEmail" action="yourhouse.asp" method="post">
    <input id="fname" name="fname" type="text" autocorrect=off autocapitalize=words tabindex="1" placeholder="First Name *" class="required"/>
    <input id="lname" name="lname" type="text" autocorrect=off autocapitalize=words tabindex="2" placeholder="Last Name *" class="required"/>
    <input id="email" name="email" type="text" autocorrect=off tabindex="3" placeholder="Your Email *" class="email required"/>
    <input id="phone" name="phone" type="text" tabindex="4" placeholder="Phone Number *" class="required"/>
    
    <div class="realTest" title="We just want to make sure you're from this planet and not a robot.">
        <label class="title" for="humanTest">Check for Human</label>
        <input type="text" name="humanTest" id="humanTest" tabindex="-1" placeholder="Leave this field blank. *"/>
    </div>
    <div class="submitForm">
        <input type="submit" name="submit" class="button" id="submit_btn" tabindex="5" value="Submit Request" />
        <!--<input type="reset" name="reset" value="Reset Form" />-->
    </div>
</form>
<p class="output"></p>

CSS

* {
    margin: 0;
    padding: 0:
}
form {
    display:flex;
    flex-flow: row wrap;
}
form > * {
    flex: 1 100%;
    margin: 5px;
}
input {
    padding: 5px;
    border: 1px solid #ccc;
    transition: all 1s;
}
input:hover {
    background: #4679BD;
    color: #ffffff;
}
input[type="submit"] {
    float: right;
}
.error {
    border: 1px solid #FF0000;
    background:#FFE5E5;
}

.output {
    padding: 10px;
}

JavaScript

$(document).ready(function () {
    $('.sendEmail').submit(function(e) {
        e.preventDefault();
        
        var fname = $("#fname").val(),
            lname = $("#lname").val(),
            email = $("#email").val(),
            phone = $("#phone").val(),
            human = $("#humanTest").val(),
            
            info = fname + " " + lname + " | " + email + " | " + phone,
            error = false;
        
        if (fname == "") {
            $("#fname").addClass("error");
            error = true;
            $("#fname").data("error", true);
        }
        $('#fname').keypress(function() {
            if ($(this).data("error") == true) {
                $("#fname").data("error", false);
                $("#fname").removeClass("error");
            }
        });
        
        if (lname == "") {
            $("#lname").addClass("error");
            error = true;
            $("#lname").data("error", true);
        }
        $('#lname').keypress(function() {
            if ($(this).data("error") == true) {
                $("#lname").data("error", false);
                $("#lname").removeClass("error");
            }
        });
        
        if (email == "") {
            $("#email").addClass("error");
            error = true;
            $("#email").data("error", true);
        }
        $('#email').keypress(function() {
            if ($(this).data("error") == true) {
                $("#email").data("error", false);
                $("#email").removeClass("error");
            }
        });
        
        if (phone == "") {
            $("#phone").addClass("error");
            error = true;
            $("#phone").data("error", true);
        }
        $('#phone').keypress(function() {
            if ($(this).data("error") == true) {
                $("#phone").data("error", false);
                $("#phone").removeClass("error");
            }
        });
        
        if (human != "") {
           ...