screenshot of error
Hey i'm trying to build a contact form for my contact page. I can't seem to get the form to send me an email of the inputs from the form when the "Submit Form" button is pressed.
...This is my html
<form class="send-with-ajax" method="post" action="send_form_email.php">
<div class="row">
<div class="three columns alpha">
<label for="first_name">First Name <span>required</span></label>
<label for="last_name">Last Name <span>required</span></label>
</div>
<div class="seven columns omega">
<input type="text" required placeholder="First Name" id="first_name" name="name">
<input type="text" required placeholder="Last Name" id="last_name" name="name">
</div>
</div>
<div class="row">
<div class="three columns alpha">
<label for="email">Your Email <span>email required</span></label>
</div>
<div class="seven columns omega">
<input type="email" required placeholder="your@email" id="email" name="email">
</div>
</div>
<div class="row">
<div class="three columns alpha">
<label for="comments">Message</label>
</div>
<div class="seven columns omega">
<textarea placeholder="Enter you message, and please include your artist name. you can put either or choose between Pervis or Duijuan" id="comments" name="comments"></textarea>
</div>
</div>
<div class="seven columns offset-by-three">
<button type="submit">Submit Form</button>
<div class="ajax-response"></div>
</div>
</form>
...This is my javascript
$("form.send_form_email").submit(function(e) {
e.preventDefault();
var form = $(this),
validationErrors = false;
$('.form-error-msg').remove();
form.find("input[type='email'], input[required]").each(function(index){
var inputValue = $(this).val(),
inputRequired = $(this).attr('required'),
inputType = $(this).attr('type');
$(this).removeClass('form-error');
if(inputRequired && inputValue == '') {
$(this).after('<div class="form-error-msg">Please fill out this field.</div>');
$(this).addClass('form-error');
validationErrors = true;
} else if(inputType == 'email' && !isValidEmail(inputValue)) {
$(this).after('<div class="form-error-msg">Please enter an email address.</div>');
$(this).addClass('form-error');
validationErrors = true;
}
});
if (!validationErrors) {
form.find('button:submit, input:submit').html('Sending...');
form.find('.ajax-response').empty();
$.post(form.attr('action'), form.serialize(),
function(data) {
if (data.bFormSent) {
form.find('.ajax-response').empty().html(data.aResults[0]);
form.find('button:submit, input:submit').html('Submit Form');
form.find('#email, #first_name, #last_name #comments').val('');
} else {
form.find('.ajax-response').empty().wrapInner('<div class="form-error-msg"></div>');
form.find('.ajax-response div').html(data.aErrors[0]);
form.find('button:submit, input:submit').html('Try Again');
}
}, 'json');
}
});
...This is my PHP
<?php
if(isset($_POST['email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "myemail";
$email_subject = "this subject";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['first_name' ]) ||
!isset($_POST['last_name']) ||
!isset($_POST['email']) ||
!isset($_POST['telephone']) ||
!isset($_POST['comments'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$first_name = $_POST['first_name']; // required
$last_name = $_POST['last_name']; // required
$email_from = $_POST['email']; // required
$telephone = $_POST['telephone']; // not required
$comments = $_POST['comments']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp, $email_from)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$first_name)) {
$error_message .= 'The First Name you entered does not appear to be valid.<br />';
}
if(!preg_match($string_exp,$last_name)) {
$error_message .= 'The Last Name you entered does not appear to be valid.<br />';
}
if(strlen($comments) < 2) {
$error_message .= 'The Comments you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Form details below.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "First Name: ".clean_string($first_name)."\n";
$email_message .= "Last Name: ".clean_string($last_name)."\n";
$email_message .= "Email: ".clean_string($email_from)."\n";
$email_message .= "Telephone: ".clean_string($telephone)."\n";
$email_message .= "Comments: ".clean_string($comments)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>
