patotoma/AjaxContactForm.md

## AjaxContactForm.md

      
    Raw
  

              AjaxContactForm.md
            
          
    Simple Ajax Contact Form with jQuery and PHP

Files:


index.html
style.css
js.js
mailer.php

Use:


Copy code or files to your project and change $to = "myemail@example.com"; in mailer.php to your email address.
Edit and style to suit your needs.

If you have any questions or innovations please leave me a comment.
patriktoma.studenthosting.sk

  
## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Contact Form</title>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>

    <form action="" id="form">
      <label for="email">Email:</label>
      <input type="text" name="email" id="email" placeholder="email@example.com"><br>
      <label for="subject">Subject:</label>
      <input type="text" name="subject" id="subject" placeholder="subject"><br>
      <label for="message">Message:</label>
      <textarea name="message" id="message" placeholder="message"></textarea><br>
      <button name="submit" id="submit">Send</button>
      <label id="info"></label>
    </form>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js.js"></script>
  </body>
</html>

## js.js
$(document).ready(function() {

  var form = $('#form'),
      email = $('#email'),
      subject = $('#subject'),
      message = $('#message'),
      info = $('#info'),
      submit = $("#submit");

  form.on('input', '#email, #subject, #message', function() {
    $(this).css('border-color', '');
    info.html('').slideUp();
  });

  submit.on('click', function(e) {
    e.preventDefault();
    if(validate()) {
      $.ajax({
        type: "POST",
        url: "mailer.php",
        data: form.serialize(),
        dataType: "json"
      }).done(function(data) {
        if(data.success) {
          email.val('');
          subject.val('');
          message.val('');
          info.html('Message sent!').css('color', 'green').slideDown();
        } else {
          info.html('Could not send mail! Sorry!').css('color', 'red').slideDown();
        }
      });
    }
  });

  function validate() {
    var valid = true;
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    if(!regex.test(email.val())) {
      email.css('border-color', 'red');
      valid = false;
    }
    if($.trim(subject.val()) === "") {
      subject.css('border-color', 'red');
      valid = false;
    }
    if($.trim(message.val()) === "") {
      message.css('border-color', 'red');
      valid = false;
    }

    return valid;
  }

});

## mailer.php
<?php

if($_POST) {
  $to = "myemail@example.com"; // your mail here
  $email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
  $subject = filter_var($_POST["subject"], FILTER_SANITIZE_STRING);
  $message = filter_var($_POST["message"], FILTER_SANITIZE_STRING);
  $body = "Message: $message\nE-mail: $email";

  if(@mail($to, $subject, $body)) {
    $output = json_encode(array('success' => true));
    die($output);
  } else {
    $output = json_encode(array('success' => false));
    die($output);
  }
}

## style.css
label {
  width: 200px;
  display: block;
}

input, textarea {
  width: 200px;
  margin: 5px 0;
  border: 1px solid #CCC;
}

p {
  width: 200px;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Contact Form</title>
	<link rel="stylesheet" href="style.css"/>
	</head>
	<body>

	<form action="" id="form">
	<label for="email">Email:</label>
	<input type="text" name="email" id="email" placeholder="email@example.com"><br>
	<label for="subject">Subject:</label>
	<input type="text" name="subject" id="subject" placeholder="subject"><br>
	<label for="message">Message:</label>
	<textarea name="message" id="message" placeholder="message"></textarea><br>
	<button name="submit" id="submit">Send</button>
	<label id="info"></label>
	</form>

	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="js.js"></script>
	</body>
	</html>
	$(document).ready(function() {

	var form = $('#form'),
	email = $('#email'),
	subject = $('#subject'),
	message = $('#message'),
	info = $('#info'),
	submit = $("#submit");

	form.on('input', '#email, #subject, #message', function() {
	$(this).css('border-color', '');
	info.html('').slideUp();
	});

	submit.on('click', function(e) {
	e.preventDefault();
	if(validate()) {
	$.ajax({
	type: "POST",
	url: "mailer.php",
	data: form.serialize(),
	dataType: "json"
	}).done(function(data) {
	if(data.success) {
	email.val('');
	subject.val('');
	message.val('');
	info.html('Message sent!').css('color', 'green').slideDown();
	} else {
	info.html('Could not send mail! Sorry!').css('color', 'red').slideDown();
	}
	});
	}
	});

	function validate() {
	var valid = true;
	var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

	if(!regex.test(email.val())) {
	email.css('border-color', 'red');
	valid = false;
	}
	if($.trim(subject.val()) === "") {
	subject.css('border-color', 'red');
	valid = false;
	}
	if($.trim(message.val()) === "") {
	message.css('border-color', 'red');
	valid = false;
	}

	return valid;
	}

	});
	<?php

	if($_POST) {
	$to = "myemail@example.com"; // your mail here
	$email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
	$subject = filter_var($_POST["subject"], FILTER_SANITIZE_STRING);
	$message = filter_var($_POST["message"], FILTER_SANITIZE_STRING);
	$body = "Message: $message\nE-mail: $email";

	if(@mail($to, $subject, $body)) {
	$output = json_encode(array('success' => true));
	die($output);
	} else {
	$output = json_encode(array('success' => false));
	die($output);
	}
	}
	label {
	width: 200px;
	display: block;
	}

	input, textarea {
	width: 200px;
	margin: 5px 0;
	border: 1px solid #CCC;
	}

	p {
	width: 200px;
	}