I have some html5 form fields on a website that I manage that push the data inputted by users to a php file that sends an email to a dedicated yahoo email for the site.
Here is the html:
<form role="form" method="post" action="php/contact-us.php" lang="es" id="contactForm">
<div class="row">
<div class="form-group col-lg-4 required">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" required placeholder="Enter Name" />
</div>
<div class="form-group col-lg-4 required">
<label for="email">Email</label>
<input type="email" class="form-control" name="email" required placeholder="Enter valid email" />
</div>
<div class="form-group col-lg-4">
<label for="phone">Phone Number</label>
<input type="tel" class="form-control" name="phone" placeholder="e.g. (000) 000 - 0000">
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12 required">
<label for="message">Mensaje</label>
<textarea class="form-control" rows="6" name="message" required placeholder="Write your message here"></textarea>
</div>
<div class="form-group col-lg-12">
<input type="hidden" name="save" value="contact">
<button type="submit" class="btn btn-default">Enviar</button>
</div>
</div>
</form>
Before, I did not have any validation on the fields, but I was getting empty emails with no user content so I thought people are just pushing the button without entering anything which I could also test myself. So I added the following validation JS, also eused webshim for unsupported browsers (and the required
tags in the form elements above):
<script>
$('#contactForm input[type=text], select, textarea').on('change invalid', function() {
var field = $(this).get(0);
field.setCustomValidity('');
if (!field.validity.valid) {
field.setCustomValidity('Please fill required fields');
}
});
$('#contactForm input[type=email]').on('change invalid', function() {
var field = $(this).get(0);
field.setCustomValidity('');
if (!field.validity.valid) {
field.setCustomValidity('Enter a valid email');
}
});
</script>
Previously I was getting the inputted email form the user and setting it as the senders email but I was having issues with certain email addresses, etc. So I defaulted it to a random email that would always work and just included the users inputted email in the message. Here is my php file (contact-us.php):
<?php
// Set your email below
$to = "<dedicatedemail>@yahoo.com";
// Receive and sanitize input
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$subject = "Request from website";
$headers = "From: no-reply@gmail.com";
// set up email
$msg = "Sender Information \nName: " . $name . "\nEmail: " . $email . "\nPhone: " . $phone . "\n\n" . $message;
$msg = wordwrap($msg,70);
// mail
mail($to,$subject,$msg,$headers);
header('Location: ../contact-thank-you.html');
?>
So first let me say that everything is working. When I test the functionality here everything works. I am able to send an email from my ios device and my laptop and I have had a couple friends send from their android devices. The validation works for me so it does not let me send an email without at least filling the required fields out. I was getting empty emails before I added validation and setting the sender email to a default one. However I still get empty emails even after all the changes. When I test I cannot test across all platforms and browsers but I cannot force an empty email after I added checks. Is my validation failing somewhere? I feel like people are filling in the fields but somehow the email is coming in empty. When I say empty I mean the stuff that I programmatically add to the message comes through but the actual info that the user is suppose to input does not? How is this happening?
Always perform server side validation and confirm there is a POST incoming. Otherwise even something as simple as a webcrawler will tigger empty emails.
<?php
if (empty($_POST['email']) || empty($_POST['name'])) {
// Respond with a proper error message
...
} else {
// Send email
$to = "<dedicatedemail>@yahoo.com";
$name = $_POST['name'];
$email = $_POST['email'];
...
}