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:
Code: Select all
<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: Select all
<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: Select all
$(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();
});
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)
Code: Select all
<?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;
}
?>
I also have 2 additional questions regarding A:
at the very end of the proces.php
the part :
Code: Select all
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;
}
?>
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