Contact Form Not Working JS/PHP - php

I'm having trouble getting this contact form working on an HTML site and I can't figure out why :/
I manage to get the email to my mailbox, but it only displays the subject (which isn't that useful as it's plain text, and sometimes I get the name.
Thanks in advance if you can help.
DIV:
<div id="contactForm" class="shadow">
<div class="sepContainer"></div>
<form action="process.php" method="post" id="contact_form">
<div class="name">
<label for="name">Your Name:</label>
<p> Please enter your full name</p>
<input id="name" name="email" type="text" placeholder="e.g. Mr. John Smith" required />
</div>
<div class="email">
<label for="email">Your Email:</label>
<p> Please enter your email address</p>
<input id="email" name="emai" type="email" placeholder="example#domain.com" required />
</div>
<div class="message">
<label for="message">Your Message:</label>
<p> Please enter your question</p>
<textarea name="messagetext" id="message" cols="30" rows="4"></textarea>
</div>
<div id="loader">
<input type="submit" value="Submit" />
</div>
</form>
</div>
JS:
// Activate the contactform
$(document).ready(function() {
$(function(){
$('#contact_form').submit(function(e){
e.preventDefault();
var form = $(this);
var post_url = form.attr('action');
var post_data = form.serialize();
$('#loader', form).html('<img src="images/loader.gif" /> Please Wait...');
$.ajax({
type: 'POST',
url: post_url,
data: post_data,
success: function(msg) {
$(form).fadeOut(500, function(){
form.html(msg).fadeIn();
});
}
});
});
});
});
PHP:
<?php
$toemail = 'myemailaddress#whatever.com';
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
if(mail($toemail,'CFUSU Online',$message,'From:'.$email)) {
echo 'Your email was sent succesfully.';
} else {
echo 'There was a problem sending your email.';
}
?>

Correct php code
$toemail = 'myemailaddress#whatever.com';
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['messagetext'];
if(mail($toemail,'CFUSU Online',$message,'From:'.$email)) {
echo 'Your email was sent succesfully.';
} else {
echo 'There was a problem sending your email.';
}

Related

cant send data using ajax showing some localhost alert(php)

I wrote a script which doesn't send the data from the AJAX to the PHP file. and showing error in alert box
HTML
<form id="contact-form" action="#" method="post">
<div class="single-contact-form">
<div class="contact-box name">
<input type="text" name="name" id="name" placeholder="Your Name*" style="width:100%">
</div>
</div>
<div class="single-contact-form">
<div class="contact-box name">
<input type="text" name="email" id="email" placeholder="Your Email*" style="width:100%">
</div>
</div>
<div class="single-contact-form">
<div class="contact-box name">
<input type="text" name="phone" id="phone" placeholder="Your Mobile*" style="width:100%">
</div>
</div>
<div class="single-contact-form">
<div class="contact-box name">
<input type="text" name="password" id="password" placeholder="Your Password*" style="width:100%">
</div>
</div>
<div class="contact-btn">
<button type="submit" name="register" id="register" class="fv-btn" >Register</button>
</div>
</form>
JS
<script>
$(function(){
$("#register").on("click",function(e){
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var password = $("#password").val();
if( name == "" || email == "" || phone == "" || password == ""){
alert("all field required");
}else{
$.ajax({
data: "ajax.php",
type: "POST",
data:{cname:name,cemail:email,cphone:phone,cpassword:password},
success: function (result) {
alert(result);
$("#contact-form").trigger("reset");
}
});
}
});
});
</script>
php
<?php
include "../inc/database1.php";
$name = $_POST['cname'];
$email = $_POST['cemail'];
$phone = $_POST['cphone'];
$password =$_POST['cpassword'];
$sql = "INSERT INTO tbl_user (name,email,phone,password) values('$name','$email','$phone','$password')";
$value = $this->db->conn->prepare($sql);
$data = $value->execute();
if($data == TRUE){
echo "successfully register";
}else{
echo "not sent";
}
?>
you have to do some changes in your ajax as you do not mention the url of ajax where it post the data and the variable data is reinitialised.
try this:
$.ajax({
url: "ajax.php", // its url you need to add
type: "POST",
data:{cname:name,cemail:email,cphone:phone,cpassword:password},
success: function (result) {
alert(result);
$("#contact-form").trigger("reset");
}
});
hope this helps you.

AJAX/PHP Form Data Not Submitting

I'm building a website for a friend. He has a basic "Contact Me" section. I'm wanting to use AJAX and PHP to submit the form.
Here is the form html.
div class="contactme" id="contactme">
<form class="form-horizontal" method="post" name="myemailform" id="myform" action="form-to-email.php">
<fieldset>
<h2>Let's Create Together</h2>
<hr class="small">
<div class="form-group">
<label class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">E-Mail</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="email" name="visitor_email" placeholder="E-Mail">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea class="form-control" rows="8" name="message"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" name="submit" id="submitbutton" class="btn btn-primary mainButton">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
Here is jquery AJAX code snippet.
//AJAX FORM SUBMISSION
$(document).ready(function(){
$('#submitbutton').on('submit', function(){
//Stop the form from submitting itself to the server.
e.preventDefault();
var name = $('#name').val();
var email = $('#email').val();
$.ajax({
type: "POST",
url: 'form-to-email.php',
data: {name: email},
success: function(){
alert(data);
}
});
});
});
And here is my PHP file that e-mails the responses from the user.
<?php
if (!isset ($_POST ['submit']))
{
//This page should not be accessed directly. Need to submist the form.
echo "error, you need to submit the form!";
}
$name = $_POST ['name'];
$visitor_email = $_POST ['visitor_email'];
$message = $_POST ['message'];
//Validation
if(empty ($name)||empty ($visitor_email))
{
echo "Name and email are mandatory!";
exit();
}
else {
echo "Submit Successful!";
header("Location: index.html");
exit();
}
$email_from = 'info#joshkelley.video'; //<== Put your email address here
$email_subject = "New Form Submission";
$email_body = "You have received a new message from the user $name.\n".
"E-mail Address: $visitor_email\n".
"Here is the message: $message\n".
$to = "brandontetrick#gmail.com"; // <==Put your email address here
$headers = "From: $email_from \r\n";
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done
?>
Overall goal is for a basic submission of a "Contact Me" message, but the user doesn't leave the page. Every time I press the submit button, my validation fails and I get "Name and email are mandatory!" message.
The site is live if you want to take look. Still a work in progress.
joshkelley.video
you miss data, as you post only name
$(document).ready(function(){
$('#submitbutton').on('submit', function(e){
//Stop the form from submitting itself to the server.
e.preventDefault();
var name = $('#name').val();
var email = $('#email').val();
$.ajax({
type: "POST",
url: 'form-to-email.php',
data: {name: name, email: email}, /* there was your mistake */
success: function(reponse){
alert(response);
window.location.href = 'index.html'; /* wherever you need */
}
});
});
});
EDIT: as I think (from your other post) you want user to be redirected, don't try doing this with form-to-email.php but according to response.
EDIT II: remove action from form just to make sure

Submit contact form without refresh (Zurb Foundation, PHP, AJAX, jQuery and JS)

My contact form doesn't seem to work. I don't know what is wrong. I tried all sorts of solutions, nothing works. My pages still refreshes. Maybe anyone can spot a mistake that I did or perhaps offer alternative code? I would really appreciate your help!
return: false; doesn't work. neither does e.prevenDefault();. Don't ask why.
HTML
<form action="" method="post" id="contact-form">
<div class="row">
<div class="medium-3 columns">
<label>
<input type="text" id="name" placeholder="Your name*" name="name" required/>
</label>
</div>
<div class="medium-3 columns">
<label>
<input type="email" id="email" name="email" placeholder="Your e-mail*" required/>
</label>
</div>
<div class="medium-3 columns">
<label>
<input type="text" id="compname" name="compname" placeholder="Company name*" required/>
</label>
</div>
<div class="medium-3 columns">
<label>
<input type="text" id="website" name="website" placeholder="Website*" required/>
</label>
</div>
</div>
<div class="row">
<div class="medium-12 columns">
<label>
<textarea type="text" row="10" name="message" id="message" placeholder="Message*" required></textarea>
</label>
</div>
</div>
<div class="row">
<button type="submit" class="button large" id="sendmessage-btn"> Send Message
</button>
</div>
<div data-alert class="alert-box success radius">Your message has been sent.×
PHP
<?php
$to = 'email#email.com';
$subject = 'Message from the contact form';
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$compname = trim($_POST['compname']);
$website = trim($_POST['website']);
$message = trim($_POST['message']);
$message = <<<EMAIL
Name: $name
Contact e-mail: $email
Company: $compname
Company website: $website
Message: $message
EMAIL;
if ($_POST) {
mail ($to, $subject, $message, $header);
} ?>
And JS
$(document).foundation();
var form = $('#contact-form');
var submitButton = $('#sendmessage-btn'); // Variable to cache button element
var alertBox = $('.alert-box'); // Variable to cache meter element
var closeButton = $('.close'); // Variable to cache close button element
$(form).submit(function () {
$.ajax({
type: 'get',
url: 'function.php',
data: $(form).serialize(),
success: function sendContactForm(){
$(submitButton).fadeOut(500); // Fades out submit button when it's clicked
setTimeout(function() { // Delays the next effect
$(alertBox).fadeIn(500); // Fades in success alert
}, 500);
};
});
});
$(closeButton).click(function() { // Initiates the reset function
$(alertBox).fadeOut(500); // Fades out success message
setTimeout(function() { // Delays the next effect
$('input, textarea').not('input[type=submit]').val(''); // Resets the input fields
$(submitButton).fadeIn(500); // Fades back in the submit button
}, 500);
return false; // This stops the success alert from being removed as we just want to hide it
});
// Your form is already a jquery object, don't wrap it again?
form.submit(function () {
$.ajax({
....
});
// Prevent default submit behavior of form.
return false;
});

Contact Form same page success

I am trying to send an email with PHP and Ajax, the mailer is working but I know very little about Ajax, after reading a couple of pages of a book I have written a small piece of code and was hoping someone could point out where I am going wrong:
Here is my PHP:
<?php
$name = ($_POST['name']);
$email = ($_POST['email']);
$fsubject = ($_POST['subject']);
$message = ("Name: ". $name . "\nEmail Address: " . $email . "\n\nMessage: " . $_POST['message']);
// Set Mail
$to = "emailaddress#fakeone.com";
$headers = 'emailaddress#fakeone.com' . "\r\n";
$subject = "{$fsubject}";
$body = "{$message}";
// Send Mail
if (mail($to, $subject, $body, $header))
{
echo("<p>Message successfully sent!</p>");
}
else
{
echo("<p>Message delivery failed...</p>");
}
?>
My HTML:
<div id="success" style="color:red;"></div>
<form action="" id="contactform" method="post">
<div class="row">
<div class="form-group">
<div class="col-md-6">
<label>Your name *</label>
<input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name">
</div>
<div class="col-md-6">
<label>Your email address *</label>
<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Subject</label>
<input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control" name="subject" id="subject">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Message *</label>
<textarea maxlength="5000" data-msg-required="Please enter your message." rows="10" class="form-control" name="message" id="message"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" id="submit" value="Send Message" class="btn btn-info btn-lg" data-loading-text="Loading...">
</div>
</form>
My AJAX:
<script>
$(document).ready(function(){
$('#submit').click(function(){
$.post("sendmail.php", $("#contactform").serialize(), function(response) {
$('#success').html(response);
//$('#success').hide('slow');
});
return false;
});
});
</script>
At the moment the same page just reloads, the desired outcome is just a subtle success or failure message appearing.
Any help would be welcome!
Thanks,
Dan
Your snippet code seems to run just fine.
It must be an error either in other JS (check browser console, F12 in Chrome for example) or in your PHP.
Try this to see if ajax post fails:
<script>
$(document).ready(function(){
$('#submit').click(function(){
$.post("contact.php", $("#contactform").serialize(), function(response) {
$('#success').html(response);
}).fail(function() {
alert( "error" );
});
return false;
});
});
</script>
Also, try to make sure PHP execution is fine, so remove all javascript and replace
<form action="sendmail.php" id="contactform" method="post">
Check the result of that page, it should be "Message successfully sent!".
Also, check a simple JS snippet of your code:
http://jsfiddle.net/CPtpk/
Please note that if you have another JavaScript code in your page that could be a cause for this problem. Even if your JS error is in another place it can cause JS execution to stop and so your onClick isn't executed and that's why you get your problem...
Try something like this on the JS:
<script>
$(document).ready(function() {
$('#contactform').submit(function(e) {
e.preventDefault();
$.post("sendmail.php", $(this).serialize(), function(response) {
$('#success').html(response);
});
});
});
</script>

Contact Form Script not sending the form

I have this PHP contact form script (as shown below) which I have used before so I know works, BUT, due to that I have hidden the html form inside of a new jQuery powered div:
(<div class="toggle hidemail" id="drop-button" href=""> Email us here </div>
<div class="hidden hiddenform">)
that toggles up and down, I cant seem to send the form at all, the form when sent is supposed to fade out then give the user a confirmation message (as shown in the script) but it doesn't do anything, I don't suppose anyone would know whats going wrong here so I can get this form working again?
<?php
$to = 'example#gmail.com';
$subject = 'Company Name';
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$body = <<<EMAIL
Hello my name is $name.
$message
From $name
my email address is $email
EMAIL;
if($name == '' || $email == '' || $message == "") {
echo "<h5>Sorry, I think you missed bit....</h5>";
$error = true;
} else {
$error = false;
mail("example#gmail.com", $name, $email, $message);
echo "<h5>Thank you for getting in touch. I'll get back to you ASAP.</h5>";
}
if($error == true):
?>
<article id="contact-form">
<article id="load_area">
<form id="my-form">
<input type="text" name="name" placeholder="Name" />
<input type="text" name="email" placeholder="Email" />
<textarea name="message" placeholder="Message" /></textarea>
<input type="button" class="submit_button" value="Send" name="send_button" />
</form>
</article>
</article>
<?php
endif;
?>
Here is the HTML :
<div class="toggle hidemail" id="drop-button" href=""> Email us here </div>
<div class="hidden hiddenform">
<article id="contact-form">
<article id="load_area">
<form id="my-form">
<input type="text" name="name" placeholder="Name" />
<input type="text" name="email" placeholder="Email" />
<textarea name="message" placeholder="Message" /></textarea>
<input type="button" class="submit_button" value="Send" name="send_button" />
</form>
</article>
</article>
</div>
$(document).ready(function() {
$(".submit_button").live("click", function() {
$("#load_area").fadeOut('slow', function() {
$("#load_area").fadeIn();
$.post("process.php", $("#my-form").serialize(), function(data) {
$("#load_area").html(data);
})
});
})
})
Try using
$(".submit_button").on("click", function(){
instead of '$(".submit_button").live("click", function(){
From jQuery Docs:
As of jQuery 1.7, the .live() method is deprecated
also try to use
$('#my-form').submit(function() {
alert('Handler for .submit() called.');
return false;
});
and set an action in your html form like so:
<form id="my-form" action="process.php">

Categories