Adding another line to a existing PHP Contact form - php

Question

I'm working on a simple single page site from a template. The contact from had only name email and message body. I tried adding the number. It shows up on the page, and the line shows up in the email, but the number does not actually come through.
Ive copied and pasted the existing code for one of the other data points and changed the id, type etc. for the phone number.
The page is live on test.wotactical.com
EDIT: Added the javascript code
PHP
<?php
// Put contacting email here
$php_main_email = "ffl#wotactical.com";
$php_sending_email = "contact#wotactical.com";
//Fetching Values from URL
$php_name = $_POST['ajax_name'];
$php_email = $_POST['ajax_email'];
$php_phone = $_POST['ajax_phone'];
$php_message = $_POST['ajax_message'];
//Sanitizing email
$php_email = filter_var($php_email, FILTER_SANITIZE_EMAIL);
//After sanitization Validation is performed
if (filter_var($php_email, FILTER_VALIDATE_EMAIL)) {
$php_subject = "New WOtactical contact form from " . $php_name;
// To send HTML mail, the Content-type header must be set
$php_headers = 'MIME-Version: 1.0' . "\r\n";
$php_headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$php_headers .= 'From:' . $php_sending_email. "\r\n"; // Sender's Email
$php_headers .= 'Cc:' . $php_email. "\r\n"; // Carbon copy to Sender
$php_template = '<div style="padding:50px;">Hello ' . $php_name . ',<br/>'
. 'Thank you for contacting us.<br/><br/>'
. '<strong style="color:#f00a77;">Name:</strong> ' . $php_name . '<br/>'
. '<strong style="color:#f00a77;">Number:</strong> ' . $php_phone . '<br/>'
. '<strong style="color:#f00a77;">Email:</strong> ' . $php_email . '<br/>'
. '<strong style="color:#f00a77;">Message:</strong> ' . $php_message . '<br/><br/>'
. 'This is a Contact Confirmation mail.'
. '<br/>'
. 'We will contact you as soon as possible .</div>';
$php_sendmessage = "<div style=\"background-color:#f5f5f5; color:#333;\">" . $php_template . "</div>";
// message lines should not exceed 70 characters (PHP rule), so wrap it
$php_sendmessage = wordwrap($php_sendmessage, 70);
// Send mail by PHP Mail Function
mail($php_main_email, $php_subject, $php_sendmessage, $php_headers);
echo "";
} else {
echo "<span class='contact_error'>* Invalid email *</span>";
}
?>
HTML
<!-- CONTACT1 -->
<div class="edina_tm_section" id="contact">
<div class="edina_tm_main_title_holder_wrap contact">
<div class="number_wrap">
<span>06</span>
</div>
<div class="title_wrap">
<span>Contact Form</span>
</div>
</div>
<div class="edina_tm_contact_wrap">
<div class="short_info">
<div class="container">
<div class="subtitle">
<p class="wow fadeIn" data-wow-duration="1.2s">Special order, FFL Transfer, consignment or just have questions? We're happy to help.</p>
</div>
</div>
</div>
<div class="main_input_wrap">
<form action="/" method="post" class="contact_form" id="contact_form">
<div class="returnmessage" data-success="Your message has been received, We will contact you soon."></div>
<div class="empty_notice"><span>Please Fill Required Fields</span></div>
<div class="wrap wow fadeIn" data-wow-duration="1.2s" data-wow-delay="0.2s">
<input id="name" type="text" placeholder="Your Name">
</div>
<div class="wrap wow fadeIn" data-wow-duration="1.2s" data-wow-delay="0.4s">
<input id="email" type="text" placeholder="Your Email">
</div>
<div class="wrap wow fadeIn" data-wow-duration="1.2s" data-wow-delay="0.4s">
<input id="phone" type="tel" placeholder="Contact Number ex 123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
</div>
<div class="wrap wow fadeIn" data-wow-duration="1.2s" data-wow-delay="0.6s">
<textarea id="message" placeholder="Type of inquiry, and/or details"></textarea>
</div>
<div class="edina_tm_button wow fadeIn" data-wow-duration="1.2s" data-wow-delay="0.8s">
<a id="send_message" href="#">Send Message</a>
</div>
</form>
</div>
</div>
</div>
<!-- /CONTACT1 -->
javascript
// -----------------------------------------------------
// ---------------- CONTACT FORM -----------------
// -----------------------------------------------------
function edina_tm_contact_form(){
"use strict";
jQuery(".contact_form #send_message").on('click', function(){
var name = jQuery(".contact_form #name").val();
var email = jQuery(".contact_form #email").val();
var phone = jQuery(".contact_form #phone").val();
var message = jQuery(".contact_form #message").val();
var subject = jQuery(".contact_form #subject").val();
var success = jQuery(".contact_form .returnmessage").data('success');
jQuery(".contact_form .returnmessage").empty(); //To empty previous error/success message.
//checking for blank fields
if(name===''||email===''||phone===''||message===''){
jQuery('div.empty_notice').slideDown(500).delay(2000).slideUp(500);
}
else{
// Returns successful data submission message when the entered information is stored in database.
jQuery.post("modal/contact.php",{ ajax_name: name, ajax_email: email, ajax_phone: phone, ajax_message:message, ajax_subject: subject}, function(data) {
jQuery(".contact_form .returnmessage").append(data);//Append returned message to message paragraph
if(jQuery(".contact_form .returnmessage span.contact_error").length){
jQuery(".contact_form .returnmessage").slideDown(500).delay(2000).slideUp(500);
}else{
jQuery(".contact_form .returnmessage").append("<span class='contact_success'>"+ success +"</span>");
jQuery(".contact_form .returnmessage").slideDown(500).delay(4000).slideUp(500);
}
if(data===""){
jQuery("#contact_form")[0].reset();//To reset form fields on success
}
});
}
return false;
});
}

Answer 1

I'm guessing that if you might remove your regex pattern:
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
here in this element:
<div class="wrap wow fadeIn" data-wow-duration="1.2s" data-wow-delay="0.4s">
<input id="phone" type="tel" placeholder="Contact Number ex 123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
and change it to just:
<div class="wrap wow fadeIn" data-wow-duration="1.2s" data-wow-delay="0.4s">
<input id="phone" type="tel" placeholder="Contact Number ex 123-456-7890" required>
and test it, it would likely work. Or you might just test it with a 888-888-8888 number and see if it would work.