Offline contact form with server-side PHP handler not showing the success or error message

Question

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>

_“But I'm trying to keep only the PHP handler of the form online and rest of them offline”_ - no clue what you even mean by that to begin with. — CBroe, Apr 23 '18 at 11:21
So basically you will have a html-file with the form in it who you can give 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. That should work in my opinion! or do i get you wrong? — wayneOS, Apr 23 '18 at 11:25
Thanks. Exactly that is what I'm trying to express. @wayneOS — Ashonko, Apr 23 '18 at 11:25
What happens instead? Is there any error message involved, either in your browser's developer console or the network tools? — Nico Haase, Apr 23 '18 at 11:32
In the console it says, `Failed to load http://example.com/form-process.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:49456' is therefore not allowed access.` @NicoHaase — Ashonko, Apr 23 '18 at 11:42
Possible duplicate of [XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin](https://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin) — Nico Haase, Apr 23 '18 at 11:47
Okay, I've added `header('Access-Control-Allow-Origin: *');` to the server side php and now it creates the form after it has been submitted (previously it didn't), but still doesn't show the success message. @NicoHaase — Ashonko, Apr 23 '18 at 11:55

Offline contact form with server-side PHP handler not showing the success or error message

0 Answers0