It's easy to send notification email just by ajax request. Sure would be good to add some validation.
Create simple form contact.html
And following ajax call:
Create simple form contact.html
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"></link>
<form class="form-horizontal" id="contact">
<fieldset>
<!-- Form Name -->
<legend>Contact Us</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name">Name</label>
<div class="col-md-5">
<input id="name" name="name" type="text" placeholder="Your name*" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="email">Email</label>
<div class="col-md-5">
<input id="email" name="email" type="text" placeholder="Your email*" class="form-control input-md" required="">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="message">Message</label>
<div class="col-md-4">
<textarea class="form-control" id="message" name="message" cols="6" rows="6"></textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary">Send Message</button>
</div>
</div>
</fieldset>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script></code>
And following ajax call:
jQuery(function($)
{
$("#contact").submit(function()
{
var email = $("#email").val(); // get email field value
var name = $("#name").val(); // get name field value
var msg = $("#message").val(); // get message field value
$.ajax(
{
type: "POST",
url: "https://mandrillapp.com/api/1.0/messages/send.json",
data: {
'key': '#PUT_YOUR_MANDRILL_API_KEY_HERE',
'message': {
'from_email': email,
'from_name': name,
'headers': {
'Reply-To': email
},
'subject': 'Message from Contact form',
'text': message,
'to': [
{
'email': 'johndoe@email.com',
'name': 'John Doe',
'type': 'to'
}]
}
}
})
.done(function(response) {
alert('Your message has been sent successfully');
//reset input fields after successful submission
$("#name").val('');
$("#email").val('');
$("#message").val('');
})
.fail(function(response) {
alert('Error sending message.');
});
return false; // prevent page refresh
});
});
