0

So, I got this code snippet from Github for a simple contact form using PHP but it is not functioning. I have added my own email address and linked PHP and JS file to my html. The form does not get auto reset, neither do I get the mail for the details filled. Nothing happens.

Is there something that I am missing? Do I need to add something for AJAX?

Is there any code snippet you could direct me to for a functional contact form sending message to my email id that would also work. Thanks in advance!

GitHub Link

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Contact Form</title>
    <link rel="stylesheet" href="style.css"/>
  
   </head>
  <body>
    
    <form action="" id="form">
      <label for="email">Email:</label>
      <input type="text" name="email" id="email" placeholder="email@example.com"><br>
      <label for="subject">Subject:</label>
      <input type="text" name="subject" id="subject" placeholder="subject"><br>
      <label for="message">Message:</label>
      <textarea name="message" id="message" placeholder="message"></textarea><br>
      <button name="submit" id="submit">Send</button>
      <label id="info"></label>
    </form>
      <?php include 'mailer.php';?>
 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js.js"></script>
  </body>
</html>

JAVASCRIPT

$(document).ready(function() {

  var form = $('#form'),
      email = $('#email'),
      subject = $('#subject'),
      message = $('#message'),
      info = $('#info'),
      submit = $("#submit");
  
  form.on('input', '#email, #subject, #message', function() {
    $(this).css('border-color', '');
    info.html('').slideUp();
  });
  
  submit.on('click', function(e) {
    e.preventDefault();
    if(validate()) {
      $.ajax({
        type: "POST",
        url: "mailer.php",
        data: form.serialize(),
        dataType: "json"
      }).done(function(data) {
        if(data.success) {
          email.val('');
          subject.val('');
          message.val('');
          info.html('Message sent!').css('color', 'green').slideDown();
        } else {
          info.html('Could not send mail! Sorry!').css('color', 'red').slideDown();
        }
      });
    }
  });
  
  function validate() {
    var valid = true;
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    
    if(!regex.test(email.val())) {
      email.css('border-color', 'red');
      valid = false;
    }
    if($.trim(subject.val()) === "") {
      subject.css('border-color', 'red');
      valid = false;
    }
    if($.trim(message.val()) === "") {
      message.css('border-color', 'red');
      valid = false;
    }
    
    return valid;
  }

});

PHP

<?php

if($_POST) {
  $to = "abc@xyz.com"; // your mail here
  $email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
  $subject = filter_var($_POST["subject"], FILTER_SANITIZE_STRING);
  $message = filter_var($_POST["message"], FILTER_SANITIZE_STRING);
  $body = "Message: $message\nE-mail: $email";
  
  if(@mail($to, $subject, $body)) {
    $output = json_encode(array('success' => true));
    die($output);
  } else {
    $output = json_encode(array('success' => false));
    die($output);
  }
}
Mario Petrovic
  • 4,128
  • 5
  • 26
  • 43

0 Answers0