JS Powered Anti-Spam Contact Form

js-powered-anti-spam-contact-form.markdown

JS Powered Anti-Spam Contact Form

This is an anti-spam contact form that doesn't require any server-side scripting languages or a CAPTCHA challenge-response test. It uses elements of a standard contact form along with an external JavaScript file and a mail form file powered by Misk.com.

It's also completely cross-browser compatible and degrades nicely if a user does not have JavaScript enabled in their web browser.

A Pen by Mark Hillard on CodePen.

License.

script.js

// check for valid email address
var emailfilter = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g;
function checkmail(e) {
    var returnval = emailfilter.test(e.value);
    if (returnval === false) {
        alert("Please enter a valid email address!");
        e.select();
    }
    return returnval;
}

// clear default text of fields
function clearText(thefield) {
    if (thefield.defaultValue == thefield.value) thefield.value = "";
}

// keep email address lowercase
function lowerCase(x) {
    var y = document.getElementById(x).value;
    document.getElementById(x).value = y.toLowerCase();
}

style.css

@import url("//fonts.googleapis.com/css?family=Titillium+Web");

html,body { background-color:#333; margin:0; padding:0; }

*,*::before,*::after { box-sizing:border-box; }
*:focus { outline:none; }

input,textarea { appearance:none; background:none; }
input::-moz-focus-inner { border:0; padding:0; }

#form {
font-family:"Titillium Web", arial, sans-serif;
float:left;
margin:28px 0 0 28px;
overflow:auto;
padding:0 0 9px;
position:relative;
}

#form table { margin:0; padding:0; }

#form input[type="submit"],#form input[type="reset"] {
background-color:#666;
border:none;
border-radius:5px;
color:#333;
cursor:pointer;
float:right;
font-family:"Titillium Web", arial, sans-serif;
font-size:21px;
font-weight:400;
margin:10px 0 0 15px;
padding:5px 20px;
text-decoration:none;
transition:all 160ms linear;
}

#form input[type="submit"]:hover,#form input[type="reset"]:hover { background-color:#888; }

#form input[type="text"],#form input[type="email"] {
background-color:#666 !important;
border:none;
border-radius:5px;
color:#E5E5E5;
font-family:"Titillium Web", arial, sans-serif;
font-size:16px;
font-weight:400;
height:43px;
margin:0 0 10px;
overflow:auto;
padding:8px 0 8px 13px;
width:416px;
}

input[type="email"]:required:invalid,input[type="email"]:focus:invalid {
background-image:url("http://www.markhillard.com/images/lock.svg");
background-position:right 8px center;
background-repeat:no-repeat;
background-size:23px 23px;
box-shadow:none;
}

input[type="email"]:required:valid,input[type="email"]:focus:valid {
background-image:url("http://www.markhillard.com/images/unlock.svg");
background-position:right 8px center;
background-repeat:no-repeat;
background-size:23px 23px;
}

#form textarea {
background-color:#666;
border:none;
border-radius:5px;
clear:left;
color:#E5E5E5;
display:block;
float:left;
font-family:"Titillium Web", arial, sans-serif;
font-size:16px;
font-weight:400;
height:241px;
margin:0;
overflow:auto;
padding:8px 0 8px 13px;
resize:none;
width:416px;
}

test.html

<div id="form">
    <form method="post" action="mail.mf" onreset="return confirm('Are you sure you want to reset this form?')" onsubmit="return confirm('Click OK to send your message!')">
        <table>
            <tr><td><input type="text" name="name" value="Name" size="20" onfocus="clearText(this)" onblur="if(this.value == ''){this.value='Name';}"></td></tr>
            <tr><td><input type="email" pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" required name="mail" value="Email Address (Required)" size="20" onfocus="clearText(this)" id="lcase" onchange="lowerCase(this.id)" onblur="if(this.value == ''){this.value='Email Address (Required)';}"></td></tr>
            <tr><td><textarea rows="1" cols="1" name="message" onfocus="clearText(this)" onblur="if(this.value == ''){this.value='Comments / Questions?';}">Comments / Questions?</textarea></td></tr>
            <tr>
                <td>
                    <input type="submit" value="Submit" onclick="return checkmail(this.form.mail)">
                    <input type="reset" value="Reset">
                </td>
            </tr>
        </table>
    </form>
</div>