We Keep Coding

How to submit a contact form with Google recaptcha v2 and PHP with a Boostrap success alert

I have a contact form on a website, and I am trying to submit the form using Google recaptcha v2, (select the boxes which have a certain image in them). At the moment, the form successfully sends and is received exactly as I want it to; however, I want to create a 'success' alert using Bootstrap, but for some reason this is not working.
If you take a look at the last part of my PHP file I have the following code snippet:
if($responseKeys["success"]) {
mail($to,$email_subject,$email_body,$headers);
} else {
echo '<h2>This has been unsuccessful according to our security checks</h2>';
}
And the 'mail' command seems to work. But anything else I try to put in there, for example
echo '<h2>success!</h2>'
for example, it doesn't get rendered. Ideally, upon a success submit I would like the following to take place:
The form to refresh to blank
A success alert using Bootstrap show at the top of the page
But I am having trouble implementing these.
Here is the entire PHP file:
<?php
$Fname = $_POST['Fname'];
$Lname = $_POST['Lname'];
$email = $_POST['email'];
$number = $_POST['number'];
$company = $_POST['company'];
$message = $_POST['message'];
$email_from = "Your website";
$email_subject = "You have a new submission form from Your Website";
$email_body = "First Name: $Fname.\n".
"Last Name: $Lname.\n".
"Email Address: $email.\n".
"Telephone Number: $number.\n".
"Company Name: $company.\n".
"Message: $message.\n";
$to = "hello#yourwebsite.co.uk";
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $email \r\n";
$captcha;
if(isset($_POST['email'])){
$email=$_POST['email'];
}
if(isset($_POST['message'])){
$message=$_POST['message'];
}
if(isset($_POST['g-recaptcha-response'])){
$captcha=$_POST['g-recaptcha-response'];
}
if(!$captcha){
echo '<h2>Please check the "I am not a robot" checkbox"</h2>';
exit;
}
$secretKey = 'somesecretlettersandnumbers';
$ip = $_SERVER['REMOTE_ADDR'];
// post request to the server
$url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . urlencode($secretKey) . '&response=' . urlencode($captcha);
$response = file_get_contents($url);
$responseKeys = json_decode($response, true);
// should return JSON with success as true
if($responseKeys["success"]) {
mail($to,$email_subject,$email_body,$headers);
} else {
echo '<h2>This has been unsuccessful according to our security checks</h2>';
}
?>
And here is the HTML form:
<form action="contact.php" id="contact-form" method="POST" role="form">
<div class="row">
<div class="col">
<div class="form-group">
<label for="form_name">First Name*</label>
<input id="form_name" type="text" class="form-control" name="Fname" placeholder="David" required data-error='Please fill in your first name'>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="form_lastname">Last name*</label>
<input id="form_lastname" type="text" class="form-control" name="Lname" placeholder="Beckham" required data-error="Please fill in your last name">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="form_email">Email address*</label>
<input id="form_email" type="email" class="form-control" name="email" placeholder="becks#example.com" required data-error="Please provide your email address">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="form_number">Contact number*</label>
<input id="form_number" type="number" class="form-control" name="number" placeholder="01234567890" required data-error="Please provide a contact number">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="form_company">Your company name</label>
<input id="form_company" type="text" class="form-control" name="company" placeholder="Ex-footballers r us">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="form_message">Your message*</label>
<textarea id="form_message" class="form-control" name="message" cols="30" rows="10" placeholder="Here's my message" required></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="g-recaptcha" data-sitekey="datasitekeynumbersandletters"></div>
</div>
</div>
<div class="row">
<div class="col">
<input type="submit" class="btn btn-outline-brand btn-block" name="submit" value="Send enquiry">
</div>
</div>
</form>
I have tried following this tutorial:
Bootstrap success alert upon form submition via javascript
Edited to add the only JS I have for this file:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
without success.
Thank you in advance

Address box fails to be shown in the email

