I've seen this question asked on Stack Overflow before, but haven't been able to get the previous solutions to work, for my site!
I have a 'Contact' page on a website (staging.twotailsmedia.com). And right now, the Contact page works and sends an email to the right place, but it generates a 'Thank you!' message on a new, separate, unformatted page. Not what I want. I want it to stay on the Contact page, generate the 'Thank you!' confirmation on the form next to the submit button.
Here's my Form's HTML from the index.html file:
<form method="POST" action="mail.php">
<div class="field half first">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="field half">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="4"></textarea>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="special" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</form>
Here's the PHP from the mail.php file:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="From: $name \n Message: $message";
$recipient = "[email protected]";
$subject = "A message from the Two Tails MEdia website!";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You! We'll get back to you.";
}
?>
Usually I'd just get a Contact Form plugin from Wordpress but I'm trying to do a non-WP page so I can get a deeper understanding of the web development process.
Use Ajax to submit your form and by success show your message. Try this code:
$('form').submit(function(e){
e.preventDefault();
$.ajax({
type:'post',
url:'mail.php',
data:$(this).serialize(),
success:function(){
$('form')[0].reset(); // to reset the form
$('#contact').hide(); // to hide the Contact article
$('#message').show(); // to show the hidden message
}
})
})
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments