Hi. I am trying to create a contact form which should show success/failure message on the same place as the form is. However it loads in a /process.php page. Can anyone help me with this?
Here’s my form:
<form method="post" action="process.php" id="contactForm">
<input type="text" placeholder="Name" name="name" />
<input type="text" placeholder="Email" name="email" />
<input type="text" placeholder="Phone #" name="phone" />
<input type="text" placeholder="Message" name="comments" />
<input type="submit" value="SEND" id="submit" name="contactSubmit" />
</form>
The process.php file
/* Configuration */
$subject = 'SUBJECT'; // Set email subject line here
$mailto = 'my email is here'; // Email address to send the form to
/* END Configuration */
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$comments = $_POST['comments'];
$timestamp = date("F jS Y, h:iA.", time());
// HTML for email to send submission details
$body = "
<br>
<p>Message:</p>
<p><b>Name</b>: $name <br>
<b>Email</b>: $email<br>
<b>Phone number</b>: $phone </p>
<p>This form was submitted on <b>$timestamp</b></p>
";
// Success Message
$success = "
<div class=\"row\">
<div class=\"thankyou\">
<h3>Submission successful</h3>
<p>Thank you for taking the time to contact us.</p>
</div>
</div>
";
$headers = "From: $name <$email> \r\n";
$headers .= "Reply-To: $email \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = "<html><body>$body</body></html>";
if (mail($mailto, $subject, $message, $headers)) {
echo "$success"; // success
} else {
echo 'Form submission failed. Please try again...'; // failure
}
?>
The JS file:
$('#contactForm').on('submit', function(e) {
e.preventDefault(); //Prevents default submit
var form = $(this);
var post_url = form.attr('action');
var post_data = form.serialize(); //Serialized the form data for process.php
$('#loader', form).html('<img src="../img/loader.gif" /> Please Wait...');
$.ajax({
type: 'POST',
url: 'process.php', // Your form script
data: post_data,
success: function(msg) {
$(form).fadeOut(500, function(){
form.html(msg).fadeIn();
});
}
});
});
I have this JS script in a sending.js file and
<script type='text/javascript' src='sending.js'></script>
There should be something missing I can’t figure out.
Thanks,
Levon
