How to send mail using PHP and Ajax Download

How to send mail using PHP and Ajax, Download Source Code, Live Demo, Responsive and Secure Contact form

Table of Contents

In the tutorial, we are going to explain How to send mail using PHP and Ajax.

PHP and AJAX contact form are used to send contact details to the administrator from the back end without contact page refresh. The below contact form form will be very useful to send the mail from your website.

If you are looking PHP, Ajax, Responsive and Secured contact us form, so Please read the full article. Live Demo and Source Code is available at the bottom.

The HTML code

First, we need to create the contact form using HTML and CSS. The HTML code given below.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax Contact Form</title>
<link rel="stylesheet" href="<a aria-label="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css (opens in a new tab)" class="rank-math-link" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" target="_blank" rel="noreferrer noopener">https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css</a>">
<style>
body {
    background: #8E0E00;  /* fallback for old browsers */
    background: -webkit-linear-gradient(left, #1F1C18, #8E0E00);
    background: -o-linear-gradient(left, #1F1C18, #8E0E00);
    background: linear-gradient(to right, #1F1C18, #8E0E00);  /* Chrome 10-25, Safari 5.1-6 */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.card {
    border: 0px !important;
}
</style>
</head>
<body>

<!-- ajax contact form -->
<section style="margin-top: 50px;">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card"> <img src="images/contact-us-form.jpg" /> 
          <div class="card-body">
            <form class="contactForm" method="post" action="sendMail.php">           
              <!-- form message -->
              <div class="row">
                <div class="col-12">
                  <div class="alert alert-success msg" style="display: none" role="alert"> Your message was sent successfully. </div>
                </div>
              </div>
              <!-- end message --> 
              
              <!-- form element -->
              <div class="row">
                <div class="col-md-6 form-group">
                  <input name="fullName" type="text" class="form-control" placeholder="Full Name" required>
                </div>
                <div class="col-md-6 form-group">
                  <input name="emailId" type="email" class="form-control" placeholder="Email Id" required>
                </div>
                <div class="col-md-6 form-group">
                  <input name="contactNumber" type="text" class="form-control" placeholder="Contact Number" required>
                </div>
                <div class="col-md-6 form-group">
                  <input name="subject" type="text" class="form-control" placeholder="Subject" required>
                </div>
                <div class="col-12 form-group">
                  <textarea name="message" class="form-control" rows="3" placeholder="Message" required></textarea>
                </div>
                <div class="col-12">
                  <input name="submit" type="submit" class="btn btn-success" value="Send Message">
                </div>
              </div>
              <!-- end form element -->
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script src="main.js"></script>
</body>
</html><gwmw style="display:none;"><gwmw style="display:none;"></gwmw><gwmw style="display:none;">

<!DOCTYPE html>

<head>

<title>Ajax Contact Form</title>

<style>

body {

background: #8E0E00; /* fallback for old browsers */

background: -webkit-linear-gradient(left, #1F1C18, #8E0E00);

background: -o-linear-gradient(left, #1F1C18, #8E0E00);

background: linear-gradient(to right, #1F1C18, #8E0E00); /* Chrome 10-25, Safari 5.1-6 */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.card {

border: 0px !important;

}

</style>

</head>

<body>

<div class="alert alert-success msg" style="display: none" role="alert"> Your message was sent successfully. </div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</form>

</div>

</section>

</body>

</html><gwmw style="display:none;"><gwmw style="display:none;"></gwmw><gwmw style="display:none;">

The Ajax Code

The below Ajax code is used to send the contact information from one page to another without page refresh. The Ajax code given below.

(function ($) {
    'use strict';

    var form = $('.contactForm'),
        message = $('.msg'),
        form_data;

    // Success function
    function done_func(response) {
        message.fadeIn().removeClass('alert-danger').addClass('alert-success');
        message.text(response);
        setTimeout(function () {
            message.fadeOut();
        }, 2000);
        form.find('input:not([type="submit"]), textarea').val('');
    }

    // fail function
    function fail_func(data) {
        message.fadeIn().removeClass('alert-success').addClass('alert-success');
        message.text(data.responseText);
        setTimeout(function () {
            message.fadeOut();
        }, 2000);
    }
    
    form.submit(function (e) {
        e.preventDefault();
        form_data = $(this).serialize();
        $.ajax({
            type: 'POST',
            url: form.attr('action'),
            data: form_data
        })
        .done(done_func)
        .fail(fail_func);
    });
    
})(jQuery);

(function ($) {

'use strict';

var form = $('.contactForm'),

message = $('.msg'),

form_data;

// Success function

function done_func(response) {

message.fadeIn().removeClass('alert-danger').addClass('alert-success');

message.text(response);

setTimeout(function () {

message.fadeOut();

}, 2000);

form.find('input:not([type="submit"]), textarea').val('');

}

// fail function

function fail_func(data) {

message.fadeIn().removeClass('alert-success').addClass('alert-success');

message.text(data.responseText);

setTimeout(function () {

message.fadeOut();

}, 2000);

}

form.submit(function (e) {

e.preventDefault();

form_data = $(this).serialize();

$.ajax({

type: 'POST',

url: form.attr('action'),

data: form_data

})

.done(done_func)

.fail(fail_func);

});

})(jQuery);

The PHP Code

The below PHP code is used to send the mail to the admin.

<?php

if ( $_SERVER[ "REQUEST_METHOD" ] == "POST" ) {

  # FIX: Replace this email with recipient email
  $mail_to = "test9889@gmail.com";

  # Sender Data
  $subject = trim( $_POST[ "subject" ] );
  $fullName = str_replace( array( "\r", "\n" ), array( " ", " " ), strip_tags( trim( $_POST[ "fullName" ] ) ) );
  $emailId = filter_var( trim( $_POST[ "emailId" ] ), FILTER_SANITIZE_EMAIL );
  $contactNumber = trim( $_POST[ "contactNumber" ] );
  $message = trim( $_POST[ "message" ] );

  if ( empty( $fullName )OR!filter_var( $emailId, FILTER_VALIDATE_EMAIL )OR empty( $contactNumber )OR empty( $subject )OR empty( $message ) ) {
    # Set a 400 (bad request) response code and exit.
    http_response_code( 400 );
    echo "Please complete the form and try again.";
    exit;
  }

  # Mail Content
  $content = '<table width="600" style="border:1px solid #943600; background-color:#F5F5F5" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="top"><table width="100%" border="0" cellpadding="4" cellspacing="0">
       
      <tr>
        <td height="40" colspan="2"  style="font-family:Trebuchet MS; font-size:14px; font-weight:bold; text-transform:uppercase; text-align:center; color:#ffffff; padding: 0px;"><a href="https://htmlcss3tutorials.com/" target="_blank"><img src="https://htmlcss3tutorials.com/wp-content/uploads/images/advertisment-banner.webp" style="width:600px;"></a></td>
      </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
        </tr>
      <tr style="border-bottom:1px solid #ccc;">
        <td width="51%" align="right"><strong>Full Name: </strong></td>
        <td width="49%" align="left"><span style="float:left; width:270px;">' . $fullName . '</span></td>
        </tr>  
      <tr style="border-bottom:1px solid #ccc;">
        <td align="right"><strong>Email Id:</strong></td>
        <td align="left"><span style="float:left; width:270px;">' . $emailId . '</span></td>
      </tr>
      <tr style="border-bottom:1px solid #ccc;">
        <td align="right"><STRONG>Contact Number:</STRONG></td>
        <td align="left"><span style="float:left; width:270px;">' . $contactNumber . '</span></td>
      </tr>
   
	   <tr style="border-bottom:1px solid #ccc;">
        <td align="right"><STRONG><span class="txt4">message</span>:</STRONG></td>
        <td align="left"><span style="float:left; width:270px;">' . $message . '</span></td>
      </tr>   
</table>';

  # email headers.
  $headers = "From: $fullName <$emailId>";
 	//$headers      = "From: $studentname <info@ggspindia.com>\r\n";
	$headers .= "MIME-Version: 1.0\r\n";
    $headers   .= "Content-type: text/html; charset=iso-8859-1\r\n";
  # Send the email.
  $success = mail( $mail_to, $subject, $content, $headers );
  if ( $success ) {
    # Set a 200 (okay) response code.
    http_response_code( 200 );
    echo "Thank You! Your message has been sent.";
  } else {
    # Set a 500 (internal server error) response code.
    http_response_code( 500 );
    echo "Oops! Something went wrong, we couldn't send your message.";
  }

} else {
  # Not a POST request, set a 403 (forbidden) response code.
  http_response_code( 403 );
  echo "There was a problem with your submission, please try again.";
}

?><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"></gwmw><gwmw style="display:none;"></gwmw></gwmw><gwmw style="display:none;">

<?php

if ( $_SERVER[ "REQUEST_METHOD" ] == "POST" ) {

# FIX: Replace this email with recipient email

$mail_to = "test9889@gmail.com";

# Sender Data

$subject = trim( $_POST[ "subject" ] );

$fullName = str_replace( array( "\r", "\n" ), array( " ", " " ), strip_tags( trim( $_POST[ "fullName" ] ) ) );

$emailId = filter_var( trim( $_POST[ "emailId" ] ), FILTER_SANITIZE_EMAIL );

$contactNumber = trim( $_POST[ "contactNumber" ] );

$message = trim( $_POST[ "message" ] );

if ( empty( $fullName )OR!filter_var( $emailId, FILTER_VALIDATE_EMAIL )OR empty( $contactNumber )OR empty( $subject )OR empty( $message ) ) {

# Set a 400 (bad request) response code and exit.

http_response_code( 400 );

echo "Please complete the form and try again.";

exit;

}

# Mail Content

$content = '<table width="600" style="border:1px solid #943600; background-color:#F5F5F5" align="center" cellpadding="0" cellspacing="0">

<tr>

<tr>

</tr>

<tr>

</tr>

<td width="49%" align="left"><span style="float:left; width:270px;">' . $fullName . '</span></td>

</tr>

<td align="right"><strong>Email Id:</strong></td>

<td align="left"><span style="float:left; width:270px;">' . $emailId . '</span></td>

</tr>

<td align="right"><STRONG>Contact Number:</STRONG></td>

<td align="left"><span style="float:left; width:270px;">' . $contactNumber . '</span></td>

</tr>

<td align="right"><STRONG><span class="txt4">message</span>:</STRONG></td>

<td align="left"><span style="float:left; width:270px;">' . $message . '</span></td>

</tr>

</table>';

# email headers.

$headers = "From: $fullName <$emailId>";

//$headers = "From: $studentname <info@ggspindia.com>\r\n";

$headers .= "MIME-Version: 1.0\r\n";

$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";

# Send the email.

$success = mail( $mail_to, $subject, $content, $headers );

if ( $success ) {

# Set a 200 (okay) response code.

http_response_code( 200 );

echo "Thank You! Your message has been sent.";

} else {

# Set a 500 (internal server error) response code.

http_response_code( 500 );

echo "Oops! Something went wrong, we couldn't send your message.";

}

} else {

# Not a POST request, set a 403 (forbidden) response code.

http_response_code( 403 );

echo "There was a problem with your submission, please try again.";

}

?><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"></gwmw><gwmw style="display:none;"></gwmw></gwmw><gwmw style="display:none;">

Conclusion

We explained How to send mail using PHP and Ajax. Hope you like it so, Please like and share.

Live Demo

Download

Built-in functions for Uppercase Lowercase in PHP

October 8, 2022

HTMLCSS

Built-in functions for Uppercase Lowercase in PHP

Know Details

Dynamically Add Remove input fields in PHP

November 6, 2021

HTMLCSS

Dynamically Add Remove input fields in PHP

Know Details

How to Add Google CAPTCHA in Registration Form in PHP

June 29, 2021

HTMLCSS

How to Add Google CAPTCHA in Registration Form in PHP

Know Details

March 10, 2021

HTMLCSS

Razorpay Payment Gateway Integration

Know Details

How to display data from database in PHP in table

March 4, 2021

HTMLCSS

How to display data from database in PHP in table

Know Details

How to make a dependent dropdown list using jquery Ajax Download

January 29, 2021

HTMLCSS

How to make a dependent dropdown list using jquery Ajax Download

Know Details

How to send mail using PHP and Ajax Download