Hi I hope someone could help me out with my contact form. I cant figure this out for my self. The form works, and submits but only 1 field of data is included in the email received, the rest are blank. I made the form based on a tutorial found here I added several fields and also added some CSS styling of my own, but the procesing of the form shouldnt be affected by any of that. My problem is submitting the form works fine, but the only value that is actually sent over is the email address the user inputs. As I added several fields I had to rename fields but tried to match the new field names in the .js and .php files. My form looks like this: <div id="formright"> <h3 class="formtitle">Sign Up Form</h3> <!-- SIGN UP FORM START --> <div id="contact_form"> <form name="contact" method="post" action=""> <div class="content"> <!-- START SIGN UP FORM ROWS --> <div class="row"> <div class="left">First name<span class="required">*</span></div> <div class="right"><input type="text" name="fname" id="fname" class="sami" /></div> <div class="fclear"></div> </div> <div class="row"> <div class="left">Last name<span class="required">*</span></div> <div class="right"><input type="text" name="lname" id="lname" class="sami" /></div> <div class="fclear"></div> </div> <div class="row"> <div class="left">Address</div> <div class="right"><input type="text" name="address" id="address" class="sami" /></div> <div class="fclear"></div> </div> <div class="row"> <div class="left">State</div> <div class="right"> <select name="state" name="state" id="state" class="sami2" /> <option selected="selected">Select</option> <option value="Alabama">Alabama</option> <option value="Alaska">Alaska</option> <option value="Arizona">Arizona</option> <option value="Arkansas">Arkansas</option> <option value="California">California</option> <option value="Colorado">Colorado</option> <option value="Connecticut">Connecticut</option> <option value="Delaware">Delaware</option> <option value="District of Columbia">District of Columbia</option> <option value="Florida">Florida</option> <option value="Georgia">Georgia</option> <option value="Hawaii">Hawaii</option> <option value="Idaho">Idaho</option> <option value="Illinois">Illinois</option> <option value="Indiana">Indiana</option> <option value="Iowa">Iowa</option> <option value="Kansas">Kansas</option> <option value="Kentucky">Kentucky</option> <option value="Louisiana">Louisiana</option> <option value="Maine">Maine</option> <option value="Maryland">Maryland</option> <option value="Massachusetts">Massachusetts</option> <option value="Michigan">Michigan</option> <option value="Minnesota">Minnesota</option> <option value="Mississippi">Mississippi</option> <option value="Missouri">Missouri</option> <option value="Montana">Montana</option> <option value="Nebraska">Nebraska</option> <option value="Nevada">Nevada</option> <option value="New Hampshire">New Hampshire</option> <option value="New Jersey">New Jersey</option> <option value="New Mexico">New Mexico</option> <option value="New York">New York</option> <option value="North Carolina">North Carolina</option> <option value="North Dakota">North Dakota</option> <option value="Ohio">Ohio</option> <option value="Oklahoma">Oklahoma</option> <option value="Oregon">Oregon</option> <option value="Pennsylvania">Pennsylvania</option> <option value="Rhode Island">Rhode Island</option> <option value="South Carolina">South Carolina</option> <option value="South Dakota">South Dakota</option> <option value="Tennessee">Tennessee</option> <option value="Texas">Texas</option> <option value="Utah">Utah</option> <option value="Vermont">Vermont</option> <option value="Virginia">Virginia</option> <option value="Washington">Washington</option> <option value="West Virginia">West Virginia</option> <option value="Wisconsin">Wisconsin</option> <option value="Wyoming">Wyoming</option> </select> </div> <div class="fclear"></div> </div> <div class="row"> <div class="left">Email<span class="required">*</span></div> <div class="right"><input type="text" name="email" id="email" class="sami" /></div> <div class="fclear"></div> </div> <div class="row"> <div class="left">Home phone<span class="required">*</span></div> <div class="right"><input type="text" name="hphone" id="hphone" class="sami" /></div> <div class="fclear"></div> </div> <div class="row"> <div class="left">Mobile phone</div> <div class="right"><input type="text" name="mphone" id="mphone" class="sami" /></div> <div class="fclear"></div> </div> <div class="row"> <div class="right2"><select name="how" name="how" id="how" class="sami3" /> <option selected="selected">How did you hear about us?</option> <option value="Search Engine Search">Internet Search</option> <option value="Referral">Referral</option> </select> </div> <div class="fclear"></div> </div> <div class="row"> <div class="left">Comments</div> <div class="right"><textarea cols="15" rows="3" name="comment" id="comment" class="sami4" /></textarea></div> <div class="fclear"></div> </div> <div class="row"> <label class="error" for="fname" id="fname_error">Your first name is required.</label> <label class="error" for="lname" id="lname_error">Your last name is required.</label> <label class="error" for="email" id="email_error">A valid email is required.</label> <label class="error" for="hphone" id="hphone_error">A valid contact number is required.</label> </div> <div class="row2"> <!--<button value="submit" class="submitBtn"><span>Submit</span></button>--> <!--<a class="button" href="#"><span>Submit</span></a> --> <input type="submit" name="submit" class="button" id="submit_btn" value="Send" /> <div class="fclear"></div> </div> </div> </form> </div> <!-- END SIGN UP FORM --> </div> Code (markup): These javascript/jquery files are called in the head section of the document <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> <script src="js/runonload.js"></script> <script src="js/tutorial.js"></script> Code (markup): the jquery-1.2.6min.js is a different file from the one used in the tutorial as I am also using some jquery on my navigation and it requires this version to work.(as I understand they are just older/newer versions of the same thing basically) I have altered the contents of tutorial.js to match my form as so: $(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 fname = $("input#fname").val(); if (fname == "") { $("label#fname_error").show(); $("input#fname").focus(); return false; } var lname = $("input#lname").val(); if (lname == "") { $("label#lname_error").show(); $("input#lname").focus(); return false; } var address = $("input#address ").val(); var state = $("select#state ").val(); var mphone = $("input#mphone ").val(); var how = $("select#how ").val(); var comment = $("textarea#comment ").val(); var email = $("input#email").val(); if (email == "") { $("label#email_error").show(); $("input#email").focus(); return false; } var hphone = $("input#hphone").val(); if (hphone == "") { $("label#hphone_error").show(); $("input#hphone").focus(); return false; } var dataString = 'fname='+ fname + '&lname='+ lname + '&address='+ address + '&state='+ state + '&email=' + email + '&hphone=' + hphone + '&mphone=' + mphone + '&how=' + how + '&comment=' + comment ; //alert (dataString);return false; $.ajax({ type: "POST", url: "bin/process.php", data: dataString, success: function() { $('#contact_form').html("<div id='message'></div>"); $('#message').html("<h2>Sign Up Form Submitted!</h2>") .append("<p>We will be in touch soon.</p>") .hide() .fadeIn(1300, function() { $('#message').append("<img id='checkmark' src='images/check.jpg' />"); }); } }); return false; }); }); runOnLoad(function(){ $("input#name").select().focus(); }); Code (markup): **note that when I uncomment the //alert (datastring):return falsem line, all my form variables are displayed correctly and so the contents of the variable datastring has all the user input correctly. Then I have the process.php file which I altered in my opinion appropriately (I left the original emailaddress samples used in the tutyorial in here but I did enter those corectly as I am eceiving an email as I am supposed to), but somewhere the process is failing as only the email addresss variable is included in the email I receive, all other fields are blank. (First name, last name etc fields are all blank in the email that is received) <?php if ((isset($_POST['fname'])) && (strlen(trim($_POST['fname'])) > 0)) { $name = stripslashes(strip_tags($_POST['fname'])); } else {$name = 'No first name entered';} if ((isset($_POST['lname'])) && (strlen(trim($_POST['lname'])) > 0)) { $name = stripslashes(strip_tags($_POST['lname'])); } else {$name = 'No last 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['hphone'])) && (strlen(trim($_POST['hphone'])) > 0)) { $phone = stripslashes(strip_tags($_POST['hphone'])); } else {$phone = 'No phone 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>First Name</td> <td><?=$fname;?></td> </tr> <tr bgcolor="#eeffee"> <td>Last Name</td> <td><?=$lname;?></td> </tr> <tr bgcolor="#eeffee"> <td>Address</td> <td><?=$address;?></td> </tr> <tr bgcolor="#eeffee"> <td>State</td> <td><?=$state;?></td> </tr> <tr bgcolor="#eeeeff"> <td>Email</td> <td><?=$email;?></td> </tr> <tr bgcolor="#eeffee"> <td>Home Phone</td> <td><?=$hphone;?></td> </tr> <tr bgcolor="#eeffee"> <td>Mobile Phone</td> <td><?=$mphone;?></td> </tr> <tr bgcolor="#eeffee"> <td>How Did You Hear?</td> <td><?=$how;?></td> </tr> <tr bgcolor="#eeffee"> <td>Comments</td> <td><?=$comment;?></td> </tr> </table> </body> </html> <? $body = ob_get_contents(); $to = 'someone@example.com'; $email = 'email@example.com'; $fromaddress = "you@example.com"; $fromname = "Online Contact"; require("phpmailer.php"); $mail = new PHPMailer(); $mail->From = "mail@yourdomain.com"; $mail->FromName = "Contact Form"; $mail->AddAddress("email_address@example.com","Name 1"); $mail->AddAddress("another_address@example.com","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.com\r\nReply-To: $email\r\nX-Mailer: DT_formmail"); exit; } ?> Code (markup): I made no other changes to any of the files included in the tutorial. I also have 2 additional questions regarding A: at the very end of the proces.php the part : if(!$mail->Send()) { $recipient = 'your_email@example.com'; $subject = 'Contact form failed'; $content = $body; mail($recipient, $subject, $content, "From: mail@yourdomain.com\r\nReply-To: $email\r\nX-Mailer: DT_formmail"); exit; } ?> Code (markup): I am not really sure what it does or how it works, I left it unaltered and the form was submitted ok, but I am intrigued to say the least. and B: as I read through the tutorial and the comments, I understood that this wont work if no javascript is enabled. I'd like to find a way to make it work. A comment was left :"..the action on this form is set to nothing, so if there was no JS enabled it would submit to itself. It’s easy to pop some PHP in the top of the page checking for a submission and then processing the form if needed, including showing error messages..." Additionally I also havent really touched the top part of the process.php file as I didnt find it necessary (mistake?) I would appreciate help getting such php together. Thanks in advance for all your help. Sami
Install FireBug for firefox and try your page in firefox with FireBug enabled. See what it tells. Maybe there is an error.
Hi thanks for the comment. I have firefox with firebug installed, but not really sure about who I could use it to check the problem. And the form IS working, the form is submitted succesfully, and the javascript (tutorial.js) does seem to gather all the variables correctly to the datastring variable, since when I uncomment the alert line, all the inputted variable values are displayed in the alert.Plus I receive the email but its just that only the email variable filed carries the value to the email message I receive.