add array telephone in existing php form - php

Question

I have a form in my website, and it works well. It was part of a oakler template and so far I received subject,email,message information back.
I added a telephone field trying to follow the structure of the form but am no php expert and don't know what is not working.
In the email sent I receive the field 'telephone' but it is empty.
Please help.
The website is this: http://ruidematos.co.uk/contact-psychologist-hypnotherapist-london-harley-street
The form html is this:
<form id="contactForm" action="php/contact-form.php" method="POST">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<input type="text" placeholder="Subject" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control input-lg" name="subject" id="subject" required>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<textarea maxlength="5000" placeholder="Message" data-msg-required="Please enter your message." rows="10" class="form-control input-lg" name="message" id="message" required></textarea>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<input type="text" placeholder="Your Name" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control input-lg" name="name" id="name" required>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<input type="email" placeholder="Your E-mail" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control input-lg" name="email" id="email" required>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<input type="text" placeholder="Your Telephone" value="" data-msg-required="Please enter your telephone." data-msg-email="Please enter a valid number." maxlength="30" class="form-control input-lg" name="phone" id="phone" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" value="Send Message" class="btn btn-primary btn-lg mb-xs" data-loading-text="Loading...">
</div>
</div>
</form>
The PHP code is this:
session_cache_limiter('nocache');
header('Expires: ' . gmdate('r', 0));
header('Content-type: application/json');
require_once('php-mailer/PHPMailerAutoload.php');
// Step 1 - Enter your email address below.
$email = 'info#ruidematos.co.uk';
// If the e-mail is not working, change the debug option to 2 | $debug = 2;
$debug = 0;
$subject = $_POST['subject'];
$fields = array(
0 => array(
'text' => 'Name',
'val' => $_POST['name']
),
1 => array(
'text' => 'Email address',
'val' => $_POST['email']
),
2 => array(
'text' => 'Message',
'val' => $_POST['message']
),
3 => array(
'text' => 'Telephone',
'val' => $_POST['phone']
)
);
$message = '';
foreach($fields as $field) {
$message .= $field['text'].": " . htmlspecialchars($field['val'], ENT_QUOTES) . "<br>\n";
}
$mail = new PHPMailer(true);
try {
$mail->SMTPDebug = $debug; // Debug Mode
// Step 2 (Optional) - If you don't receive the email, try to configure the parameters below:
//$mail->IsSMTP(); // Set mailer to use SMTP
//$mail->Host = 'mail.yourserver.com'; // Specify main and backup server
//$mail->SMTPAuth = true; // Enable SMTP authentication
//$mail->Username = 'user#example.com'; // SMTP username
//$mail->Password = 'secret'; // SMTP password
//$mail->SMTPSecure = 'tls'; // Enable encryption, 'ssl' also accepted
//$mail->Port = 587; // TCP port to connect to
$mail->AddAddress($email); // Add another recipient
//$mail->AddAddress('person2#domain.com', 'Person 2'); // Add a secondary recipient
//$mail->AddCC('person3#domain.com', 'Person 3'); // Add a "Cc" address.
//$mail->AddBCC('person4#domain.com', 'Person 4'); // Add a "Bcc" address.
$mail->SetFrom($email, $_POST['name']);
$mail->AddReplyTo($_POST['email'], $_POST['name']);
$mail->IsHTML(true); // Set email format to HTML
$mail->CharSet = 'UTF-8';
$mail->Subject = $subject;
$mail->Body = $message;
$mail->Send();
$arrResult = array ('response'=>'success');
} catch (phpmailerException $e) {
$arrResult = array ('response'=>'error','errorMessage'=>$e->errorMessage());
} catch (Exception $e) {
$arrResult = array ('response'=>'error','errorMessage'=>$e->getMessage());
}
if ($debug == 0) {
echo json_encode($arrResult);
}

Answer 1

You have added the HTML element for phone correctly, but it seems the Javascript handler that submits the form has a specified list of elements it fetches, and not the entire form.
Look in http://ruidematos.co.uk/js/views/view.contact.js , within the function $('#contactForm').validate( on line 26 the ajax call is performed and submits via POST the 4 elements name, email, subject, ,message:
$.ajax({
type: 'POST',
url: $form.attr('action'),
data: {
name: $form.find('#name').val(),
email: $form.find('#email').val(),
subject: $form.find('#subject').val(),
message: $form.find('#message').val()
}
})
After the subject line add one for phone too and it should work.
$.ajax({
type: 'POST',
url: $form.attr('action'),
data: {
name: $form.find('#name').val(),
email: $form.find('#email').val(),
subject: $form.find('#subject').val(),
phone: $form.find('#phone').val(),
message: $form.find('#message').val()
}
})

Answer 2

Your rename message to phone.
name: $form.find('#name').val(),
email: $form.find('#email').val(),
subject: $form.find('#subject').val(),
phone: $form.find('#phone').val(),
message: $form.find('#message').val()