I am updating a client site and the simple contact form that used to work is now broken. It appears that the HTML form sends and receives data from the jQuery file as I get the error messages returned, though it is not passing the data through to the PHP file for sending an email. If I send the data direct from the HTML form to the PHP file, then an email is sent. The error is probably at the end of the jQuery, though my search for how to fix has not revealed an answer. Any ideas on how to make this work?
HTML Form
<form id="rsForm" action="#" onsubmit="return goContact(this);" name="rsForm">
<input id="formNam" type="hidden" name="formNam" value="3" />
<div class="CU_row">
<div class="CU_form_title"><label for="firstName">First Name:</label></div>
<div class="CU_form_entry"><input id="firstName" maxlength="120" size="39" name="first" type="text" /> <span class="redT">*</span></div>
</div>
<div class="CU_row">
<div class="CU_form_title"><label for="lastName">Last Name:</label></div>
<div class="CU_form_entry"><input id="lastName" maxlength="120" size="39" name="last" type="text" /> <span class="redT">*</span></div>
</div>
<div class="CU_row">
<div class="CU_form_title"><label for="emailAddress">Email:</label></div>
<div class="CU_form_entry"><input id="emailAddress" maxlength="120" size="39" name="email" type="text" /> <span class="redT">*</span></div>
</div>
<div class="CU_row">
<div class="CU_form_title"><label for="subjectLine">Subject:</label></div>
<div class="CU_form_entry"><input id="subjectLine" maxlength="120" size="39" name="subject" type="text" /> <span class="redT">*</span></div>
</div>
<div class="CU_row">
<div class="CU_form_title"><label for="messageCopy">Message:</label></div>
<div class="CU_form_entry"><textarea id="messageCopy" rows="6" cols="30" name="message"></textarea> <span class="redT">*</span></div>
</div>
<div id="CU_reset"><input type="reset" value="Reset" /></div>
<div id="CU_submit"><input type="submit" name="Submit" value="Submit" /></div>
jQuery File
// JavaScript Document
function goContact(theForm){
//Validate the forms and create the array to send.
var frmName = theForm.formNam.value;
//Validate Common elements.
if(theForm.firstName.value.length < 1){
alert("You must supply a First Name");
theForm.firstName.focus();
return false;
}
if(theForm.lastName.value.length < 1){
alert("You must supply a Last Name");
theForm.lastName.focus();
return false;
}
if(theForm.email.value.length < 1){
alert("You must supply an Email");
theForm.email.focus();
return false;
}
if(theForm.subjectLine.value.length < 1){
alert("You must supply a Subject");
theForm.subjectLine.focus();
return false;
}
if(theForm.messageCopy.value.length < 1){
alert("You must supply a Message");
theForm.messageCopy.focus();
return false;
}
sendAjaxReq($(theForm).serialize(true));
return false;
}
function showResult(messageText){
//Show the pop up with the confirmation.
$('msgWindow').innerHTML = messageText;
$('rsForm').reset();
$('frmInter').hide();
}
function sendAjaxReq(formEms){
//Send he ajax request
var rSp = new Ajax.Request("includes/sendContact.php", {
method: 'get',
parameters: formEms,
onComplete: receiveRespon});
}
function receiveRespon(oReq, JSONRsp){
//Receive the response from the ajax request.\
var result = JSONRsp;
if(result){
showResult(result);
}
}
PHP File
<?php
if(isset($_GET['Submit'])){
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: no-reply#sitename.com' . "\r\n";
'X-Mailer: PHP/' . phpversion();
$to = "info#sitename.com";
$subject = "Inquiry from " . $_SERVER['HTTP_HOST'];
$message = "A client has sent a contact us email\n\n";
foreach($_GET AS $field => $value) {
$message .= "field = $field, value = $value \n\n";
}
$mailSent = mail($to, $subject, $message, $headers);
$arr = "Your message has been received.";
header('X-JSON: ('.json_encode($arr).')');
}
?>
Related
After reading about every single forum post I still cannot figure out how to get my contact form to work correctly. I got the frontend part of it looking good but I am getting a 404 error every time I try to use it. Obviously, because of that none of the information submitted is getting through. Here is my code:
Here is my contact.php which has a
<script src="email/validation.js" type="text/javascript"></script>
at the top between the header
<div class="span12" id="divMain">
<div id="contact">
<h1>Contact Us</h1></div>
<h3 style="color:#FF6633;"><?php echo $_GET[msg];?></h3>
<hr>
<!--Start Contact form -->
<form name="enq" method="post" action="email/index.php" onsubmit="return
validation();">
<fieldset>
<input type="text" name="name" id="name" value="" class="input-block-level" placeholder="Name" />
<input type="text" name="email" id="email" value="" class="input-block-level" placeholder="Email" />
<textarea rows="9" name="message" id="message" class="input-block- levelplaceholder="Let's hear what you've got to say"> </textarea>
<div class="actions">
<input type="submit" value="Send" name="submit" id="submitButton" class="btn btn-success pull -right" title="Click here to submit your message!" />
</div>
</fieldset>
<hr>
</form>
<!--End Contact form -->
</div>
Next here is my validation.js
function validation()
{
var contactname=document.enq.name.value;
var name_exp=/^[A-Za-z\s]+$/;
if(contactname=='')
{
alert("Name Field Should Not Be Empty!");
document.enq.name.focus();
return false;
}
else if(!contactname.match(name_exp))
{
alert("Invalid Name field!");
document.enq.name.focus();
return false;
}
var email=document.enq.email.value;
//var email_exp=/^[A-Za-z0-9\.-_\$]+#[A-Za-z]+\.[a-z]{2,4}$/;
var email_exp=/^\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(email=='')
{
alert("Please Enter Email-Id!");
document.enq.email.focus();
return false;
}
else if(!email.match(email_exp))
{
alert("Invalid Email ID !");
document.enq.email.focus();
return false;
}
var message=document.enq.message.value;
if(message=='')
{
alert("Query Field Should Not Be Empty!");
document.enq.message.focus();
return false;
}
return true; }
Followed by my index.php
<?php
if(isset($_POST['submit']))
{
$name = $_POST['name'];
$email = $_POST['email'];
$query = $_POST['message'];
$email_from = $name.'<'.$email.'>';
$to="marketing#durangoconnections.com";
$subject="Enquiry!";
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= "From: ".$email_from."\r\n";
$message="
Name:
$name
<br>
Email-Id:
$email
<br>
Message:
$query
";
if(mail($to,$subject,$message,$headers))
header("Location:../contact.php?msg=Successful Submission! Thankyou for contacting us.");
else
header("Location:../contact.php?msg=Error To send Email !");
//contact:-your-email#your-domain.com
}
?>
You dont have a contact.php file on your server, you mean contact_us.php
if(mail($to,$subject,$message,$headers))
header("Location:../contact_us.php?msg=Successful Submission! Thankyou for contacting us.");
else
header("Location:../contact_us.php?msg=Error To send Email !");
//contact:-your-email#your-domain.com
}
I have been having ongoing issues with this contact form. I am now trying to get the mobile number part to work.
I have been able to get it to work with someone code from here but it loses the format that I would like to keep. Can anyone find a reason why this form is not sending the mobile number?
site: www.krjwoodcraft.com
send.php
<?php
$name = $_POST['name'];
$subject = $_POST['subject'];
$sender = $_POST['email'];
$message= $_POST['message'];
$mobile = $_POST['mobile'];
$your_site_name = "www.krjwoodcraft.com";
$your_email = "rob.catharsis#gmail.com";
// setting header:
$header = "MIME-Version: 1.0\r\n";
$header .= "Content-type: text/html; charset=utf-8\r\n";
$header .= "From: {$name} <{$sender}>\r\n";
// to subject message header
$result = mail($your_email, "Message from ".$your_site_name, nl2br($message), $header);
echo "Your Message has been sent";
?>
contact.js
$(document).ready(function(){
$("#send").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var mobile = $("#mobile").val();
var error = false;
if(email.length == 0 || email.indexOf("#") == "-1" || email.indexOf(".") == "-1"){
var error = true;
$("#error_email").fadeIn(500);
}else{
$("#error_email").fadeOut(500);
}
if(message.length == 0){
var error = true;
$("#error_message").fadeIn(500);
}else{
$("#error_message").fadeOut(500);
}
if(name.length == 0){
var error = true;
$("#error_name").fadeIn(500);
}else{
$("#error_name").fadeOut(500);
}
if(error == false){
$("#send").attr({"disabled" : "true", "value" : "Loading..." });
$.ajax({
type: "POST",
url : "send.php",
data: "name=" + name + "&email=" + email + "&subject=" + "You Got Email" + "&message=" + message + "&mobile=" + mobile,
success: function(data){
if(data == 'success'){
$("#btnsubmit").remove();
$("#mail_success").fadeIn(500);
}else{
$("#mail_failed").html(data).fadeIn(500);
$("#send").removeAttr("disabled").attr("value", "send");
}
}
});
}
return false;
});
});
html:
<!-- Contact Form -->
<div class="row">
<div class="span12">
<div class="trac_contactform">
<form id="contact_form" class="row" name="form1" method="post" action="send.php">
<div class="span6">
<input type="text" class="full" name="name" id="name" placeholder="Name" />
<div id="error_name" class="error">Please check your name</div>
</div>
<div class="span6">
<input type="text" class="full" name="email" id="email" placeholder="Email" />
<div id="error_email" class="error">Please check your email</div>
</div>
<div class="span6">
<input type="text" class="full" name="mobile" id="mobile" placeholder="Phone Number"/>
</div>
<div class="span6">
<input type="text" class="full" name="subject" id="subject" placeholder="Subject"/>
</div>
<div class="span12">
<textarea cols="10" rows="10" name="message" id="message" class="full" placeholder="Message"></textarea>
<div id="error_message" class="error">Please check your message</div>
<div id="mail_success" class="success">Thank you. Your message has been sent.</div>
<div id="mail_failed" class="error">Error, email not sent</div>
<p id="btnsubmit">
<input type="submit" id="send" value="Send Now" class="btn btn-large btn-primary btn-embossed" /></p>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!--END CONTACT PAGE-->
As Hanky 웃 Panky correctly pointed out you are not including the phone number to your email message. Try the following code. I stored the $_POST['message'] in a new variable called $sent_message and modified your $message variable to include the $subject, $sent_message and the $mobile variables.
<?php
$name = $_POST['name'];
$subject = $_POST['subject'];
$sender = $_POST['email'];
$sent_message = $_POST['message'];
$mobile = $_POST['mobile'];
$message = "Subject: " . $subject . "\r\n" . "Message: " . $sent_message . "\r\n" . "Phone number: " . $mobile;
$your_site_name = "www.krjwoodcraft.com";
$your_email = "rob.catharsis#gmail.com";
// setting header:
$header = "MIME-Version: 1.0\r\n";
$header .= "Content-type: text/html; charset=utf-8\r\n";
$header .= "From: {$name} <{$sender}>\r\n";
// to subject message header
$result = mail($your_email, "Message from ".$your_site_name, nl2br($message), $header);
echo "Your Message has been sent";
?>
You did not include it in your mail body. you have passed mobile number in php file. You got the file but you don't use it in your mail body.
include mobile number :
$result = mail($your_email, "Message from ".$your_site_name, nl2br($message."\r\n" . "Phone number: " . $mobile), $header);
I have a simple contact me script, which fires an email on submit.
The email is sent, but there are no form values in the email (name: empty, ...).
Why doesn't my contact script work?
<?php
if ($action == "send") //isset wyslij
{
if (!$_POST[name] || !$_POST[email] || !$_POST[phone] || !$_POST[enquiry])
{
$problem = TRUE;
echo("<p>You have to fill all form.</p>");
}
if (! $problem)
{
$data = date("d.m.y");
$message = "
<p>Name: $_POST[name]</p>
<p>Phone: $_POST[phone]</p>
<p>Email: $_POST[email]</p>
<br>
<p>Enquiry: $_POST[enquiry]</p>";
$od = "contactmail#asdasdas.com";
$content = $message;
$header = "From: $od \r\n";
$header .= 'MIME-Version: 1.0' . "\r\n";
$header .= 'Content-type: text/html; charset=UTF-8' . "\r\n";
(mail('email#example.com', 'New message from website', $content, $header));
echo("<br><p>Message has been sent.</p>");
}
else
{
echo("<p>Try <a href=contact.php>again</a></p>");
}
}
?>
<form action="contact.php?action=send" method="post" enctype="text/plain">
<label for="name">Name</label><input type="text" name="name" /></br></br>
<label for="email">Email</label><input type="text" name="email" /></br></br>
<label for="phone">Phone</label><input type="text" name="phone" /></br></br>
<label for="enquiry">Enquiry</label><textarea name="enquiry" cols="20" rows="10"></textarea></br></br>
<input type="submit" id="contact_button" value="Send" />
</form>
Valid values for enctype in tag are:
application/x-www-form-urlencoded
multipart/form-data
you have text/plain and thats why it's not working.
simply remove the "enctype" argument from the HTML form code and try again?
I have a contact form that passes the data via jQuery $.post.
JS
$(function () {
$("#contact_form").submit(function (a) {
a.preventDefault();
$.post("<?php echo home_url('/_asset/contact.php'); ?>", {
contact_name : $("#contact_name").val(),
contact_email : $("#contact_email").val(),
contact_subject : $("input:radio[name=subject]:checked").val(),
contact_textarea: $("#contact_textarea").val(),
contact_postid : $("#contact_postid").val(),
}, function (a) {
$("div#response").removeClass("hidden");
$("div#response").delay(1E3).html(a);
});
});
});
contact.php
$contact_name = $_POST['contact_name'];
$contact_email = $_POST['contact_email'];
$contact_subject = $_POST['contact_subject'];
$contact_message = $_POST["contact_textarea"];
$contact_postid = $_POST['contact_postid'];
$contact_address = $_SERVER['REMOTE_ADDR'];
if( empty($contact_name) && empty($contact_email) && empty($contact_subject) && empty($contact_message) ) {
die('You must fill out all fields amigo!');
}
// Build that email boy!
if( !empty($contact_postid) ) { $email_id = ' (' . $contact_postid . ')'; }
$email_to = 'email#example.com';
$email_subject = 'Contact Form: ' . $contact_subject . $email_id;
$email_header = 'From: ' . $contact_name . '<' . $contact_email . '>' . "\r\n";
$email_header .= 'Reply-To:' . $contact_email . "\r\n";
$email_header .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$email_message = nl2br($contact_message);
// Try sending the email
if(!mail($email_to, $email_subject, $email_message, $email_header)){
$status = 'red';
die('Error sending email.');
} else {
$status = 'green';
die('Email sent!');
}
PHP form
<div class="respond_form">
<form method="post" id="contact_form">
<h2>Let's get contacting!</h2>
<div id="response" class="hidden alert <?php echo $status; ?>"></div>
<div class="line">
<label for="contact_name" title="Please enter your name (required)">Your name <span class="required">*</span></label>
<input type="text" name="contact_name" id="contact_name" tabindex="1" placeholder="John Smith" required="required"/>
</div>
<div class="line">
<label for="contact_email" title="Please enter your email (required)">Your email (so we can contact you) <span class="required">*</span></label>
<input type="email" name="contact_email" id="contact_email" tabindex="2" placeholder="mail#example.com" required="required"/>
</div>
<?php if( isset($_GET['subject']) ) { ?>
<input hidden="hidden" name="subject" type="radio" value="<?php echo $_GET['subject']; ?>" checked="checked">
<?php if( isset($_GET['PostID']) ) { echo '<input hidden="hidden" id="contact_postid" name="postid" type="input" value="' . $_GET['PostID'] . '">'; } ?>
<?php } else { ?>
<div class="line">
<label>What is the message in regards to? <span class="required">*</span></label>
<ul style="list-style:none; margin: 0; padding: 0;">
<label style="font-weight:normal;"><input style="margin-right: 10px;" name="subject" type="radio" value="Advertising"<?php if( $_GET['subject'] == 'advertising' ) { echo ' checked="checked"'; } ?>>Advertising</label>
<label style="font-weight:normal;"><input style="margin-right: 10px;" name="subject" type="radio" value="Contribute an Article"<?php if( $_GET['subject'] == 'contribute' ) { echo ' checked="checked"'; } ?>>Contribute an Article</label>
</ul>
</div>
<?php } ?>
<div class="line">
<label for="contact_textarea" title="Briefly explain your message (required)">Briefly explain your message <span class="required">*</span></label>
<textarea name="contact_textarea" id="contact_textarea" rows="10" tabindex="3" maxlength="500" required="required"></textarea>
</div>
<input type="submit" id="contact_send" name="contact_send" class="button glow" value="Send Message"/>
</form>
</div>
As you can see, I've tried setting a $status in the mail() function but that didn't work. I'm not entirely sure what's going on with the whole thing (found it ages ago and just built around it) but I know the die() message emits into the div#response.
Effectively I was hoping to add a class to the div#response if the email was successful or not.
OH! and incase someone wants to comment on the lack of security, or checking of $_POST data, I've stripped it for here :]
$.post sends the data to contact.php and loads its response.
In your case, the response is text that can be "Error sending email." or "Email sent!" (from what you posted) so you just need to test the value and add the related class.
$(function () {
$("#contact_form").submit(function (a) {
a.preventDefault();
$.post("<?php echo home_url('/_asset/contact.php'); ?>", {
contact_name : $("#contact_name").val(),
contact_email : $("#contact_email").val(),
contact_subject : $("input:radio[name=subject]:checked").val(),
contact_textarea: $("#contact_textarea").val(),
contact_postid : $("#contact_postid").val(),
}, function (a) {
$("div#response").removeClass("hidden").addClass( (a=="Email sent!") ? "email-success" : "email-error" );
$("div#response").delay(1E3).html(a);
});
});
});
Before I begin please except my appologises if this is to long, I'm totaly new to Html5 (usually design in Flash)and just getting started. I recently downloaded a free template called Brownie and understand most things but the contact form. It's using Javascript, PHP and Ajax I think. Ive got it kinda workin locally but things aren't working how I want. What I'm trying to do is make it validate fields with error message or success message e.t.c. this is the html form code I have:
<p class="required_info"><span>*</span> Required</p>
<!-- SUCCESS MESSAGE -->
<div class="success_box none"> Email successfully sent. Thank you! </div>
<!-- END SUCCESS MESSAGE -->
<!-- START CONTACT FORM -->
<form action="#" class="contact_form">
<p>
<label for="name">Name <span>*</span></label>
<input type="text" class="inputText" id="name" name="name" placeholder="Please enter your full name" pattern="[a-zA-Z ]+" onkeypress="return alpha(event,letters)" required minlength="5" maxlength="50" onpaste="return false;" tabindex="1"/>
<div class="success_title none"> You've entered your name. </div>
<div class="error_title none">* Please enter your full name. </div>
</p>
<div class="clear"></div>
<p>
<label for="company">Company </label>
<input type="text" class="inputText" id="company" name="company" placeholder="Company Name" minlength="3" maxlength="50" onpaste="return false;" tabindex="2"/>
</p>
<div class="clear"></div>
<p>
<label for="email">E-mail <span>*</span></label>
<input type="text" class="inputText" id="email" name="email" placeholder="Please enter a valid email address" required minlength="5" maxlength="50" onpaste="return false;" tabindex="3"/>
<div class="error_title none">* Please enter a valid email. </div>
</p>
<div class="clear"></div>
<p>
<label for="message">Message <span>*</span></label>
<textarea class="inputTextarea" cols="88" rows="6" id="message" name="message" placeholder="Please enter your message" required tabindex="4"></textarea>
<div class="error_title none">* Please enter your message. </div>
</p>
<div class="clear padding20"></div>
<p class="submit"><input type="reset" class="resetBtn button white" onclick="resetFields()" value="Reset" /> Send </p>
</form>
<!-- END CONTACT FORM -->
<!-- ERROR MESSAGE -->
<div class="error_box none"> Please complete all required fields [ highlighted in red ]. </div>
<!-- END ERROR MESSAGE -->
and this is the javascript code:
$(document).ready(function () {
$('#name').focus(function () {
$(this).removeClass('error_class');
});
$('#email').focus(function () {
$(this).removeClass('error_class');
});
$('#message').focus(function () {
$(this).removeClass('error_class');
});
$('.contact_form').submit(function () {
hasError = false;
if ($('#name').val() == '') {
$('#name').addClass('error_class');
hasError = true;
}
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
var emailaddressVal = $('#email').val();
if (emailaddressVal == '') {
$('#email').addClass('error_class');
hasError = true;
}
else if (!emailReg.test(emailaddressVal)) {
$('#email').addClass('error_class');
hasError = true;
}
if ($('#email').val() == '') {
$('#email').addClass('error_class');
hasError = true;
}
if ($('#message').val() == '') {
$('#message').addClass('error_class');
hasError = true;
}
if (hasError == true) {
$('.info_box').hide();
$('.error_box').show();
$('.error_title').show();
}
else {
$.ajax({
type: 'POST',
url: 'contact.php',
cache: false,
data: $(".contact_form").serialize(),
success: function (data) {
if (data == "error") {
$('.success_box').hide();
$('.success_title').hide();
$('.error_box').show();
$('.error_title').show();
}
else {
$('.error_box').hide();
$('.error_title').hide();
$('.success_box').show();
$('.success_title').hide();
$('.resetBtn').hide();
$('.submit').hide();
}
}
});
}
return false;
});
});
This is the PHP code:
<?php
$your_email = 'name#domain.com'; // Your email address
$subject = 'Email from your contact form'; // Email subject
$name = isset($_POST['name']) && $_POST['name'] ? $_POST['name'] : ''; // Visitor Name
$company = isset($_POST['company']) && $_POST['company'] ? $_POST['company'] : ''; // Visitor Company
$email = isset($_POST['email']) && $_POST['email'] ? $_POST['email'] : ''; // Visitor Email
$message = isset($_POST['message']) && $_POST['message'] ? $_POST['message'] : ''; // Visitor Message
$website = isset($_POST['website']) && $_POST['website'] ? $_POST['website'] : ''; // Visitor Message
$full_message = 'Website: '.$website. "\r\n\r\n Message:".$message;
if($name && $email && $message)
{
$headers = 'From: '.$name.' <'.$email.'>' . "\r\n" .
'Reply-To: '.$email.'' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
$headers .= 'Content-type: text/plain; charset=UTF-8' . "\r\n";
//------------------------------------------------
// Send out email to site admin
//------------------------------------------------
if(#mail($your_email, $subject, $full_message, $headers))
die("success");
else
die("error");
}
else
{
die("error");
}
?>
When the send button is pressed i want it to check if any data has been entered in each input field - if yes add success message if no add error message. I have the error message working but cant get the success message working on individual input fields. Any sugestions would be helpful...
I suspect it is because you are assigning true or false to each variable instead of the value of the variable in your php script. Isset($_POST[test]) is true, not the value of the test form value.