I have that PHP, jQuery, and AJAX Powered Contact Form Bootstrap
It use Form Validator.
I want to add Security Question Input into that form (like here), to prove the user is human.
Not something complicated. Question like that:
Question: What is the capital city of New York?
Answer: New York
If the user write "new york" and submit, the form will send.
Here is the code:
Here is the index.html HTML Markup code:
<form role="form" id="contactForm" class="contact-form" data-toggle="validator" class="shake">
<div class="form-group">
<div class="controls">
<input type="text" id="name" class="form-control" placeholder="Name" required data-error="Please enter your name">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<div class="controls">
<input type="email" class="email form-control" id="email" placeholder="Email" required data-error="Please enter your email">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<div class="controls">
<input type="text" id="msg_subject" class="form-control" placeholder="Subject" required data-error="Please enter your message subject">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<div class="controls">
<textarea id="message" rows="7" placeholder="Massage" class="form-control" required data-error="Write your message"></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<button type="submit" id="submit" class="btn btn-effect"><i class="fa fa-check"></i> Send Message</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</form>
Here is the contact-form-script.js code:
$("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
formError();
submitMSG(false, "Did you fill in the form properly?");
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var msg_subject = $("#msg_subject").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "assets/php/form-process.php",
data: "name=" + name + "&email=" + email + "&msg_subject=" + msg_subject + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});
}
function formSuccess(){
$("#contactForm")[0].reset();
submitMSG(true, "Message Submitted!")
}
function formError(){
$("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
}
function submitMSG(valid, msg){
if(valid){
var msgClasses = "h3 text-center tada animated text-success";
} else {
var msgClasses = "h3 text-center text-danger";
}
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}
Here's the form-process.php
<?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
// EMAIL
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
// MSG SUBJECT
if (empty($_POST["msg_subject"])) {
$errorMSG .= "Subject is required ";
} else {
$msg_subject = $_POST["msg_subject"];
}
// MESSAGE
if (empty($_POST["message"])) {
$errorMSG .= "Message is required ";
} else {
$message = $_POST["message"];
}
$EmailTo = "your#email.com";
$Subject = "New Message";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Subject: ";
$Body .= $msg_subject;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Something went wrong :(";
} else {
echo $errorMSG;
}
}
?>
What do i need to add in the php file (or in the js file as well) so i can prove the user is human?
Related
I have a contact form that works perfectly when it is on a server. But I'm trying to keep only the handler.php on the server and rest of files offline. It's been sending emails so far nicely. The only problem is, it doesn't show the success message after the email has been successfully sent, which was not a problem when all the files were online.
So I am trying to make a html-file with the form in it that I can ghive people to open it locally in their browsers. Then, after they hit submit the data will be sent to your php-site on a online-server.
What should I update to get the success or error message form the emailing process? Thanks in advance for your suggestions.
The form-scripts.js:
$("#contactForm").validator().on("submit", function(event) {
if (event.isDefaultPrevented()) {
formError();
submitMSG(false, "Did you fill in the form properly?");
} else {
event.preventDefault();
submitForm();
}
});
function submitForm() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "http://example.com/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success: function(text) {
if (text == "success") {
formSuccess();
} else {
formError();
submitMSG(false, text);
}
}
});
}
function formSuccess() {
$("#contactForm")[0].reset();
submitMSG(true, "Message Submitted!")
}
function formError() {
$("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(this).removeClass();
});
}
function submitMSG(valid, msg) {
if (valid) {
var msgClasses = "h3 text-center tada animated text-success";
} else {
var msgClasses = "h3 text-center text-danger";
}
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}
This is the form-process.php which is on a server:
<?php
$errorMSG = "";
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$EmailTo = "example#gmail.com";
$Subject = "New Message Received";
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
$success = mail($EmailTo, $Subject, $Body, "From:" . $email);
// redirect to success page
if ($success && $errorMSG == "") {
echo "success";
} else {
if ($errorMSG == "") {
echo "Something went wrong :(";
} else {
echo $errorMSG;
}
}
?>
And here is the form:
<form role="form" id="contactForm" data-toggle="validator" class="shake">
<div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required data-error="NEW ERROR MESSAGE">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="message" class="h4 ">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
<div class="help-block with-errors"></div>
</div>
<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</form>
am a learner and I need your assistance. I have an online form for job application where you can list past jobs and enter referees. The problem is I want to send the details, which are in arrays but can't seem to catch a break.
This is the html form
<fieldset>
<h2>7: Referees</h2>
<div class="row clone3">
<div class="form-group">
<label for="address">Name</label>
<input type="text" class="form-control" id="name" name="name[]" placeholder="Name">
</div>
<div class="form-group">
<label for="address">Contact (Email)</label>
<input type="text" class="form-control" id="phone" name="phone[]" placeholder="Referee contact">
</div>
<div class="form-group">
<label for="address">Contact (Mobile)</label>
<input type="text" class="form-control" id="email" name="email[]" placeholder="Referee contact">
</div>
</div>
<div class="row"><div class="col-xs-12" align="center">Add Another Referee</div><br/><br/></div>
<input type="button" name="previous" class="previous btn btn-default" value="Previous" />
<input type="submit" name="submit" class="submit btn btn-success" value="Submit Application" id="form-submit" />
<div id="msgSubmit" class="h3 text-center hidden"></div>
</fieldset>
This is the script to process the form
$("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
formError();
submitMSG(false, "Did you fill in the form properly?");
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&phone=" + phone,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});
}
function formSuccess(){
$("#contactForm")[0].reset();
submitMSG(true, "Message Sent! We'll get back shortly. Thank you! ")
}
function formError(){
$("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
}
function submitMSG(valid, msg){
if(valid){
var msgClasses = "h3 text-center tada animated text-success";
} else {
var msgClasses = "h3 text-center text-danger";
}
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}
Below is the php code to send the form via email.
<?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
// EMAIL
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
// PHONE
if (empty($_POST["phone"])) {
$errorMSG .= "Phone number is required ";
} else {
$phone = $_POST["phone"];
}
$EmailTo = "xyz#gmail.com";
$Subject = "New Application From the Website";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Phone: ";
$Body .= $phone;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Something went wrong :(";
} else {
echo $errorMSG;
}
}
?>
Now, the problem is the form only sends the email as one referee, even if I enter several referees.
I am not sure what am I doing wrong, I have contact us form which sends an email. But nothing happens after I click on Submit. I am using Materialize CSS for UI.
<div id="modal-contact" class="modal">
<div class="modal-content">
<h5 class="center">Get in touch</h5>
<div class="row">
<form id="contact" method="post" class="col s12">
<div class="row">
<div class="input-field col s12 m12 l4">
<input id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s12 m12 l4">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
<div class="input-field col s12 m12 l4">
<input id="phone" type="tel" class="validate" maxlength="10" minlength="10">
<label for="phone">Phone</label>
</div>
<div class="input-field col s12">
<input id="email" class="validate" type="email">
<label for="email">Email Address</label>
</div>
<div class="input-field col s12">
<textarea id="message" class="materialize-textarea validate"></textarea>
<label for="message">How can we help?</label>
</div>
</div>
</form>
<div class="hide" id="msgSubmit"></div>
</div>
<div class="modal-footer">
<button class="btn waves-effect light-green accent-4" type="submit">Submit <i class="material-icons right">send</i></button>
</div>
</div>
I am also using Ajax which is as follows:
$(function (){
$("#contact").on("submit", function(e){
e.preventDefalut();
submitForm();
});
});
function submitForm() {
var fname = $("#first_name").val();
var lname = $("#last_name").val();
var phone = $("#phone").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "contact.php",
data: "fname=" + fname + "&lname=" + lname + "&phone=" + phone + "&email=" + email + "&message=" + message,
sucess : function(text) {
if(text == "success") {
formSuccess();
} else {
formError();
submitMSG(false, text);
}
}
});
};
function formSuccess() {
$("#contact")[0].reset();
submitMSG(true, "We have received your message and would like to thank you for writing to us. If your inquiry is urgent, please use the telephone number to contact us")
}
function formError() {
$("#contact").removeClass().addClass(), function() {
$(this).removeClass();
}
}
function submitMSG(valis, MSG) {
if(valid) {
var msgClasses = "h3";
} else {
var msgClasses = "h3";
}
$("#msgSubmit").removeClass.addClass(msgClasses).text(msg);
}
And finally PHP code
<?php
$errroMSG = "";
if (empty($_POST["fname"])) {
$errorMSG = "First Name is required ";
} else {
$fname = $_POST["fname"];
}
if (empty($_POST["lname"])) {
$errorMSG = "Last Name is required ";
} else {
$lname = $_POST["lname"];
}
if (empty($_POST["phone"])) {
$errorMSG = "Phone is required ";
} else {
$phone = $_POST["phone"];
}
if (empty($_POST["email"])) {
$errorMSG = "Email is required ";
} else {
$email = $_POST["email"];
}
if (empty($_POST["message"])) {
$errorMSG = "Message is required ";
} else {
$pmessage = $_POST["message"];
}
$EmailTo = "test#gmail.com";
$Subject = "New message from United Constructions";
$Body .= "First Name: ";
$Body .= $fname;
$Body .= "\n";
$Body .= "Last Name: ";
$Body .= $lname;
$Body .= "\n";
$Body .= "Phone: ";
$Body .= $phone;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Something went wrong :(";
} else {
echo $errorMSG;
}
}
?>
So I am able to open the Modal and after filling the details I click on Submit button. Nothing happens also can I add Google reCaptcha to this form if yes should I add it to JS or PHP. If I add it to PHP will I have to make any changes on JS file. Thank you so much for the response.
It's simple just change/replace your ajax part of above code :
$(function (){
$("#contact").on("submit", function(e){
e.preventDefault();
submitForm();
});
});
To:
$(function (){
$("#contact").submit(function(e){
submitForm();
e.preventDefault();
});
});
I freeze all the fields on the form and then issue the mail when I press the submit button. There is a Turkish character problem at the output of mail.
contact.html
<div class="col-lg-6">
<div class="well">
<h3>İletişim Formu</h3>
<form role="form" id="contactForm" data-toggle="validator" class="shake">
<div class="row">
<div class="form-group col-sm-6">
<label for="name">Ad Soyad</label>
<input type="text" class="form-control" id="name" placeholder="" required data-error="Lütfen bu alanı doldurun.">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="" required data-error="Lütfen bu alanı doldurun.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="telefon">Telefon</label>
<input type="text" class="form-control" id="telefon" placeholder="" required data-error="Lütfen bu alanı doldurun.">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="konu">Konu</label>
<input type="text" class="form-control" id="konu" placeholder="" required data-error="Lütfen bu alanı doldurun.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="sektor">Sektör</label>
<select class="form-control" id="sektor" placeholder="" required data-error="Lütfen bu alanı doldurun.">
<option value="Özel" selected="selected">Özel</option>
<option value="Projeci">Projeci</option>
<option value="Satıcı">Satıcı</option>
<option value="Uygulayıcı">Uygulayıcı</option>
<option value="Diğer">Diğer</option>
</select>
</div>
<div class="form-group">
<label for="message">Mesajınız</label>
<textarea id="message" class="form-control" rows="5" placeholder="" required data-error="Lütfen bu alanı doldurun."></textarea>
<div class="help-block with-errors"></div>
</div>
<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Gönder</button>
<div id="msgSubmit" class="text-center hidden"></div>
<div class="clearfix"></div>
</form>
</div>
</div>
form-script.js
$("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
formError();
submitMSG(false, "Tüm alanları doldurdunuz mu?");
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var telefon = $("#telefon").val();
var konu = $("#konu").val();
var sektor = $("#sektor").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&telefon=" + telefon + "&konu=" + konu + "&sektor=" + sektor + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});
}
function formSuccess(){
$("#contactForm")[0].reset();
submitMSG(true, "Message Submitted!")
}
function formError(){
$("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
}
function submitMSG(valid, msg){
if(valid){
var msgClasses = "text-center tada animated text-success";
} else {
var msgClasses = "text-center text-danger";
}
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}
form-process.php
<?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
// EMAIL
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
// TELEFON
if (empty($_POST["telefon"])) {
$errorMSG .= "Telefon is required ";
} else {
$telefon = $_POST["telefon"];
}
// KONU
if (empty($_POST["konu"])) {
$errorMSG .= "Konu is required ";
} else {
$konu = $_POST["konu"];
}
// SEKTOR
if (empty($_POST["sektor"])) {
$errorMSG .= "Sektor is required ";
} else {
$sektor = $_POST["sektor"];
}
// MESSAGE
if (empty($_POST["message"])) {
$errorMSG .= "Message is required ";
} else {
$message = $_POST["message"];
}
$EmailTo = "simple#mail.com";
$Subject = "New Message Received";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Telefon: ";
$Body .= $telefon;
$Body .= "\n";
$Body .= "Konu: ";
$Body .= $konu;
$Body .= "\n";
$Body .= "Sektör: ";
$Body .= $sektor;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Something went wrong :(";
} else {
echo $errorMSG;
}
}
?>
Mail Output
Name: Ahmet
Email: ahmetcadi#gmail.com
Telefon: 05636588110
Konu: üğ
Sektör: Özel
Message: üğiğ
Try adding charset parameter to your AJAX request, like so:
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&telefon=" + telefon + "&konu=" + konu + "&sektor=" + sektor + "&message=" + message,
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});
Insert
<meta charset="utf-8"/>
at the top of your Head section. Example usage :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
...etc
</head>
...
Solution of the problem. Erol Keskin Thank you.
$success = mail($EmailTo, '=?utf-8?B?'.base64_encode($Subject).'?=', $Body, 'MIME-Version: 1.0' . "<br>".'Content-type: text/html; charset=utf-8' . "<br>".'From: '.$email . "\r\n");
This is output in the email so you need to set the relevant header there as well; currently you're only setting the From header.
// send email
$success = mail(
$EmailTo,
$Subject,
$Body,
"From: {$email}\r\nContent-Type: text/plain;charset=utf8"
);
See the section on Additional Headers : http://php.net/manual/en/function.mail.php
As an aside, depending on the mailserver you may need to tweak your line terminators in the header string - Postfix expects them to be in the format relevant to the OS, so \n on *nix systems. It's unlikely to break anything but...
I'm new to php and ajax.
I'm having an issue with a contact form I've created. It's not sending all of the information. I've isolated the issue and need an explanation as to why this is happening, I'll explain more below.
This is the HTML:
<section class="contact text-center " id="contact">
<div class="container">
<div class="row">
<!--Actual Form -->
<div class="col-md-8 col-xs-12 col-sm-12 col-sm-offset-2 col-sm-8">
<article class="contact-form">
<form role="form" id="contactForm" data-toggle="validator" class="shake">
<!-- FIRST ROW -->
<div class="row">
<div class="form-group col-sm-4">
<input type="text" class="form-control" id="name" placeholder="First Name * ">
</div>
<div class="form-group col-sm-4">
<input type="text" class="form-control" id="lname" placeholder="Last Name *">
</div>
<div class="form-group col-sm-4">
<input type="text" class="form-control" id="companyname" placeholder="Company name *">
</div>
</div>
<!-- SECOND ROW -->
<div class="row">
<div class="form-group col-sm-4">
<input type="text" class="form-control" id="jobtitle" placeholder="Job Title *">
</div>
<div class="form-group col-sm-4">
<input type="text" class="form-control" id="email" placeholder="Business Email *">
</div>
<div class="form-group col-sm-4">
<input type="tel" class="form-control" id="phonenumber" placeholder="Phone Number *">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<textarea id="message" class="form-control" rows="5" placeholder="Message *"></textarea>
</div>
<button onclick="myFunction()" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</form>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
This is the php for the form.
<?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
// Last Name
if (empty($_POST["lname"])) {
$errorMSG = " Last Name is required ";
} else {
$lname = $_POST["lname"];
}
// Company Name
if (empty($_POST["companyname"])) {
$errorMSG = " Company Name is required ";
} else {
$companyname = $_POST["companyname"];
}
// Job Title
if (empty($_POST["jobtitle"])) {
$errorMSG = "Job Title is required ";
} else {
$jobtitle = $_POST["jobtitle"];
}
// EMAIL
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
// Phone Number
if (empty($_POST["phonenumber"])) {
$errorMSG .= "Phone Number is required ";
} else {
$phonenumber = $_POST["phonenumber"];
}
// MESSAGE
if (empty($_POST["message"])) {
$errorMSG .= "Message is required ";
} else {
$message = $_POST["message"];
}
$EmailTo = "farrun.wow#gmail.com";
$Subject = "New Message Received";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Last Name: ";
$Body .= $lname;
$Body .= "\n";
$Body .= "Company Name: ";
$Body .= $companyname;
$Body .= "\n";
$Body .= "Job Title: ";
$Body .= $jobtitle;
$Body .= "\n";
$Body .= "Business Email Address: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Phone Number: ";
$Body .= $phonenumber;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Something went wrong :(";
} else {
echo $errorMSG;
}
}
?>
And this is the ajax:
$("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
formError();
submitMSG(false, "Did you fill in the form properly?");
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var lname = $("#lname").val();
var companyname = $("#companyname").val();
var jobtitle = $("#jobtitle").val();
var email = $("#email").val();
var email = $("#phonenumber").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
//data: "name=" + name + "&lname=" + lname + "&companyname=" + companyname + "&jobtitle=" + jobtitle + "&email=" + email + "&phonenumber=" + phonenumber + "&message=" + message ,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});
}
function formSuccess(){
$("#contactForm")[0].reset();
submitMSG(true, "Message Submitted!")
}
function formError(){
$("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
}
function submitMSG(valid, msg){
if(valid){
var msgClasses = "h3 text-center tada animated text-success";
} else {
var msgClasses = "h3 text-center text-danger";
}
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}
The issue is here with this line
data: "name=" + name + "&email=" + email + "&message=" + message,
I can only have three entries in this, when I add any more to it the form breaks completely for some reason. The only three that send is "name", "email" and message"
Does anyone have any idea as to why?
First, a few observations.
Your form is submitting as the default GET method. Setting method="post" will line things up with your PHP script.
Your form inputs are missing a crucial element to process the form data without setting them manually as you are doing. E.G. name. Each element should have a name, to be referenced in either a post or get request.
Your method in the AJAX call for assigning the variables could (and should) be much simpler. See my example below.
The onClick event myFunction() does not exist in the code sample you provided.
Form HTML
Update the form method. Add name="field" to input and textarea.
<form id="contactForm" method="POST">
<input name="fname" id="fname" type="text" />
<input name="lname" id="lname" type="text" />
... other fields
<button id="contactSubmit" class="">Submit Form</button>
</form>
PHP
Can largely remain the same. Although, update the errorMsg to be as such.
// Init as empty
$errorMSG = '';
// NAME
if (empty($_POST["name"])) {
// Use .= to concat
$errorMSG .= "Name is required ";
} else {
$name = $_POST["name"];
}
// Last Name
if (empty($_POST["lname"])) {
// Use .= to concat
$errorMSG .= " Last Name is required ";
} else {
$lname = $_POST["lname"];
}
...etc
JavaScript
Structurally, you were pretty good. The AJAX is really all that changed.
function submitForm(){
var formData = $('#contactForm').serialize();
$.ajax({
type: "POST",
url: "path/to/form-process.php",
data: formData,
success: function(text) {
if (text == "success") {
// debug
console.log("success");
// ... other functions
} else {
// debug
console.log("error");
// ... other functions
}
}
});
}