PHP/JavaScript Email Contact Form

Question

Im trying to use a contact form for email which by default after submitting the mail redirects to another page. I would however like after the mail submits to stay on the same page but with a popup message telling the sender than the mail has been sent but without leaving the page. Below is the javascript from my HTML page & the PHP I'm trying to use.

Can anyone explain what I'm missing & how to do this please?

<script type="text/javascript">
        $(document).ready(function() {

            $("#contactFormSubmit").click(function( event ) {
                $.post( “/contactengine.php", $("#contactForm").serialize() );
                $('#contactFormConfirmation').slideDown();
                $('#submitFormReset').click();
            });

        });
    </script>




<?php
$EmailFrom = "";
$EmailTo = "";
$Subject = "";
$Name = Trim(stripslashes($_POST['Name'])); 
$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 = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\n";
$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\">";
}
?>

@markkane check my answer and let me know if you face any problems — Slim
– Slim, Commented Apr 25, 2014 at 14:27

score 1 · Accepted Answer · 2014-05-01 08:25:36Z

1

Okay so I think you should try this!

First run the php script as you would to send the email then after that include this line at the bottom of your php script

header("Location: http://myurl.com/contact?check=1");

Then on the contact page have an hidden input that contains the value 0 which is called check and then use url parameters to fill the input box.

On page load check the value of the hidden input box to see if its 1 or 0. If its 1 show a pop up box if its 0 load the page normally

I hope this helps!

USE THIS CODE

<form id="contactForm" method="post" action="contactengine.php">
    <div class="row half">
        <div class="6u">
            <input type="text" class="text" placeholder="Name" name="Name" />
        </div>
        <div class="6u">
            <input type="text" class="text" placeholder="Email" name="Email" />
        </div>
    </div>
    <div class="row half">
        <div class="12u">
            <textarea name="message" placeholder="Message" name="Message"></textarea>
        </div>
    </div>
    <div class="row" id="contactFormConfirmation" style="display: none;">
         <div class="12u">
             <p style="color: white; background-color: #FF3B30;width: 325px;border-radius: 0.25em;padding: .3em;margin: 0 auto;">Thank you for getting in touch!</p>
          </div>
    </div>
    <div class="row">
         <div class="12u">
             <ul class="actions">
                  <li>
                      <input type="submit" name="submit" id="contactFormSubmit" class="form-button" value="Submit" />
                  </li>
                  <li>
                      <input type="reset" name="reset" id="submitFormReset" class="form-button alt" value="Clear" />
                  </li>
             </ul>
         </div>
      </div>
  </form>
  <form name="checkf" id="checkf">
         <input name="check" id="check" value="0">
  </form>

EDIT:

Change the code you added just to the one below I forgot to add a line in lol

<script type="text/css">
  function fcheckf(){
    var x = document.getElementById('check').value;
    if(x == 0)
    {
        return false;
    }
    else
    {
         alert("Thank you for submitting your data! - This is the pop up box content!");
    }
  }
</script>

Once you have added the above in, change your:

<body>

tag, to this:

<body onload="fcheckf()">

Another Edit

Now add this just before the

</body>

tag. This is important that it is pasted in the line before the body tag :)

<script type="text/javascript">
var data=location.search;
if(data) {
data=location.search.substring(1);
data=data.split('&');
var pairs={};
for(var i=0; i<data.length; i++){
    var tmp=data[i].split('=');
    pairs[tmp[0]]=tmp[1];
    }
var f = document.checkf;
for (var i in pairs) {
    if(f.elements[i]) {f.elements[i].value = pairs[i];}
    }
}

EDIT 56981 V3

Use this code within your html

<script>
function fcheckf(){
var x = document.getElementById('check').value;
if(x == 0)
{
    return false;
}
else
{
     alert("Thank you for submitting your data! - This is the pop up box content!");
}
 }
</script>
<section id="fourth" class="contact">
    <header>
        <div class="container">
            <span class="image-header-contact"><img src="images/contact-header.png" alt="Video" /></span>
            <h2>Get In Touch</h2>
        </div>
    </header>
    <div class="content style4 featured">
        <div class="container small">
            <form id="contactForm" method="post" action="contactengine.php">
 <div class="row half">
    <div class="6u">
        <input type="text" class="text" placeholder="Name" name="Name" />
    </div>
    <div class="6u">
        <input type="text" class="text" placeholder="Email" name="Email" />
    </div>
 </div>
 <div class="row half">
    <div class="12u">
        <textarea name="message" placeholder="Message" name="Message"></textarea>
    </div>
