Last active
February 15, 2019 12:39
-
-
Save slavapas/d5945ffccd96648460def87d307923dc to your computer and use it in GitHub Desktop.
Simple Contact form using Jquery Ajax & PHP.html
This file contains hidden or 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
Simple Contact form using Jquery Ajax & PHP | |
http://www.otallu.com/tutorials/simple-contact-form-using-jquery-ajax-php/ | |
----------------------------------------------------- | |
HTML | |
----------------------------------------------------- | |
<form method="post" class="myform" action="process-form.php"> | |
<input type="text" name="name" placeholder="Your Name" required><br> | |
<input type="email" name="email" placeholder="Your Email" required><br> | |
<textarea rows="4" cols="20" name="message" placeholder="Your Message"></textarea><br> | |
<input type="submit" name="send" value="Send"> <span class="output_message"></span> | |
</form> | |
----------------------------------------------------- | |
CSS Code | |
----------------------------------------------------- | |
input[type=text], input[type=email], textarea { | |
border:1px solid #ccc; | |
padding:8px; | |
margin:2px 0; | |
font-size:13px; | |
font-family:Arial, Helvetica, sans-serif; | |
color:#8f8f8f; | |
width:250px; | |
border-radius:5px; | |
box-shadow:inset 0 0 8px #e5e8e7; | |
} | |
input[type=submit] { | |
border:none; | |
padding:8px 25px; | |
margin:2px 0; | |
font-family:Arial, Helvetica, sans-serif; | |
color:#fff; | |
background:#0d7963; | |
border-radius:5px; | |
cursor:pointer; | |
} | |
input[type=submit]:hover { | |
opacity:0.9; | |
} | |
----------------------------------------------------- | |
jQuery Code | |
----------------------------------------------------- | |
$(document).ready(function() { | |
$('.myform').on('submit',function(){ | |
// Add text 'loading...' right after clicking on the submit button. | |
$('.output_message').text('Loading...'); | |
var form = $(this); | |
$.ajax({ | |
url: form.attr('action'), | |
method: form.attr('method'), | |
data: form.serialize(), | |
success: function(result){ | |
if (result == 'success'){ | |
$('.output_message').text('Message Sent!'); | |
} else { | |
$('.output_message').text('Error Sending email!'); | |
} | |
} | |
}); | |
// Prevents default submission of the form after clicking on the submit button. | |
return false; | |
}); | |
}); | |
----------------------------------------------------- | |
PHP Code | |
----------------------------------------------------- | |
if (isset($_REQUEST['name'],$_REQUEST['email'])) { | |
$name = $_REQUEST['name']; | |
$email = $_REQUEST['email']; | |
$message = $_REQUEST['message']; | |
// Set your email address where you want to receive emails. | |
$to = '[email protected]'; | |
$subject = 'Contact Request From Website'; | |
$headers = "From: ".$name." <".$email."> \r\n"; | |
$send_email = mail($to,$subject,$message,$headers); | |
echo ($send_email) ? 'success' : 'error'; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment