I am working on a site, and having never done something like this, I am unsure how to proceed with PHP. I am working with bootstrap and looking to send an email based on a modal. My HTML looks like
<div class="modal fade" id="contact" role="dialoge">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Plan your Party!</h4>
</div>
<form class="name" name="contact">
<div class="modal-body">
<div class="form-group">
<label for="name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" name="name" required="required" placeholder="Full Name">
</div>l
</div>
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" class="form-control" name="email" required="required" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="message" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class="form-control" rows="8" style="resize: vertical;" required="required" placeholder="Message" name="message"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
<button class="btn btn-success" type="submit" id="submit"><i class="glyphicon glyphicon-inbox"></i> Submit</button>
</div>
</div>
</div>
</div>
So I am just wondering if anyone could give me some pointers to make this form actually send the email. I am looking to learn and willing to try anything. Thanks in advance, help and constructful criticism appreciated. Also, how would I approach adding a confirmation that the message has been sent?
Thanks, John.
<script>
$(document).ready(function () {
$("input#submit").click(function(){
$.ajax({
type: "POST",
url: "process.php", //
data: $('form.contact').serialize(),
success: function(msg){
$("#thanks").html(msg)
$("#form-content").modal('hide');
},
error: function(){
alert("failure");
}
});
});
});
</script>
This is the script I tried to add to call the php:
<?php
$myemail = 'myemail@myemail.ca';
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['message']);
echo "<span class=\"alert alert-success\" >Your message has been received. Thanks! Here is what you submitted:</span><br><br>";
echo "<stong>Name:</strong> ".$name."<br>";
echo "<stong>Email:</strong> ".$email."<br>";
echo "<stong>Message:</strong> ".$message."<br>";
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:
Name: $name
".
"Email: $email
Message
$message";
$headers = "From: $myemail
";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
}
?>
And I mean I am sure there is something I am missing, or some simple fix, this is all just so new to me.