Email form submission with spam protection

Post Reply
User avatar
yang
The Big Kahuna
Posts: 76
Joined: Thu Jul 31, 2008 12:02 am
Location: Portland, OR
Contact:

Email form submission with spam protection

Post by yang » Sun Sep 03, 2017 2:42 pm

Hi guys,

today we are going to learn how to make a ajax submission form like the one I have at bottom of my webpage that includes a verification system.

This code will be provided as is. It will work right out of the box so just add your css stuff and it will look spiffy. Remember that this script will require jquery. So download jquery javascript from https://jquery.com/.

Please note: While the script will work, I didn't remove the css stuff that I originally had in it. So if it looks weird you have to tweak it to look better.
Let me know if you have any questions :)

HTML testform.php ( add this snippet to where you wish to have your form )

Code: Select all

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

<form id="main-contact-form" name="contact-form" method="post"

						action="sendemail.php">
						<p>What does 2 + 2 equal?</p>
						<div class="form-group"> <input id="veri" name="veri" class="form-control"
						
							placeholder="What does 2 + 2 equal?" required="" type="text">
						</div>
						
						<div class="form-group"> <input name="name" class="form-control"

							placeholder="Name" required="" type="text">
						</div>
						<div class="form-group"> <input name="email" class="form-control"

						placeholder="E-mail" required="" type="email"> </div>
						<div class="form-group"> <input name="subject" class="form-control"

						placeholder="Subject" required="" type="text"> </div>
						<div class="form-group"> <textarea name="message" class="form-control"

						rows="8" placeholder="Message" required=""></textarea> </div>
						<button type="submit" class="btn btn-primary">Send Message</button>
					</form>
Now make a file called postMyMsg.js

Code: Select all


jQuery(function($) {'use strict';

// Contact form
	var form = $("#main-contact-form").submit(function() {
		var form_status = $('<div class="form_status"></div>');
		$.ajax({
			type: "POST",
			url: "sendemail.php",
			data: $(this).serialize(),
			beforeSend: function(){
				form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
			}
		}).done(function() {
			var veriffy = $('#veri').val();
			if (veriffy == '4' || veriffy == 'four')
			{
				$("#main-contact-form").trigger("reset");
			form_status.html('<p class="text-success">Thank you for contacting me. Please allow up to 24hrs for a response.</p>').delay(8000).fadeOut();
			}
			else
				{
					form_status.html('<p class="text-success">You typed in the wrong verification code. Email not sent!</p>').delay(8000).fadeOut();
				} 
			
			
		});
		return false;
	});
});
now make a file called sendemail.php

Code: Select all

<?php

$name = @trim(stripslashes($_POST["name"]));
$from = @trim(stripslashes($_POST["email"]));
$subject = @trim(stripslashes($_POST["subject"]));
$message = @trim(stripslashes($_POST["message"]));
$verification = @trim(stripslashes($_POST["veri"]));
$client_ip = $_SERVER['REMOTE_ADDR'];
$date = time();
$contact_date = date("j/n/Y", $date);
$email_body = "Message received- $contact_date \nName: $name \nE-Mail $from \nSubject: $subject \nMessage: $message \nIP: $client_ip \nDe: $from \nReply-To: $from \n";
$to = "YOUR EMAIL";//replace with your email


if ($verification == 'four' || $verification == '4') // change the words to your desired verification.
{
	mail($to, $subject, $email_body, "Content-type: text/plain; charset=\"utf-8\"\n From: $to");
}

die;
?>
"To know, is to know that you know nothing. That is the meaning of true knowledge." - Confucius
"知之为知之,不知为不知,是知也。" - 孔子

Post Reply