I am trying to have the form working. It is a simple form sending emails with script.js sending all variables to the contactfom.php.
When clicking on the submit button, I get a 403 error in the console of my browser, which I'm pretty sure means the script.js file doesn't have the permissions needed. What permissions does it need?
The form is working fine when the template is not using processwire as backend.
Thanks for any help.
Here the HTML code:
<form id="contactForm" data-toggle="validator" data-focus="false">
<div class="form-group">
<input type="text" class="form-control-input" id="cname" required>
<label class="label-control" for="cname">Name</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<input type="email" class="form-control-input" id="cemail" required>
<label class="label-control" for="cemail">Email</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<textarea class="form-control-textarea" id="cmessage" required></textarea>
<label class="label-control" for="cmessage">Your message</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group checkbox">
<input type="checkbox" id="cterms" value="Agreed-to-Terms" required>I agree with <a href="<?= $pages->get('/data-privacy/')->url ?>">Privacy Policy</a>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="form-control-submit-button">SUBMIT MESSAGE</button>
</div>
<div class="form-message">
<div id="cmsgSubmit" class="h3 text-center hidden"></div>
</div>
</form>
Here the JS:
/* Contact Form */
$("#contactForm").validator().on("submit", function(event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
cformError();
csubmitMSG(false, "Please fill all fields!");
} else {
// everything looks good!
event.preventDefault();
csubmitForm();
}
});
function csubmitForm() {
// initiate variables with form content
var name = $("#cname").val();
var email = $("#cemail").val();
var message = $("#cmessage").val();
var terms = $("#cterms").val();
$.ajax({
type: "POST",
url: "/site/templates/php/contactform-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message + "&terms=" + terms,
success: function(text) {
if (text == "success") {
cformSuccess();
} else {
cformError();
csubmitMSG(false, text);
}
}
});
}
function cformSuccess() {
$("#contactForm")[0].reset();
csubmitMSG(true, "Message Submitted!");
$("input").removeClass('notEmpty'); // resets the field label after submission
$("textarea").removeClass('notEmpty'); // resets the field label after submission
}
function cformError() {
$("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(this).removeClass();
});
}
function csubmitMSG(valid, msg) {
if (valid) {
var msgClasses = "h3 text-center tada animated";
} else {
var msgClasses = "h3 text-center";
}
$("#cmsgSubmit").removeClass().addClass(msgClasses).text(msg);
}
And here the PHP:
<?php
$errorMSG = "";
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
if (empty($_POST["email"])) {
$errorMSG = "Email is required ";
} else {
$email = $_POST["email"];
}
if (empty($_POST["message"])) {
$errorMSG = "Message is required ";
} else {
$message = $_POST["message"];
}
if (empty($_POST["terms"])) {
$errorMSG = "Terms is required ";
} else {
$terms = $_POST["terms"];
}
$EmailTo = "tester1234@gmx.net";
$Subject = "New message from website contact form";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
$Body .= "Terms: ";
$Body .= $terms;
$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;
}
}
?>
