Jquery contact form

programming web dev
1

Hi guys, I’m not 100% sure if this is a Jquery problem or a problem with my PHP, but I’m having trouble developing a contact form for my website.

I am not a programmer, but I’ve been reading up and following a few tutorials on how to create a contact form. I am attempting to create a contact form that doesn’t require a page refresh, and sends a dataString through a seperate PHP file using PHPMailer. I’ve looked through everything and I’m not really sure why it’s not working, hopefully someone can help!

The following is the code and file structure I am using. I’ve been testing the site at http://www.ryankeon.com/

*Html for the form
*

    <div id="contactRight">
      <form id="form" action="" method="post" >
        <fieldset>
          <p>
            <label for="name" class="comment" id="name_label">Your Name</label>
            <input type="text" name="name" id="name" size="30" class="text-input"/>
            <label class="error" for="name" id="name_error"><img src="images/exclamation.png" /></label>
          </p>
          <p>
            <label for="email" class="comment" id="comment_label">Email</label>
            <input type="text" name="email" id="email" size="30" class="text-input"/>
            <label class="error" for="name" id="email_error"><img src="images/exclamation.png" /></label>
          </p>
          <p>
            <label for="web" class="comment" id="web_label">Website</label>
            <input type="text" name="web" id="web" size="30"  class="text-input"/>
          </p>
          <p>
            <label for="message" class="comment" id="message_label">What would you like to say?</label>
            <textarea name="message" id="message" cols="30" rows="10"></textarea>
          <p class="submit">
            <button type="submit" value="Send" id="submit_btn" class="button">Send</button>
          </p>
        </fieldset>
      </form>
    </div>

*Jquery code for taking form data


$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  $(".button").click(function() {
        // validate and process form
        // first hide any error messages
    $('.error').hide();
        
      var name = $("input#name").val();
        if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }
        var email = $("input#email").val();
        if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
    
    var message = $("#message").val();

        
        var dataString = 'name='+ name + '&email=' + email + '&message=' + message;
        //alert (dataString);return false;
        
      $.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      
      success: function() {
        $('#contactRight').html("<div id='message'></div>");
        $('#message').html("<h1 class='text-center'>Your message has been sent!</h1>")
        .append("<p class='text-center'>I'll get back to you soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/tick.png' class='text-center' />");
        });
      }
     });
    return false;
    });
});

*PHP used to process data passed from Jquery
*

<?php
if ((isset($_POST['name'])) && (strlen(trim($_POST['name'])) > 0)) {
    $name = stripslashes(strip_tags($_POST['name']));
} else {$name = 'No name entered';}
if ((isset($_POST['email'])) && (strlen(trim($_POST['email'])) > 0)) {
    $email = stripslashes(strip_tags($_POST['email']));
} else {$email = 'No email entered';}
if ((isset($_POST['message'])) && (strlen(trim($_POST['message'])) > 0)) {
    $phone = stripslashes(strip_tags($_POST['message']));
} else {$phone = 'No message entered';}
ob_start();
?>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<table width="550" border="1" cellspacing="2" cellpadding="2">
  <tr bgcolor="#eeffee">
    <td>Name</td>
    <td><?=$name;?></td>
  </tr>
  <tr bgcolor="#eeeeff">
    <td>Email</td>
    <td><?=$email;?></td>
  </tr>
  <tr bgcolor="#eeffee">
    <td>Message</td>
    <td><?=$message;?></td>
  </tr>
</table>
</body>
</html>
<?
$body = ob_get_contents();

$to = 'Ryan';
$email = 'mail@ryankeon.com';
$fromaddress = "mail@ryankeon.com";
$fromname = "Online Contact";

require("phpmailer.php");

$mail = new PHPMailer();

$mail->From     = "mail@ryankeon.com";
$mail->FromName = "Contact Form";

$mail->WordWrap = 50;
$mail->IsHTML(true);

$mail->Subject  =  "Demo Form:  Contact form submitted";
$mail->Body     =  $body;
$mail->AltBody  =  "This is the text-only body";

if(!$mail->Send()) {
    $recipient = 'your_email@example.com';
    $subject = 'Contact form failed';
    $content = $body;    
  mail($recipient, $subject, $content, "From: mail@yourdomain.com
Reply-To: $email
X-Mailer: DT_formmail");
  exit;
}
?>

I have the html in a file called index.html, with the JavaScript files in a folder called JS, and the PHP files in a folder called Bin. I set the permissions of the PHP files to 774.

Problem 1
The JavaScript seems to work fine when testing locally, and will even output the data in an alert. However, once uploaded it doesn’t seem to work at all, I can’t even get the alert to display.

**Problem 2
**I cannot get the PHP to post any data to my email whatsoever. I’ve tried a few ways, and currently have implemented PHPMailer. For whatever reason I can’t get an email to send.

I’ve been toiling for a day now, and I’m at an absolute loss. Like I said, I’m no programmer, just piecing together various tutorials and reading the Jquery documentation. I’m probably doing it totally wrong! Any help would be greatly appreciated :slight_smile: