jQuery Contact Form Send Email Using Ajax, is a common feature of various websites. If you want to send the contact form details using Email then it can be nicer to use Ajax with PHP.
Go below to Download Complete Source code File
Here are 3 major steps to create a jQuery contact Form that can send email using Ajax,
- Create a simple HTML form.
- Create a PHP file that takes user data.
- Create the main JS file which can send user data and trigger mail.
Create a simple HTML form
Here we will create a simple HTML form where we set the ID attribute which is used by the JavaScript file to take the data from the HTML form and send it to the PHP file.
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Contact Form</title> <link rel="stylesheet" href="style.css"/> </head> <body> <form 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="loader"></label> <label id="info"></label> </form> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="main.js"></script> </body> </html> |
Create a JS Ajax File
First I need to explain the complete code which is important to use on the complete Ajax file.
Input Code
|
1 2 3 4 5 6 7 |
var form = $('#form'), email = $('#email'), subject = $('#subject'), message = $('#message'), info = $('#info'), loader = $('#loader'), submit = $("#submit"); |
Explanation:
Here we will take input from the HTML form using the ID attribute.
Send Data on Form Submit
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
submit.on('click', function(e) { info.html('Loading...').css('color', 'red').slideDown(); 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(); } }); } }); |
Explanation:
Here we will send the input data to the PHP file for sending the details by mail.
JS Validation
Here we validate fields using var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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; } |
Complete JS File (main.js)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
$(document).ready(function() { var form = $('#form'), email = $('#email'), subject = $('#subject'), message = $('#message'), info = $('#info'), loader = $('#loader'), submit = $("#submit"); form.on('input', '#email, #subject, #message', function() { $(this).css('border-color', ''); info.html('').slideUp(); }); submit.on('click', function(e) { info.html('Loading...').css('color', 'red').slideDown(); 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; } }); |
Create PHP File for Sending Form Data to Mail
In this file, we will take the data using the PHP POST method and send mail.
If you want to use a test on the local machine, the mail function generally not working with localhost but you can do the same. Here is the same article to how we can do it,
Here is the complete PHP code (mailer.php)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php if($_POST) { $to = "phpcodertech@gmail.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"; //mail headers are mandatory for sending email $headers = 'From: ' .$email . "\r\n". 'Reply-To: ' . $email. "\r\n" . 'X-Mailer: PHP/' . phpversion(); if(@mail($to, $subject, $body, $headers)) { $output = json_encode(array('success' => true)); die($output); } else { $output = json_encode(array('success' => false)); die($output); } } |
Download the Complete Source code of Send Email Using Ajax
Here are complete details about how to create an Ajax-based Contact form using PHP.
Check more on the PHP mail function, here https://www.php.net/manual/en/function.mail.php
Also Check:
- How to Store Data In Cookies Using JavaScript
- Steps to Upload Multiple Images in PHP with Preview
- Multiple Barcode Generator in PHP
- Increase PHPMyAdmin Import Size Ubuntu and XAMPP
- Get Number of Days Between Two Dates Using JS and jQuery
- How to Include Comments in CSS
Happy Coding..!
Auto Add Country Code in Input using JavaScript
3 Replies to “jQuery Contact Form Send Email Using Ajax”