contact-form.js

**fivehorisun** · 14 Oct 2010, 08:53 AM

Hello all. I'm new to this forum, so my apologies if this post is not in the correct section. I think it is though.

I'm new to using .js and .php and have a few questions about the contact form I'm trying to set up on a website.

I have three files: index.php, contact-form.js, send.php. What I'm trying to accomplish is to have the form sent to an email address. I have everything working, except when I get the email it doesn't display the name or message from the from. I know I have something incorrect on send.php. Here is my code for each file. Any help is greatly appreciated!!!

*****index.php*****

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title></title>

<script type="text/javascript" src="http://pdbadvertising.com/testform/jquery-1.2.6.min.js" /></script><script type="text/javascript" src="http://mysite.com/testform/jquery.color.js" /></script><script type="text/javascript" src="http://mysite.com/testform/contact-form.js" /></script>
<link rel="stylesheet" href="http://mysite.com/testform/style.css" type="text/css" media="screen" />
</head>

<body>

<div id="content">
<div id="bottom">

<div id="main-content">
<div class="col1">
<h3 class="solo">Send Us a Message</h3>
<p>Effective dialogue requires open lines of communication. Please fill out the form so we can keep in touch. Or, just call or email us directly if you prefer.</p>

<div id="contact-form">
<form name="contact" action="">
<ul>
<li>
<label for="name" id="label-name">Name <span class="error" id="error-name">(Required)</span></label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
</li>

<li>
<label for="email" id="label-email">E-mail Address <span class="error" id="error-email">(Required)</span></label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
</li>

<li>
<label for="snailmail" id="label-snailmail">Mailing Address <span class="optional">(Optional)</span></label>
<input type="text" name="snailmail" id="snailmail" size="30" value="" class="text-input" />
</li>

<li>
<label for="message" id="label-name">Message <span class="error" id="error-message">(Required)</span></label>
<textarea name="message" id="message" size="30" value="" class="text-input"></textarea>
</li>

<li>
<input type="submit" name="submit" id="submit" value="Send Message" />
</li>
</ul>
</form>
</div>

</div>
</div>
</div>
</div>
</div>

</body>

</html>

*************contact-form.js***************

$( document ).ready( function() {
$( '#contact-form input[ id != "submit" ], #contact-form textarea' ).each( function() {
$( this ).focus( function() {
$( this ).animate( { backgroundColor: '#f5f5f5' }, 100 );
} );

$( this ).blur( function() {
$( this ).animate( { backgroundColor: '#fff' }, 100 );
} );
} );

$( '.error' ).hide();

$( 'input[ id = "submit" ]' ).click( function() {
$( '.error' ).hide();

var hasError = false;
var targetElem;

var commentsVal = $( "textarea#message" ).val();

if( commentsVal == "" ) {
$( "#error-message" ).show();
targetElem = "textarea#message";
hasError = true;
}

var emailVal = $( "input#email" ).val();

if( emailVal == "" ) {
$( "#error-email" ).show();
targetElem = "input#email";
hasError = true;
}

var nameVal = $( "input#name" ).val();

if( nameVal == "" ) {
$( "#error-name" ).show();
targetElem = "input#name";
hasError = true;
}

var snailVal = $( "input#snailmail" ).val();

if( hasError ) {
$( targetElem ).focus();
}

if( !hasError ) {
$( this ).fadeOut( 200 );

$( "input#name" ).attr( "disabled", true );
$( "input#email" ).attr( "disabled", true );
$( "input#snailmail" ).attr( "disabled", true );
$( "textarea#message" ).attr( "disabled", true );

//alert( "name: " + nameVal + ", email: " + emailVal + ", snail: " + snailVal + ", comments: " + commentsVal );

var subjectVal = "Message from " + nameVal;

$.post( "send.php",
{ name: nameVal, email: emailVal, snail: snailVal, comments: commentsVal, subject: subjectVal },
function( data ) {
/*
$( "#sendEmail").slideUp("normal", function() {

$("#sendEmail").before('<h1>Success</h1><p>Your email was sent.</p>');
});
*/
/*
$( '#contact_form' ).html( "<div id='message'></div>" );
$( '#message' ).html( "<h4>Contact Form Submitted!</h4>" )
.append( "<p>We will be in touch soon.</p>" )
.hide()
.fadeIn( 1500 );
*/
$( '#contact-form form' ).slideUp( "normal", function() {
$( '#contact-form' ).html( "<h4 class='extra'>Contact Form Submitted!</h4><p>We will be in touch soon.</p>" )
.hide()
.fadeIn( 200 );
} );
//alert( "done" );
}
);
}

return false;
} );
} );

***********send.php**********

<?php

$to = "myemail@domain.com";
$subject = "Message from MYsite.com";
$email = $_REQUEST['email'] ;
$message = $_REQUEST['message'] ;
$headers = "From: $email";
$sent = mail($to, $subject, $message, $headers) ;

?>

**kwikweb** · 17 Oct 2010, 11:50 AM

Your on the right track but it looks like your missing some things.
This line is the one that is sending the parameters to send.php
$.post( "send.php",
{ name: nameVal, email: emailVal, snail: snailVal, comments: commentsVal, subject: subjectVal },

As you can see, the message parameter is actually called "comments" not message.
So the first thing you should change in your send.php is the following: $_REQUEST['message'] should be $_REQUEST['comments'];

The you will see the comments appear.
Now your not seeing the name of the sender because it wasn't included at all in send.php.

You might want to do something like the following:

$message = "From: ".$_REQUEST['name']." - [".$_REQUEST['email']."]\n";
$message .= "Snail: ".$_REQUEST['snail']\n";
$message .= "Subject: ".$_REQUEST['subject']\n";
$message .= "Message: ".$_REQUEST['comments'];

This will give you something like the following example in your e-mail:
From: John Smith - [john@smith.com]
Snail: 123 Sesame Street
Subject: Love your website
Message: This site is fantastic, keep up the good work.

Thread: contact-form.js

Thread Tools

contact-form.js

Similar Threads

Web 2.0 / Ajax contact form

Creating Required Fields for a Contact Form

Impossible contact page.

Posting Permissions