Contact Without Redirect

Question

The contact form I'm using redirects after message has been sent but i would like the user to get a 'Message Sent' alert that would appear & disappears somewhere on the contact form instead. Meaning the page never refreshes nor does the user get taken away from the page or contact form.

Is this possible & if so could someone please show me the code i need to add to the current below...

<form id="contact-form-face" class="clearfix"      action="http://www.demo.com/php/contactengine.php">
    <input type="text" name="email" value="Email"     onFocus="if (this.value == 'Email') this.value = '';" onBlur="if (this.value == '') this.value = 'Email';" />
    <textarea name="message" onFocus="if (this.value     == 'Message') this.value = '';" onBlur="if (this.value == '') this.value = 'Message';">Message</textarea>
    <input class="contact_btn" name="submit"     type="submit" value="Send Message" />
</form>

And the PHP:

<?php

$EmailFrom = "myemail";
$EmailTo = "myemail";
$Subject = "";
$Email = Trim(stripslashes($_POST['email'])); 
$Message = Trim(stripslashes($_POST['message'])); 

// validation
$validationOK=true;
if (!$validationOK) { 
    print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
    exit;
}

// prepare email body text
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";

// send email 
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");

// redirect to success page 
if ($success){
   print "<meta http-equiv=\"refresh\"   content=\"0;URL=contactthanks.php\">";
}
else{
   print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
}
?>

Any help would be greatly appreciated as I'm very new to this side of things.

Unfortunately the reason I'm an here is to gain expertise from someone who can talk me through it. To tell me to Google it defeats the purpose of this site but thanks anyway for pointing out the obvious — MKDesigns, Jul 06 '15 at 07:57
IMO it's good to go through some tutorials if you never heard about AJAX before. Just a code snippet is not enough to get the concept behind AJAX. — Axel Guilmin, Jul 06 '15 at 08:05

Praveen Kumar Purushothaman · Accepted Answer · 2015-07-06T09:10:37.933

3

You can simply use AJAX to do this:

$(function () {
  $("#contact-form-face").submit(function (e) {
    e.preventDefault();
    $.post($(this).attr("action"), $(this).serialize(), function () {
      alert("Submitted!");
    });
  });
});

If the URL is on another domain, then CORS will be blocked. In order to avoid that, use:

<?php
  header("Access-Control-Allow-Origin: *");

On the PHP file, that is being called.

For the form interaction:

$(function () {
  $("#contact-form-face").submit(function (e) {
    e.preventDefault();
    $.post($(this).attr("action"), $(this).serialize(), function () {
      $("#post-ajax").html("Your Message Has Been Sent! Thank You For Contacting Us.").show();
      $("#contact-form-face").hide();
    });
  });
});

<!-- CONTACT FORM -->
<div class="span9 contact_form">
  <div id="note"></div>
  <div id="fields">
    <div id="post-ajax" style="display: none;"></div>
    <form id="contact-form-face" class="clearfix" action="http://www.demo.com/php/contactengine.php">
      <input type="text" name="email" value="Email" onFocus="if (this.value == 'Email') this.value = '';" onBlur="if (this.value == '') this.value = 'Email';" />
      <textarea name="message" onFocus="if (this.value     == 'Message') this.value = '';" onBlur="if (this.value == '') this.value = 'Message';">Message</textarea>
      <input class="contact_btn" name="submit"     type="submit" value="Send Message" />
    </form>
  </div>
</div><!-- //CONTACT FORM -->

edited Jul 06 '15 at 09:10

answered Jul 06 '15 at 07:59

Praveen Kumar Purushothaman

164,888
24
203
252

