fivehorisun
14 Oct 2010, 09: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>
<!--
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.
-->
<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) ;
?>
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>
<!--
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.
-->
<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) ;
?>