piecing together a jquery form mailer
- by Joel
Hi guys,
My newbieness is shining through here...I managed to piece together a form mailer that works great, but now I need to add two more fields, and I'm at a loss as to how to do it. Over the months, I have commented out some things I didn't need, but now I'm stuck.
I borrowed from this tutorial to make the original form:
http://trevordavis.net/blog/tutorial/ajax-forms-with-jquery/
But then I cannibalized it to make an email signup form for a newsletter, so the fields I need are:
recipient email (me-hard coded in)
senders email address subject (hardcoded in)
first name and city in the body of
the message
For my form, I have this:
<div>
<?php include('verify.php'); ?>
<form action="index_success.php" method="post" id="sendEmail" class="email">
<h3 class="register2">Newsletter Signup:</h3>
<ul class="forms email">
<li class="name"><label for="yourName">Name: </label>
<input type="text" name="yourName" class="info" id="yourName" value=" " /><br>
</li>
<li class="city"><label for="yourCity">City: </label>
<input type="text" name="yourCity" class="info" id="yourCity" value=" " /><br>
</li>
<li class="email"><label for="emailFrom">Email: </label>
<input type="text" name="emailFrom" class="info" id="emailFrom" value="<?= $_POST['emailFrom']; ?>" />
<?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>';
?>
</li>
<li class="buttons email">
<button type="submit" id="submit">Send</button>
<input type="hidden" name="submitted" id="submitted" value="true" />
</li>
</ul>
</form>
</div>
emailcontact.js:
$(document).ready(function(){
$("#submit").click(function(){
$(".error").hide();
var hasError = false;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var emailFromVal = $("#emailFrom").val();
if(emailFromVal == '') {
$("#emailFrom").after('<span class="error">You forgot to enter the email address to send from.</span>');
hasError = true;
} else if(!emailReg.test(emailFromVal)) {
$("#emailFrom").after('<span class="error">Enter a valid email address to send from.</span>');
hasError = true;
}
var subjectVal = $("#subject").val();
if(subjectVal == '') {
$("#subject").after('<span class="error">You forgot to enter your name.</span>');
hasError = true;
}
var messageVal = $("#message").val();
if(messageVal == '') {
$("#message").after('<span class="error">You forgot to enter your city.</span>');
hasError = true;
}
if(hasError == false) {
$(this).hide();
$("#sendEmail li.buttons").append('<img src="/wp-content/themes/default/images/template/loading.gif" alt="Loading" id="loading" />');
$.post("/includes/sendemail.php",
//emailTo: emailToVal,
{ emailFrom: emailFromVal, subject: subjectVal, message: messageVal },
function(data){
$("#sendEmail").slideUp("normal", function() {
$("#sendEmail").before('<h3 class="register2">Success!</h3><p class="emailbox">You are on the Newsletter email list.</p>');
});
}
);
}
return false;
});
});
sendmail.php:
<?php
$mailTo = $_POST['emailTo'];
$mailFrom = $_POST['emailFrom'];
$subject = $_POST['yourName'];
$message = $_POST['yourCity'];
mail('[email protected]','Rattletree Newsletter', 'Name='.$subject. ' City='.$message, "From: ".$mailFrom);
?>
Thanks for any help! I'm going crosseyed trying to figure this one out.