Ive add this script to my HTML page but now when i submit nothing happens - have i missed something? – MKDesigns Jul 06 '15 at 08:07
That's right. Check your PHP's output. It would have sent the details. Did you get "Submitted" in the alert? – Praveen Kumar Purushothaman Jul 06 '15 at 08:08
Ok now the message has came though to my email address with the correct information but no alert is presented on my page - do i to add something further to create the alert? – MKDesigns Jul 06 '15 at 08:10
Check your console to see if there's any error preventing the alert from displaying? – Praveen Kumar Purushothaman Jul 06 '15 at 08:11
Does this help..? [Error] XMLHttpRequest cannot load http://www.demo.com/php/contactengine.php. Origin http://www.demosite2.com is not allowed by Access-Control-Allow-Origin. (chctestv4, line 0) – MKDesigns Jul 06 '15 at 08:15
Which helps? Sorry, did I miss anything? – Praveen Kumar Purushothaman Jul 06 '15 at 08:15
Ah!!! CORS!!! Man, are you trying to use something crazy? `:P` Where are you calling the script from? – Praveen Kumar Purushothaman Jul 06 '15 at 08:16
I moved my PHP script to another server because i had a feeling this server wasn't playing ball with it - is this the problem do you think? – MKDesigns Jul 06 '15 at 08:18
That's the problem buddy! But you can enable CORS by seeing my updated answer. – Praveen Kumar Purushothaman Jul 06 '15 at 08:19
Aaa ha! We now have an alert popup!!! My next question is how do i make this an alert that appears on my contact form instead of a popup? Thank you so much for your help & patience – MKDesigns Jul 06 '15 at 08:23
Create a small text with `
` just before the form, and give it an ID. Then in the success function, try to unhide it by using `$("#post-ajax").show()`.
– Praveen Kumar Purushothaman Jul 06 '15 at 08:26
Man! You are making us do everything that we are not supposed to do! `;)` – Praveen Kumar Purushothaman Jul 06 '15 at 08:27
Hahaha im so sorry but i really appreciate it. Ok I've tried this but it completely hides my form now :( – MKDesigns Jul 06 '15 at 08:32
Show your code in a fiddle, if possible? Go to JSBin.com and do whatever you have did in your code. `:)` Or use [plunker](http://plnkr.co/). – Praveen Kumar Purushothaman Jul 06 '15 at 08:34
Ok just before i do that where do i add: $("#post-ajax").show() I might have placed this in the wrong place – MKDesigns Jul 06 '15 at 08:38
Most likely hahaha. So where does this code go? Do i add it to this... $(function () { $("#contact-form-face").submit(function (e) { e.preventDefault(); $.post($(this).attr("action"), $(this).serialize(), function () { alert("Submitted!"); }); }); }); – MKDesigns Jul 06 '15 at 08:41
You need to replace the `alert`. `;)` – Praveen Kumar Purushothaman Jul 06 '15 at 08:42
1

Could i dare be a pain & ask you to show me this as an edit? – MKDesigns Jul 06 '15 at 08:45
Bro, put the full code in pastebin or something, please! – Praveen Kumar Purushothaman Jul 06 '15 at 08:47
Ok sorry for the hassle: https://jsfiddle.net/4nrj4un4/1/ – MKDesigns Jul 06 '15 at 08:53
@MKDesigns Check answer please. `:)` – Praveen Kumar Purushothaman Jul 06 '15 at 09:10
1

Amazing!!! Thank you so much, you have been fantastic. Works like a charm & much slicker looking than i had hoped ;-) – MKDesigns Jul 06 '15 at 09:41
At the risk of pushing my luck... How would i go about adding validation to this contact form & PHP with the unfilled out section turning red to indicate the error? – MKDesigns Jul 06 '15 at 13:23
Yes of course sorry... Ok if one of the fields has been left blank & the user clicks 'Send' i would like the field to highlight RED to indicate the mission information. Is this possible? – MKDesigns Jul 06 '15 at 13:26
Sure.. It is possible. You have a lot of plugins to do that. – Praveen Kumar Purushothaman Jul 06 '15 at 13:54
http://jqueryvalidation.org/ – Praveen Kumar Purushothaman Jul 06 '15 at 13:54

Contact Without Redirect

1 Answers1