PHP in Javascript - 403

[ThierryGD]

I downloaded a form with part JQuery in script.js and part PHP in contactform-process.php. The script.js is in a folder named js and contactform-process.php in a folder called php. Both folder are in the templates folder. There is a reference to contactform-process.php in script.js, but it doesn't work. The browser console gives a 403 error. Do I need to change the file permissions of the js or php file?

Edited July 12, 2020 by ThierryGD
wrong title

[Jan Romero]

If you must use these files it would probably be best to call the php file from a ProcessWire template. For instance the same template that outputs the form. You could change the form’s ACTION from “contactform-process.php” to “/” and check if the form was submitted at the top of the template file (for instance, if $input->get or $input->post contains some value or possibly if $config->ajax is true, depending on what the form does). If so, include the contactform-process.php file.

If you tell us what you’re trying to achieve, we might be able to help you do it with ProcessWire, though.

[ThierryGD]

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;
    }
}
?>

 

[MoritzLost]

ProcessWire blocks direct access to PHP files within the templates directory, see: https://github.com/processwire/processwire/blob/master/htaccess.txt#L317-L318
And with good reason, since the template files are supposed to be included by ProcessWire during page visits, so calling a template directly (bypassing ProcessWire's access checks) might leak confidential data.

If you absolutely want to do it your way, move the PHP file outside the templates directory (for example, in the webroot) and it should work (there are several other rules in the htaccess blocking specific files and directories from direct access, so make sure to check the htaccess for those).

But the "ProcessWire way" would be to create an API template and page and use URL segments and URL parameters to pass data to it. This way, you get access checks out of the box and can utility ProcessWire's mail modules instead of the native mail function, which will very likely send your mails directly to the spam folder of the recipients ...

[ThierryGD]

The first option changing permissions seems less than ideal.

Can you recommend this module? https://modules.processwire.com/modules/form-template-processor-mailer/
Doing the form with this module should be easy enough for me. ( I have no idea how to create an API template and use URL segments)

[MoritzLost]

@ThierryGD I have never used this module, so no idea. If you don't need something custom-built or super specific, I recommend Form Builder for ProcessWire: https://processwire.com/store/form-builder/

It's a commercial module, but absolutely worth it. Comes with automatic mail notification to site administrators for new form requests, as well as an auto-responders. For actual mail delivery the best option is to use a mail account and send mail through SMTP. There's the WireMail SMTP module for that.