Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple Asynchronous Contact Form with jQuery and PHP

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

<!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;
}
@patotoma
Copy link
Author

patotoma commented Nov 17, 2016

I am glad it helped you!

@DavidTheProgrammer
Copy link

DavidTheProgrammer commented Dec 16, 2016

Thanks man. Good stuff!! 👍

@eclipseeer
Copy link

eclipseeer commented Mar 31, 2018

Very thanks, u saved my day:)

@angryCodeMonkey
Copy link

angryCodeMonkey commented May 31, 2018

Hi, I wanted to implement this on a site and I have some issues. I needed to add an extra field, so I added it and the form validation works ok, the emails are getting sent. But I have two issues:

1.- The sent emails are arriving without an subject.
2.- The form does not clear it self or shows successful or error message in the #Info label

@selemani1
Copy link

selemani1 commented Aug 20, 2018

Hi everyone, Hope you are doing well
I am newbie(new comer) in web development, I would like to get some help with my contact form:
1- All sent email are arrived without the email body and sender email , also after submitting the form , all the fields remained filled (meaning the form does not clear itself or self-clear after the submitting operation has been done)

Thank you so much , I will appreciate forks

Copy link

ghost commented Sep 25, 2019

Thank you for posting this, been searching for a long time for a neat solution (i.e. without using third party servers)
Works perfectly ...
Regards chiprobot

@caio-2k
Copy link

caio-2k commented Aug 18, 2020

should you can me explain what the function done do? ty for the sharing man 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment