Problems Solved !
Juste replace :
<div class='form-group'>
<div id="google" class="g-recaptcha" data-sitekey="MYPUBLICKEY" data-callback="callback" required data-error="Validate recaptcha"></div>
<div class="help-block with-errors"></div>
</div>
With this :
<div id="recaptcha" class="g-recaptcha" data-sitekey="MYPUBLICKEY"></div>
<div class="help-block with-errors">
<span class="msg-error error"></span>
</div>
And add this js script in new file :
$( '#submit' ).click(function(){
var $captcha = $( '#recaptcha' ),
response = grecaptcha.getResponse();
if (response.length === 0) {
$( '.msg-error').text( "reCAPTCHA is mandatory" );
if( !$captcha.hasClass( "error" ) ){
$captcha.addClass( "error" );
}
} else {
$( '.msg-error' ).text('');
$captcha.removeClass( "error" );
alert( 'reCAPTCHA marked' );
}
})
I would like to add a reCaptcha V2 to my little form contact.
This form use PHP & Ajax to check if all fields aren't empty.
If a field is missing a message appear below this field to inform user.
When all fields are complete ajax send email without page reload.
I would like to do the same with a reCAPTCHA. I've alreay read Official google documentation but it's a little hard for me. If I understood correctly I have to use my private key to check g-recaptcha-response. I dunno how to manipulate token to show message if user aren't complete reCaptcha like for the others fields.
Online exemple :
http://sosmooth.fr/form5/
All files in rar folder :
http://sosmooth.fr/form5.rar
Js File :
$("#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);
}
HTML File :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css" media="screen">
</head>
<body>
<section id="content">
<div class="container">
<div class="row">
<div class="col-md-9">
<h2>Contact Form</h2>
<!-- Start Contact Form -->
<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>
<div class='form-group'>
<div id="google" class="g-recaptcha" data-sitekey="MYPUBLICKEY" data-callback="callback" required data-error="Validate recaptcha"></div>
<div class="help-block with-errors"></div>
</div>
<button type="submit" id="submit" class="btn btn-success"></i> Send Message</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
</section>
<!-- Main JS -->
<script type="text/javascript" src="assets/js/jquery-min.js"></script>
<script type="text/javascript" src="assets/js/form-validator.min.js"></script>
<script type="text/javascript" src="assets/js/contact-form-script.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</body>
</html>
PHP File :
<?php
$privatekey = "MYPRIVATEKEY"
$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 = "john#doe.com";
$Subject = "New Message Received";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body.= nl2br(stripslashes($name));
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Subject: ";
$Body .= nl2br(utf8_decode(stripslashes($msg_subject)));
$Body .= "\n";
$Body .= "Message: ";
$Body .= nl2br(utf8_decode(stripslashes($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;
}
}
?>
Related
I am trying to build a form for my website but It's not working. I have done all the debug but am unable to identify the issue as everything looks fine. Please find the code below:
JS Code:
// 13. contact form
if ($("#contactForm").length) {
setCsrf();
$("#contactForm").validator().on("submit", function(event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
submitMSG(false);
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
}
function submitForm() {
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var comments = $("#comments").val();
var csrfToken = $("#csrfToken").val();
if (csrfToken) {
if (name && email && company && website && description && comments) {
$.ajax({
type: "POST",
url: "/libs/contact-form-process.php",
data: "name=" + name + "&email=" + email + "&comments=" + comments + "&csrfToken=" + csrfToken,
success: function success(text) {
if (text == "success") {
formSuccess();
} else {
submitMSG(false, text);
}
}
});
} else {
submitMSG(false, "Please enter the right information.");
}
} else {
submitMSG(false, "Invalid Token");
}
}
function formSuccess() {
$("#contactForm")[0].reset();
submitMSG(true);
}
function submitMSG(valid, msg) {
if (valid) {
$(".message-box").removeClass('d-none').addClass('d-block ');
$(".message-box div").removeClass('alert-danger').addClass('alert-success').text('Form submitted successfully');
} else {
$(".message-box").removeClass('d-none').addClass('d-block ');
$(".message-box div").removeClass('alert-success').addClass('alert-danger').text('Found error in the form. Please check again.');
}
}
function setCsrf() {
$.ajax({
url: 'libs/csrf.php',
type: "GET",
dataType: "json",
success: function success(data) {
if (data) {
document.getElementById("csrfToken").value = data.csrfToken;
}
},
error: function error(_error) {
console.log("Error " + _error);
}
});
PHP Code (contact-form-process.php)
<?php
session_start();
$errorMSG = "";
$name = $_POST["name"];
$email = $_POST["email"];
$comments = $_POST["comments"];
// CSRF token check
if(empty($_SESSION["csrfToken"]) || ($_SESSION["csrfToken"] !== $_POST["csrfToken"])) {
$errorMSG .= "Invalid Token ";
}
// NAME
if (empty($name)) {
$errorMSG .= "Name is required ";
}
// EMAIL
if (empty($email)) {
$errorMSG .= "Email is required ";
}
// MESSAGE
if (empty($comments)) {
$errorMSG .= "Comments is required ";
}
// change email with your email
$emailTo = "info#****.com";
$subject = "*** Request";
// prepare email body text
$emailBody = " \n Name: ";
$emailBody .= $name;
$emailBody .= "\n";
$emailBody .= "Email: ";
$emailBody .= $email;
$emailBody .= "\n";
$emailBody .= "Additional Comments: ";
$emailBody .= $comments;
$emailBody .= "\n";
// send email
if(empty($errorMSG)) {
if (mail($emailTo, $subject, $emailBody, "From:".$email)){
echo "success";
}
}
else{
echo $errorMSG;
}
?>
HTML Code:
<form action="" method="POST" id="contactForm" class="contact-us-form">
<input type="hidden" name="csrfToken" id="csrfToken" value="" />
<div class="form-row">
<div class="col-md-9 col-12">
<h2>Become our Partner</h2>
<p>Fill out the application below and our team will contact you in 24 hours.</p>
</div>
<div class="col-md-9 col-12">
<div class="form-group">
<input type="text" class="form-control" name="name" id="name" placeholder="Your Name *" required="required">
</div>
</div>
<div class="col-md-9 col-12">
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email *" required="required">
</div>
</div>
<div class="col-md-9 col-12">
<div class="form-group">
<textarea name="comments" id="comments" class="form-control" rows="5" cols="25" placeholder="Add some comments *"></textarea>
</div>
</div>
<div class="col-sm-12 mt-3">
<button type="submit" class="btn btn-brand-01" id="btnContactUs">
Apply Now
</button>
</div>
</div>
</form>
I keep getting the error "Found error in the form. Please check again."
Please help.
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>
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?
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
}
}
});
}