javascriptphphtmlwebshim

Getting Empty emails using html5 form and php


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?


Solution

  • 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'];
        ...
    }