JSFiddle - React, Tailwind, and code Playground

by Dan Wright

HTML

<body>
    <div id="formContainer">
        <div class="formHeader">
             <h2>Get in touch</h2>

        </div>
        <form id="contactForm" action="" method="post">
            <p class="formLabel">First Name</p>
            <input type="text" name="name" value=""/>
            <p class="formLabel">Surname Name</p>
            <input type="text" name="surname" />
            <p>Reason for Message</p>
            <select name="contactReason" size="1">
                <option value="Low">Work Opportunity</option>
                <option value="Normal">Question</option>
                <option value="High">Advice</option>
                <option value="Emergency">Other</option>
            </select>
            <p class="formLabel">Contact Email</p>
            <input type="email" name="email" />
            <p class="formLabel">Message</p>
            <textarea name="message" maxlength="1000"></textarea>
            <div class="formFooter">
                <div class="formFoot2Col">
                    <input id="submitForm" type="submit" value="submit" />
                </div>
                <div class="formFoot2Col">
                    <input id="resetForm" type="reset" value="Clear" />
                </div>
            </div>
        </form>
    </div>
</body>

CSS

/* Contact Form */
 #formContainer {
    height:700px;
    width:480px;
    margin:0 auto;
    background-color:white;
}
.formHeader {
    height:100%;
    max-height:47px;
    width:100%;
    max-width:480px;
    background-color: #d5d5d5;
    padding:10px;
    margin:0;
}
#formContainer h2 {
    padding:0;
    margin:0;
}
form.formContact {
    width:100%;
    max-width:400px;
    height:auto;
    padding:10px;
    margin:0 auto;
    background-color: #efefef;
}
form p {
    text-align:left;
    margin:10px;
    padding-left:30px;
}
.error {
    color: #FF0000;
}
/*span {
    opacity : 0;
    filter : alpha(opacity=0);
}
span.formHelp, span.formError, span.formComp {
    font-size:0.75em;
    font-style:italic;
    padding-left:10px;
}
span.formHelp {
    color:blue;
}
span.formError {
    color:red;
}
span.formComp {
    color:green;
}*/
 label.formLabel {
    display:block;
    height:25px;
    width:100%;
    max-width:400px;
    padding-top:10px;
    font-size:1em;
    margin:0 auto;
}
label.formLabel, input, textarea, select {
    letter-spacing:2px;
}
select {
}
input, textarea {
    width:100%;
    max-width:398px;
    padding:0;
    margin:0 auto;
    text-indent:5px;
    border:1px solid #d5d5d5;
}
input:focus, textarea:focus {
    border:1px solid #97d6eb;
}
textarea {
    resize:none;
    height:324px;
}
input {
    height:27px;
}
.required {
    background:rgb(248, 106, 86);
    background:rgba(248, 106, 86, 0.3);
    /* background-color:#FCC0B8; 
       opacity : 0.2;
       filter : alpha(opacity=20); */
}
.voluntary {
    background:rgb(173, 255, 47);
    background:rgba(173, 255, 47, 0.3);
}
.complete {
    background:rgb(0, 140, 0);
    background:rgba(0, 140, 0, 0.3);
    /* background-color:#008c00; */
}
.cursorFocusRequired {
    background:rgb(248, 106, 86);
    background:rgba(248, 106, 86, 0.1);
}
.cursorFocusVoluntary {
    background:rgb(173, 255, 47);
    background:rgba(173, 255, 47, 0.1);
}
.formFooter {
    position:absolute;
   ...

JavaScript

$('form').submit(function () {

    var valid = true,
    message = "";

    $('input, textarea').each(function () {
        var $this = $(this);

        if (!$this.val()) {
            var inputName = $this.attr('name');
            valid = false;
            message += 'Please enter your ' + inputName + '\n';
        } 
    });

    if (!valid) {
        alert(message);
        return false;
    } else if (valid) {
        alert('All ok');
        return true;
    }
});