JQuery Contact Form

I have been working off a tutorial on Net Tuts to create a contact form for my website. Link for tutorial below:

http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

I have it functioning however have been dabbling with a ways to add an additional field into the form for comments. All other fields are submitted fine to both email addresses (my website email and the sender gets copy also) but the comment field keeps displaying “No comment entered”

The code for my form is as follows:

[contact.php page]

<div id="content">
<div id="contact_form">
    <div class="padding">
<h2>Contact Me</h2>
<p>If you would like to contact me regarding a quote or indeed anything relating to the website
please use the form below and I will get to you as soon as possible. Thanks!</p>
<form name="contact" method="post" action="">
   <fieldset>
     <label for="name" id="name_label">Name</label>
     <input type="text" name="name" id="name" size="30" value="" class="text-input" />
     <label class="error" for="name" id="name_error">This field is required.</label><br />

     <label for="email" id="email_label">Return Email</label>
     <input type="text" name="email" id="email" size="30" value="" class="text-input" />
     <label class="error" for="email" id="email_error">This field is required.</label><br />

     <label for="phone" id="phone_label">Return Phone</label>
     <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
     <label class="error" for="phone" id="phone_error">This field is required.</label><br />


     <label for="comment" id="comment_label">Comment</label>
     <textarea name="comments" rows="10" cols="30" ></textarea>
     <input type="text" name="comment" id="comment" size="300" value="" class="text-input" />
     <label class="error" for="comment" id="comment_error">This field is required.</label><br />
     <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
   </fieldset>
 </form>    
    </div>
</div>
</div>

[process.php]

   <?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['phone'])) && (strlen(trim($_POST['phone'])) > 0)) {
    $phone = stripslashes(strip_tags($_POST['phone']));
} else {$phone = 'No phone entered';}
if ((isset($_POST['comment'])) && (strlen(trim($_POST['comment'])) > 0)) {
    $comment = stripslashes(strip_tags($_POST['comment']));
} else {$comment = 'No comment 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>Phone</td>
    <td><?=$phone;?></td>
  </tr>
   <tr bgcolor="#eeffee">
    <td>Comment</td>
    <td><?=$comment;?></td>
   </tr>
</table>
</body>
</html>
<?php
$body = ob_get_contents();

$to = '';
$email = '';
$fromaddress = "";
$fromname = "Online Contact";
$test = $comment;

require("phpmailer.php");

$mail = new PHPMailer();

$mail->From     = $_POST['email'];
$mail->FromName = "Contact Form";
$mail->AddAddress("contact@ncwebcreative.co.uk","Name 2");


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

$mail->Subject  =  "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.comrnReply-To: $emailrnX-Mailer: DT_formmail");
  exit;
}
?>

This entry was posted in Uncategorized and tagged , . Bookmark the permalink.

2 Responses to JQuery Contact Form

  1. chapman84 says:

    Try getting rid of this line:

    <input type="text" name="comment" id="comment" size="300" value="" class="text-input" />
    

    You have a text input field inside of a text area. You might need to add the id="comment" to your text area depending on the rest of your code.

    Also change the text areas name to comment.

  2. NATHAN C says:

    Needed to change the code:

    $("input#comment").focus();
    

    to

    $("textarea#comment").focus();
    

    to be able to use text areas with jquery

    Thanks anyways

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>