I was wondering if anyone could help me with my issue, When ever the form is submitted the street form does not show up in the email I receive. I don't understand why it might not be working I've looked through the php and JS but cant understand why it won't work. Here i the JS:
(function($){
$(document).ready(function() {
/* ---------------------------------------------- /*
* Contact form ajax
/* ---------------------------------------------- */
$('#contact-form').find('input,textarea').jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault();
var submit = $('#contact-form submit');
var ajaxResponse = $('#contact-response');
var name = $('#contact-form [name="name"]').val();
var lastname = $('#contact-form [name="lastname"]').val();
var address = $('#contact-form [name="address"]').val();
var email = $('#contact-form [name="email"]').val();
var message = $('#contact-form [name="message"]').val();
$.ajax({
type: 'POST',
url: 'assets/php/contact.php',
dataType: 'json',
data: {
name: name,
lastname: lastname,
address: address,
email: email,
message: message,
},
cache: false,
beforeSend: function(result) {
submit.empty();
submit.append('<i class="fa fa-cog fa-spin"></i> Wait...');
},
success: function(result) {
if(result.sendstatus == 1) {
ajaxResponse.html(result.message);
$form.fadeOut(500);
} else {
ajaxResponse.html(result.message);
}
}
});
}
});
}); })(jQuery);
Here is the HTML:
<div class="row">
<div name="contactform" class="col-sm-8 col-sm-offset-2">
<form id="contact-form" method="post" novalidate>
<div class="row">
<div class="col-md-6 form-group">
<label class="sr-only">First Name</label>
<input type="text" class="form-control input-lg" name="name" placeholder="First Name" value="" required="">
<p class="help-block text-danger"></p>
</div>
<div class="col-md-6 form-group">
<label class="sr-only">Last Name</label>
<input type="text" class="form-control input-lg" name="lastname" placeholder="Last Name" value="" required="">
<p class="help-block text-danger"></p>
</div>
<div class="col-md-6 form-group">
<label class="sr-only">Address</label>
<input type="text" class="form-control input-lg" name="address" placeholder="Address" value="" required="">
<p class="help-block text-danger"></p>
</div>
<div class="col-md-12 form-group">
<label class="sr-only">E-mail Address</label>
<input type="email" class="form-control input-lg" name="email" placeholder="E-mail Address" value="" required="">
<p class="help-block text-danger"></p>
</div>
<div class="col-md-12 form-group">
<textarea class="form-control input-lg" rows="7" name="message" placeholder="Message - Please include Address and Telephone number" required=""></textarea>
<p class="help-block text-danger"></p>
</div>
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-lg btn-round btn-dark" >Send Email</button>
</div>
</div><!-- .row -->
</form>
<!-- Ajax response -->
<div id="contact-response" class="ajax-response text-center"></div>
</div>
</div>
And here is the php:
<?php
// Mail settings
$to = "****#*******.co.uk";
$subject = "PB Enquiry Form - " . $_REQUEST['lastname'];
// You can put here your email
$header = "From:****#*******.co.uk\r\n";
$header.= "MIME-Version: 1.0\r\n";
$header.= "Content-Type: text/plain; charset=utf-8\r\n";
$header.= "X-Priority: 1\r\n";
if (isset($_POST["name"]) && isset($_POST["lastname"]) && isset($_POST["email"]) && isset($_POST["message"])) {
$content = "First Name: " . $_POST["name"] . "\r\n";
$content .= "Last Name: " . $_POST["lastname"] . "\r\n";
$content .= "Address: " . $_POST["address"] . "\r\n";
$content .= "Email: " . $_POST["email"] . "\r\n";
$content .= "Message: " . $_POST["message"] . "\r\n";
if (mail($to, $subject, $content, $header)) {
$result = array(
"message" => "Thank you for contacting us.",
"sendstatus" => 1
);
echo json_encode($result);
} else {
$result = array(
"message" => "Sorry, something is wrong.",
"sendstatus" => 0
);
echo json_encode($result);
}
}
I cannot figure out why it won't work and would be delighted if someone could help me.
If you do have a solution then please give an example of how to input the solution as I am new to the languages, Thank you!

My street input field wont work on submission

I was wondering if anyone could help me with my issue,
When ever the form is submitted the street form does not show up in the email I receive. I don't understand why it might not be working I've looked through the php and JS but cant understand why it won't work.
Here i the JS co
(function($){ $(document).ready(function() {
/* ---------------------------------------------- /*
* Contact form ajax
/* ---------------------------------------------- */
$('#contact-form').find('input,textarea').jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault();
var submit = $('#contact-form submit');
var ajaxResponse = $('#contact-response');
var name = $('#contact-form [name="name"]').val();
var lastname = $('#contact-form [name="lastname"]').val();
var email = $('#contact-form [name="email"]').val();
var street = $('#contact-form [name="street"]').val();
var message = $('#contact-form [name="message"]').val();
$.ajax({
type: 'POST',
url: 'assets/php/contact.php',
dataType: 'json',
data: {
name: name,
lastname: lastname,
email: email,
street: street,
message: message,
},
cache: false,
beforeSend: function(result) {
submit.empty();
submit.append('<i class="fa fa-cog fa-spin"></i> Wait...');
},
success: function(result) {
if(result.sendstatus == 1) {
ajaxResponse.html(result.message);
$form.fadeOut(500);
} else {
ajaxResponse.html(result.message);
}
}
});
}
});
}); })(jQuery);
Here is the php:
<?php
// Mail settings
$to = "";
$subject = "PB Enquiry Form - " . $_REQUEST['lastname'];
// You can put here your email
$header = "From:\r\n";
$header.= "MIME-Version: 1.0\r\n";
$header.= "Content-Type: text/plain; charset=utf-8\r\n";
$header.= "X-Priority: 1\r\n";
if (isset($_POST["name"]) && isset($_POST["lastname"]) && isset($_POST["email"]) && isset($_POST["message"])) {
$content = "First Name: " . $_POST["name"] . "\r\n";
$content .= "Last Name: " . $_POST["lastname"] . "\r\n";
$content .= "Email: " . $_POST["email"] . "\r\n";
$content .= "Street: " . $_POST["street"] . "\r\n";
$content .= "Message: " . $_POST["message"] . "\r\n";
if (mail($to, $subject, $content, $header)) {
$result = array(
"message" => "Thank you for contacting us.",
"sendstatus" => 1
);
echo json_encode($result);
} else {
$result = array(
"message" => "Sorry, something is wrong.",
"sendstatus" => 0
);
echo json_encode($result);
}
}
And here is the html:
<form id="contact-form" method="post" novalidate>
<div class="row">
<div class="col-md-6 form-group">
<label class="sr-only">First Name</label>
<input type="text" class="form-control input-lg" name="name" placeholder="First Name" value="" required="">
<p class="help-block text-danger"></p>
</div>
<div class="col-md-6 form-group">
<label class="sr-only">Last Name</label>
<input type="text" class="form-control input-lg" name="lastname" placeholder="Last Name" value="" required="">
<p class="help-block text-danger"></p>
</div>
<div class="col-md-12 form-group">
<label class="sr-only">E-mail Address</label>
<input type="email" class="form-control input-lg" name="email" placeholder="E-mail Address" value="" required="">
<p class="help-block text-danger"></p>
</div>
<div class="col-md-12 form-group">
<label class="sr-only">Street</label>
<input type="text" class="form-control input-lg" name="street" placeholder="Street" value="" required="">
<p class="help-block text-danger"></p>
</div>
<div class="col-md-12 form-group">
<textarea class="form-control input-lg" rows="7" name="message" placeholder="Message" required=""></textarea>
<p class="help-block text-danger"></p>
</div>
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-lg btn-round btn-dark" >Send Email</button>
</div>
</div><!-- .row -->
</form>
I left the Email out on purpose,
Thank You for helping!

How to make a reCAPTCHA required?