</div>
<div class="row" id="contactFormConfirmation" style="display: none;">
     <div class="12u">
         <p style="color: white; background-color: #FF3B30;width: 325px;border-radius: 0.25em;padding: .3em;margin: 0 auto;">Thank you for getting in touch!</p>
      </div> 
 </div>
 <div class="row">
     <div class="12u">
         <ul class="actions">
              <li>
                  <input type="submit" name="submit" id="contactFormSubmit" class="form-button" value="Submit" />
              </li>
              <li>
                  <input type="reset" name="reset" id="submitFormReset" class="form-button alt" value="Clear" />
              </li>
         </ul>
     </div>
  </div>
 </form>
 <form name="checkf" id="checkf">
     <input name="check" id="check" value="1">
 </form>
        </div>
    </div>
</section>
   <script>
       var data=location.search;
 if(data) {
 data=location.search.substring(1);
 data=data.split('&');
 var pairs={};
for(var i=0; i<data.length; i++){
var tmp=data[i].split('=');
pairs[tmp[0]]=tmp[1];
}
var f = document.checkf;
for (var i in pairs) {
if(f.elements[i]) {f.elements[i].value = pairs[i];}
}
}
    </script>

edited May 1, 2014 at 8:25

answered Apr 24, 2014 at 13:24

user3122188

Sign up to request clarification or add additional context in comments.

31 Comments

markkane Over a year ago

Thank you for the response - can you show me what this would look like as i can only get it now to reload the page of submission but no popup

user3122188 Over a year ago

Okay so on your page created a hidden in out with an Id of check and name of check with a value of 0

markkane Over a year ago

Im so sorry but as you can tell my knowledge is very limited - could you please show me this code? Thank you very much

user3122188 Over a year ago

No Problem at this into the bottom of your webpage: <input type="hidden" id="check" name="check" value="0">

markkane Over a year ago

Ok ive pasted that into my HTML page ;-)

|

Slim · Accepted Answer · 2014-04-25 14:32:50Z

If you want to stay on the same page you should use ajax. I would suggest to try the jquery $.ajax call as it seems to be easier.

Here is a simple example:

$.ajax({
    url: "pathToThePHPGoesHere", // Here you have to place the path to the php file
    type: 'GET',
    data: $.extend({
        mailSubject: encodeURI(mailSubjectVar), // 1st variable name and value - you can place the content of your HTML box here
        mailBody: encodeURI(mailBodyVar) // 2nd variable name and value - you can place the content of your HTML box here
    }, tJS.getCommonPostData()),
    dataType: "json",  
    cache: false,
    success: function (responseText, status, xhr) {
       alert("Job done!"); // Here is what happens when the request is executed
    },
    error: function (jqXHR, textStatus, error) {
        tJS.manageError(jqXHR); // show an error message if something goes wrong
    }
});

You will need to decode the variables in your php script.

I'm not a php developer, but your code should look like:

$mailSubject = urldecode($_POST['mailSubject']);
$mailBody = urldecode($_POST['mailBody']);

In the .$ajax call I have encoded the characters, so you can transfer UTF-8, that is why you need to use urldecode in your php.

In order to use the above code, don't forget to include the jquery library in your project.

scottfreeman · Accepted Answer · 2014-04-24 13:28:06Z

0

Do something like this:

<script type="text/javascript">
    $(document).ready(function() {
        $("#contactFormSubmit").click(function( event ) {
            $.post("contactengine.php", $("#contactForm").serialize(), function(data) {
                $('#contactFormConfirmation').html(data.message).slideDown();
            },'json');
        });
    });
</script>

<?php

//code to send email here...
$success = true;

$result['status'] = "ok";
$result['message'] = "Your email has been sent.";
if (!$success){
    $result['status'] = "error";
    $result['message'] = "Unable to send your message.";
}
echo json_encode($result);
?>

answered Apr 24, 2014 at 13:28

scottfreeman

11 bronze badge

1 Comment

scottfreeman Over a year ago

In what way didn't it work? I created a JSFiddle here: jsfiddle.net/scottfreeman/dC4Jb which might help (note the JSFiddle example doesn't work if you run it, because it doesn't do the PHP stuff).

Collectives™ on Stack Overflow

PHP/JavaScript Email Contact Form

3 Answers 3

31 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

31 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related