I am re-building an old site to be responsive using Twitter Bootstrap. But just ran into a major roadblock with making a Contact Form. I can make the "form" part easy enough, the HTML and CSS works fine.
*But I can not figure out how to make it send the email and filter or validate the fields (to minimize hacking and bots). Help? * Here is the test page I built: http://easydigging.com/Contact/Contact-2.html It acts as if it works, *but does not actually send an email*. The code is the free version from here: http://www.freecontactform.com/ Many of my customers are elderly and do not like putting their email address in forms, they prefer a phone call... So I want to make only the Message field be required (people can leave Name, Address, Phone fields blank if they wish) AND include some sort of filtering or validation process to prevent hijacking of the Contact Form (like this article http://web-op.com/forms-article.php talks about, and the FreeContactForm appears to do) *My Questions:* 1) can anybody figure out why my Form is not sending me emails? 2) are there other pre-made Contact forms out there that already work well Bootstrap and can be modified as described above? Thanks! Here is the code that is used: Contact-2.html > IN THE PAGE HEAD > <!-- Scripts for FreeContactForm --> > <script src="freecontactformvalidation.js"></script> > <script> > required.add('Full_Name','NOT_EMPTY','Full Name'); > required.add('Email_Address','EMAIL','Email Address'); > required.add('Your_Message','NOT_EMPTY','Your Message'); > required.add('AntiSpam','NOT_EMPTY','Anti-Spam Question'); > </script> > > IN THE PAGE BODY > <form name="freecontactform" method="post" > action="freecontactformprocess.php" onsubmit="return validate.check(this)"> > <fieldset> > > <legend> Contact Form </legend> > <p> We never sell or share your information. </p> > > <label>Your message:</label> > <textarea class="input-block-level" rows="3" name="Your_Message" > id="Your_Message" maxlength="2000"> > </textarea> > > <label>Your Name:</label> > <input class="input-block-level" type="text" > name="Full_Name" id="Full_Name" placeholder="name here…"> > > <label>Email Address:</label> > <input class="input-block-level" type="text" > name="Email_Address" id="Email_Address" placeholder="email > here…"> > > <label>Telephone Number:</label> > <input class="input-block-level" type="text" > name="Telephone_Number" id="Telephone_Number" > placeholder="phone here…"> > <span class="help-block">We need either an email or phone to > reply to you.</span> > > <div style=text-align:center; > > <label><strong>To prevent automated spam, you must answer this > question:</strong></label> > <label>What is 6 + 6 ?</label> > <input class="input-mini" type="text" maxlength="3" > name="AntiSpam" id="AntiSpam" placeholder="number"> > <br/ > > <div class="form-actions"> > <input class="btn btn-large btn-primary" type="submit" > value=" Send Message "> > </div> > </div> > </fieldset> > </form> > JAVASCRIPT freecontactformvalidation.js > function has_id(id){try{var > tmp=document.getElementById(id).value;}catch(e){return false;} > return true;} > function has_name(nm){try{var tmp=cfrm.nm.type;}catch(e){return false;} > return true;} > function $(id){if(!has_id(id)&&!has_name(id)){alert("Field "+id+" does not > exist!\n Form validation configuration error.");return false;} > if(has_id(id)){return document.getElementById(id).value;}else{return;}} > function $val(id){return document.getElementById(id);} > function > trim(id){$val(id).value=$val(id).value.replace(/^\s+/,'').replace(/\s+$/,'');} > var > required={field:[],add:function(name,type,mess){this.field[this.field.length]=[name,type,mess];},out:function(){return > > this.field;},clear:function(){this.field=[];}};var > validate={check:function(cform){var error_message='Please fix the following > errors:\n\n';var mess_part='';var to_focus='';var tmp=true;for(var > i=0;i<required.field.length;i++){if(this.checkit(required.field[i][0],required.field[i][1],cform)){}else{error_message=error_message+required.field[i][2]+' > > must be > supplied\n';if(has_id(required.field[i][0])&&to_focus.length===0){to_focus=required.field[i][0];} > tmp=false;}} > if(!tmp){alert(error_message);} > if(to_focus.length>0){document.getElementById(to_focus).focus();} > return > tmp;},checkit:function(cvalue,ctype,cform){if(ctype=="NOT_EMPTY"){if(this.trim($(cvalue)).length<1){return > > false;}else{return true;}}else > if(ctype=="EMAIL"){exp=/^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;if($(cvalue).match(exp)==null){return > > false;}else{return true;}}},trim:function(s){if(s.length>0){return > s.replace(/^\s+/,'').replace(/\s+$/,'');}else{return s;}}}; > PHP freecontactformsettings.php > <?php > $email_to = "[email protected]"; // ACTUAL CODE IS DIFFERENT. The > word REPLACED is to prevent harvesting. Actual word is contact > $email_subject = "Contact Form Message"; // email subject line > $thankyou = "confirmcontact.html"; // thank you page > $antispam_answer = "12"; > ?> > PHP freecontactformprocess.php > <?php > > if(isset($_POST['Email_Address'])) { > > include 'freecontactformsettings.php'; > > function died($error) { > echo "Sorry, but there were error(s) found with the form you > submitted. "; > echo "These errors appear below.<br /><br />"; > echo $error."<br /><br />"; > echo "Please go back and fix these errors.<br /><br />"; > die(); > } > > if(!isset($_POST['Full_Name']) || > !isset($_POST['Email_Address']) || > !isset($_POST['Telephone_Number']) || > !isset($_POST['Your_Message']) || > !isset($_POST['AntiSpam']) > ) { > died('Sorry, there appears to be a problem with your form > submission.'); > } > > $full_name = $_POST['Full_Name']; // required NOT > $email_from = $_POST['Email_Address']; // required NOT > $telephone = $_POST['Telephone_Number']; // not required > $comments = $_POST['Your_Message']; // required > $antispam = $_POST['AntiSpam']; // required > > $error_message = ""; > > /* $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/'; > if(preg_match($email_exp,$email_from)==0) { > $error_message .= 'The Email Address you entered does not appear to > be valid.<br />'; > } > if(strlen($full_name) < 2) { > $error_message .= 'Your Name does not appear to be valid.<br />'; > } */ > if(strlen($comments) < 2) { > $error_message .= 'The Comments you entered do not appear to be > valid.<br />'; > } > > if($antispam <> $antispam_answer) { > $error_message .= 'The Anti-Spam answer you entered is not correct.<br > />'; > } > > if(strlen($error_message) > 0) { > died($error_message); > } > $email_message = "Form details below.\r\n"; > > function clean_string($string) { > $bad = array("content-type","bcc:","to:","cc:"); > return str_replace($bad,"",$string); > } > > $email_message .= "Full Name: ".clean_string($full_name)."\r\n"; > $email_message .= "Email: ".clean_string($email_from)."\r\n"; > $email_message .= "Telephone: ".clean_string($telephone)."\r\n"; > $email_message .= "Message: ".clean_string($comments)."\r\n"; > > $headers = 'From: '.$email_from."\r\n". > 'Reply-To: '.$email_from."\r\n" . > 'X-Mailer: PHP/' . phpversion(); > mail($email_to, $email_subject, $email_message, $headers); > header("Location: $thankyou"); > ?> > <script>location.replace('<?php echo $thankyou;?>')</script> > <?php > } > die(); > ?> > >
