Contact Form Spam Protection

Contact Form Spam Protection

I have a client that is tired of getting spammed from his contact form and he has asked me to come up with a way to combat this problem without using a hard to read captcha. Here is what I found. This video explaining how to use JQuery to submit a form on element change. View it here https://www.youtube.com/watch?v=pVnCkotKFLs

The plan is to make a drop down menu the has the default option ( Not Human )  and another option ( I'm Human ) and then give instructions that to fight spam after all the required fields are entered they should then select the "I'm Human" option to prove they are and submit the inquiry. I just can't seem to get it to work. Also how would I get it to redirect to the thank you page on submit and validate the required fields? Sorry I'm a noob. Here is what I have -

 

.js file

 

$(document).ready(function () {

    $('#options').change(function()    {

        value = $(this).attr('value');

        if (value !== 'default')    {

          $(this).parent().submit();   

        }

    });

});

 

 

.html file

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript" src="js/java/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/spam.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

 

</head>

 

<body>

 

<div id="content">

                <h1>Contact Us</h1>

           

           

            <h3>Fields marked with * are required</h3>

           

           

            <div id="contact-form">    

            <form action="/gdform.php" metod="post" name="form1" id="form">

            <p>*NAME<br />

            <input name="name" type="text" id="name" size="30" maxlength="40" />

            </p>

            <br />

            <p>*EMAIL<br />

            <input name="email" type="text" id="email" size="30" maxlength="40" />

            </p>

            <br />

            <p>PHONE<br />

            <input name="phone" type="text" size="30" maxlength="40" />

            </p>

            <p><br />

            *Comments<br />

            <textarea name="comments" cols="50" rows="10" id="comments"></textarea>

            </p>

           

               <select id="options">

              

                       <option value="default">Not Human</option>

                    <option value="opt1">I'm Human</option>

                   

              

               </select>

              <br />

              <br />

              <br />

              <br />

           

              <input type="reset" name="button2" id="button2" value="Reset">

              <input name="recipient" type="hidden" id="recipient" value="myemail@mydomain.com">

              <input name="redirect" type="hidd

              en" id="redirect" value="thankyou.html">

              <br />

 

                <p>

              </p>

            </form>

            </div>

            </div><!-- end content -->

           

 

</body>

</html>