I'm making a form, I'm using AJAX to send it, but I also have a google reCAPTCHA in it and I don't know how to make it required.
I don't want to send the form without checked reCAPTCHA and if it's not checked then I want to show the information about this. I tried lots of things but I still don't know what's wrong.
My HTML code:
<div class="form">
<div id="form-messages"></div>
<form id="formularz" method="post" action="mailer.php">
<div class="line">
<input id="name" name="name" type="text" placeholder="Imię"/>
<input id="email" name="email" type="email" placeholder="E-mail" required/>
</div>
<div class="line2">
<input id="temat" name="temat" type="text" placeholder="Temat" />
<textarea id="wiadomosc" name="message" placeholder="Wiadomość" required></textarea>
</div>
<div class="line3">
<div class="g-recaptcha captcha" data-sitekey="6Lcu9xgUAAAAAPbwLwKWILHGxu-X0cPjAhRtYM2R"></div>
<input id="submit" name="submit" type="submit" value="Wyślij">
<div style="clear:both;"></div>
</div>
</form>
</div>
My js code:
$(function() {
var form = $('#formularz');
var formMessages = $('#form-messages');
$(form).submit(function(e) {
e.preventDefault();
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function() {
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
$(formMessages).text('Dziękujemy, wiadomość została wysłana.');
$('#name').val('');
$('#email').val('');
$('#temat').val('');
$('#wiadomosc').val('');
})
.fail(function() {
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
$(formMessages).text('Oops! Wiadomość nie mogła zostać wysłana.');
});
});
});
And PHP code:
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$message = trim($_POST["message"]);
$recipient = "karol_guzikowski#wp.pl";
$subject = "Nowa wiadomość od $name";
$email_content = "Od: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Wiadomość:\n$message\n";
$email_headers = "Od: $name <$email>";
$wszystko_OK=true;
$sekret = "6Lcu9xgUAAAAAPbwLwKWILHGxu-X0cPjAhRtYM2R";
$sprawdz = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$sekret.'&response='.$_POST['g-recaptcha-response']);
$odpowiedz = json_decode($sprawdz);
if (!$odpowiedz->success){
$wszystko_OK=false;
http_response_code(600);
echo "Proszę zaznaczyć reCAPTCHE";
}
if($wszystko_OK==true){
mail($recipient, $subject, $email_content, $email_headers);
}
}

