Last active
March 11, 2021 20:31
-
-
Save rajuahmmed/cdcacbc335bbbc9fb1253e79ea618021 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
<title>Ajax Contact with php by CantoThemes</title> | |
<!-- Bootstrap --> | |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> | |
</head> | |
</body> | |
<form id="ajax-contact-form" method="post" action="contact.php"> | |
<div class="form-group"> | |
<label for="name">Your Name</label> | |
<input type="text" class="form-control" id="name" name="name" placeholder="Full Name"> | |
</div> | |
<div class="form-group"> | |
<label for="email">Your Email</label> | |
<input type="text" class="form-control" id="email" name="email" placeholder="Full Name"> | |
</div> | |
<div class="form-group"> | |
<label for="subject">Your Subject</label> | |
<input type="text" class="form-control" id="subject" name="subject" placeholder="Full Name"> | |
</div> | |
<div class="form-group"> | |
<label for="message">Your Message</label> | |
<textarea class="form-control" id="message" name="message" placeholder="Full Name"></textarea> | |
</div> | |
<button type="submit" class="btn btn-primary">Submit</button> | |
</form> | |
<div id="form-messages"></div> | |
<!-- jQuery --> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
<script src="contact.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($) { | |
// Select the form and form message | |
var form = $('#ajax-contact-form'), | |
form_messages = $('#form-messages'); | |
// Action at on submit event | |
$(form).on('submit', function(e) { | |
e.preventDefault(); // Stop browser loading | |
// Get form data | |
var form_data = $(form).serialize(); | |
// Send Ajax Request | |
var the_request = $.ajax({ | |
type: 'POST', // Request Type POST, GET, etc. | |
url: "contact.php", | |
data: form_data | |
}); | |
// At success | |
the_request.done(function(data){ | |
form_messages.text("Success: "+data); | |
// Do other things at success | |
}); | |
// At error | |
the_request.done(function(){ | |
form_messages.text("Error: "+data); | |
// Do other things at fails | |
}); | |
}); | |
})(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// Proccess at only POST metheod | |
if ($_SERVER["REQUEST_METHOD"] == "POST") { | |
// name of sender | |
$name = strip_tags(trim($_POST["name"])); | |
// Email of sender | |
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL); | |
// Sender subject | |
$subject = strip_tags(trim($_POST["subject"])); | |
// Sender Message | |
$message = trim($_POST["message"]); | |
// Your email where this email will be sent | |
$your_email = "example@example.com"; | |
//Your site name for identify | |
$your_site_name = "Example"; | |
// Build email subject | |
$email_subject = "[{$your_site_name}] New Message by {$name}"; | |
// Build Email Content | |
$email_content = "Name: {$name}\n"; | |
$email_content .= "Email: {$email}\n"; | |
$email_content .= "Subject: {$subject}\n"; | |
$email_content .= "Message: {$message}\n"; | |
// Build email headers | |
$email_headers = "From: {$name} <{$email}>"; | |
// Send email | |
$send_email = mail($your_email, $email_subject, $email_content, $email_headers); | |
// Check email sent or not | |
if($send_email){ | |
// Send a 200 response code. | |
http_response_code(200); | |
echo "Thank You! Your message has been sent."; | |
} else { | |
// Send a 500 response code. | |
http_response_code(500); | |
echo "Oops! we couldn't send your message. Please try again later"; | |
} | |
} else { | |
// Send 403 response code | |
http_response_code(403); | |
echo "Oops! Submition problem. Please try again later"; | |
} | |
?> |
Yeah where is the submit? Test for dummies?
UP !
The AJAX function doesn't work on mobile version !
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey Everyone,
Is it just me, or shouldn't there be a "submit" button in this form?
Also, can't we get the SUCCESS message to be at the bottom of the form, and not in a new window with no style?