$(function() {
var form = $('#formularz');
var formMessages = $('#form-messages');
$(form).submit(function(e) {
e.preventDefault();
//Recaptcha Validation
if (!$('#g-recaptcha-response').val().trim().length) {
alert("Recaptcha is required")
return false;
}
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function() {
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
$(formMessages).text('Dziękujemy, wiadomość została wysłana.');
$('#name').val('');
$('#email').val('');
$('#temat').val('');
$('#wiadomosc').val('');
})
.fail(function() {
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
$(formMessages).text('Oops! Wiadomość nie mogła zostać wysłana.');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
<div id="form-messages"></div>
<form id="formularz" method="post" action="mailer.php">
<div class="line">
<input id="name" name="name" type="text" placeholder="Imię" />
<input id="email" name="email" type="email" placeholder="E-mail" required/>
</div>
<div class="line2">
<input id="temat" name="temat" type="text" placeholder="Temat" />
<textarea id="wiadomosc" name="message" placeholder="Wiadomość" required></textarea>
</div>
<div class="line3">
<div class="g-recaptcha captcha" data-sitekey="6Lcu9xgUAAAAAPbwLwKWILHGxu-X0cPjAhRtYM2R"></div>
<input id="submit" name="submit" type="submit" value="Wyślij">
<div style="clear:both;"></div>
</div>
</form>
</div>

Hope this will work for you.
<form class="p-b-lg" id="enquiry-form" method="post" action="">
<div class="form-group">
<input class="form-control form-control-lg" placeholder="Email" name="email1" type="email">
</div>
<div class="form-group">
<input class="form-control form-control-lg" placeholder="Contact Phone" name="number" type="number" required>
</div>
<div class="form-group">
<div class="g-recaptcha" id="rcaptcha" data-sitekey="sitekey goes here"></div>
<span id="captcha" style="margin-left:100px;color:red" />
</div>
<div class="form-group">
<button class="btn btn-lg btn-secondary-outline team-btn contact-btn" type="submit" name="submit">Send</button>
</div>
</form>
<?php
if(isset($_POST['submit'])){
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])) {
//your site secret key
$secret = 'secret key goes here';
//get verify response data
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
$responseData = json_decode($verifyResponse);
if($responseData->success) {
$email1 = $_POST['email1'];
$contact_phone = $_POST['contact_phone'];
<?php }
}
else { ?>
<script>alert("Please fill captcha.");</script>
<?php }
}
?>

AJAX Form Not Submitting or doing anything

I have an AJAX form that I am trying to get working and I cannot figure out why. I am not receiving and PHP errors as I have checked the log files. Basically, nothing is happening when I submit the form. I have another form that is very similar and it is working, so I do not know what is going on. Probably something very simple that I am overlooking.
Here is the form:
<div id="give-away-form">
<form method="post" action="ajax.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-2 hidden-xs"></div>
<label for="give_away_name" class="col-sm-2 col-xs-12 control-label">Name</label>
<div class="col-sm-5 col-xs-12">
<input type="text" class="form-control" name="give_away_name" id="give_away_name" placeholder="Name">
</div>
<div class="col-sm-3 hidden-xs"></div>
</div>
<div class="form-group">
<div class="col-sm-2 hidden-xs"></div>
<label for="give_away_email" class="col-sm-2 col-xs-12 control-label">Email</label>
<div class="col-sm-5 col-xs-12">
<input type="text" class="form-control" name="give_away_email" id="give_away_email" placeholder="Email">
</div>
<div class="col-sm-3 hidden-xs"></div>
</div>
<div class="form-group">
<div class="col-sm-2 hidden-xs"></div>
<label for="give_away_phone_no" class="col-sm-2 col-xs-12 control-label">Phone No</label>
<div class="col-sm-5 col-xs-12">
<input type="text" class="form-control" name="give_away_phone_no" id="give_away_phone_no" placeholder="Phone No">
</div>
<div class="col-sm-3 hidden-xs"></div>
</div>
<div class="form-group">
<!-- Street -->
<div class="col-sm-2 hidden-xs"></div>
<label for="give_away_street" class="col-sm-2 col-xs-12 control-label">Street</label>
<div class="col-sm-5 col-xs-12">
<input class="form-control" name="give_away_street" id="give_away_street" placeholder="Street">
</div>
<div class="col-sm-3 hidden-xs"></div>
</div>
<div class="form-group">
<!-- End Street -->
<!-- City -->
<div class="col-sm-2 hidden-xs"></div>
<label for="give_away_city" class="col-sm-2 col-xs-12 control-label">City</label>
<div class="col-sm-2 col-xs-12">
<input class="form-control" name="give_away_city" id="give_away_city" placeholder="City">
</div>
<!-- End City -->
<!-- State -->
<label for="give_away_state" class="col-sm-1 col-xs-12 control-label">State</label>
<div class="col-sm-2 col-xs-12">
<select class="form-control" name="give_away_state" id="give_away_state">
<option value="">State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<!-- <div class="col-sm-3 hidden-xs"></div> -->
</div>
<div class="form-group">
<div class="col-sm-2 hidden-xs"></div>
<label class="col-sm-2 col-xs-12 control-label hidden-xs"> </label>
<div class="col-sm-5 col-xs-12 text-left">
<input type="hidden" name="action" value="give_away_form" />
<input type="submit" class="btn btn-primary" value="Submit">
<div class="clear"></div>
<div id="give_away_form_message"></div>
</div>
<div class="col-sm-3 hidden-xs"></div>
</div>
</form>
<!-- End Form -->
</div>
Here is the PHP:
if(isset($_POST['action']) && $_POST['action'] == 'give_away_form') {
$result = array();
$give_away_name = strip_tags(trim($_POST['give_away_name']));
$give_away_email = strip_tags(trim($_POST['give_away_email']));
$give_away_phone_no = strip_tags(trim($_POST['give_away_phone_no']));
$give_away_street = strip_tags(trim($_POST['give_away_street']));
$give_away_city = strip_tags(trim($_POST['give_away_city']));
$give_away_state = strip_tags(trim($_POST['give_away_state']));
if($give_away_name == '')
$result['error']['give_away_name'] = 'Name required.';
if($give_away_email == '')
$result['error']['give_away_email'] = 'Email address required.';
else if(!filter_var($give_away_email, FILTER_VALIDATE_EMAIL))
$result['error']['give_away_email'] = 'Invalid email address.';
if($give_away_phone_no == '')
$result['error']['give_away_phone_no'] = 'Phone no required.';
if($give_away_comment == '')
$result['error']['give_away_comment'] = 'Comment required.';
if(!isset($result['error'])) {
$to = $give_away_to;
$subject = $give_away_subject;
$message = '<p>Hi,</p>';
$message .= '<p>You have received this message from give_away form on Hope Starts Here - Columbus</p>';
$message .= '<p><strong>Name:</strong>'.$give_away_name.'</p>';
$message .= '<p><strong>Email:</strong>'.$give_away_email.'</p>';
$message .= '<p><strong>Phone No:</strong>'.$give_away_phone_no.'</p>';
$message .= '<p><strong>Comment:</strong><br>'.$give_away_comment.'</p>';
$message .= '<p> </p>';
$message .= '<p><strong>Thank You.</strong></p>';
$headers = "From: " . strip_tags($give_away_from) . "\r\n";
$headers .= "Reply-To: ". strip_tags($give_away_email) . "\r\n";
//$headers .= "CC: abc#example.com\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
if(#mail($to, $subject, $message, $headers)) {
$result['success'] = 'Thank you for entering to win! Once the names are drawn, we will contact the winners by email or phone.';
} else {
$result['error']['give_away_form_message'] = 'Something wrong please try again...';
}
}
echo json_encode($result);
die;
}
And, the JS:
$('#give-away-form form').submit(function(e) {
$('span.form-message').remove();
e.preventDefault();
$this = $(this);
var url = $this.attr('action');
var data = $this.serialize();
$.ajax({
url: url,
method: 'POST',
data: data,
dataType: 'json',
success: function(response) {
if(response.error) {
var focus_field = '';
$.each(response.error, function(id, message) {
$('#'+id).after('<span class="form-message label label-danger">' + message + '</span>');
if(focus_field == '')
focus_field = id;
});
$('#'+focus_field).focus();
}
if(response.success) {
$('#give_away_form_message').after('<span class="form-message label label-success">' + response.success + '</span>');
$this[0].reset();
}
}
});
});

Can you try this code and tell us, which alerts have worked?
$('#give-away-form form').submit(function(e) {
$('span.form-message').remove();
e.preventDefault();
$this = $(this);
var url = $this.attr('action');
var data = $this.serialize();
$.ajax({
url : url,
method : 'POST',
data : data,
dataType : 'json',
success : function(response) {
alert("Number 1");
if(response.error) {
alert("Number 2");
var focus_field = '';
$.each(response.error, function(id, message) {
alert("Number 3");
$('#'+id).after('<span class="form-message label label-danger">' + message + '</span>');
if(focus_field == '')
focus_field = id;
});
$('#'+focus_field).focus();
}
if(response.success) {
alert("Number 4");
$('#give_away_form_message').after('<span class="form-message label label-success">' + response.success + '</span>');
$this[0].reset();
}
}
});
});

Could you please add echo "page works"; before your PHP code and then try to access it in your browser without the ajax. Just go to ajax.php on your server and see if the page is accessible and share the result with us.

I found the problem. I copied this form from another form and forgot to change a couple of variables.
if($give_away_comment == '')
$result['error']['give_away_comment'] = 'Comment required.';
There is no $give_away_comment.
Thanks for all of the help from all of you!