Contact form [with Recaptcha]

312
November 22, 2016, at 09:19 AM

I have a one page site and the contact form doesn't submit or produce a thank you message. After pressing the submit button, the page shows a blank PHP page. I know this has been asked a few times, but I could not find an answer to fix my problem.

After submission, the form is suppose to disappear and a thank you message should appear before the entire overlay disappears. I also, have a google recaptcha on the form. If a user skips the recaptcha validation and submits, the page just refreshes(or directs to the home page). How can I get the error message to appear when this happens? I provided some of the Javascript and PHP code below .

How can I get the thank you message to appear as described above? Is it redundant to have a thank you message for both Javascript and PHP?

HTML:
<form id="contact_form" action="contactform.php" method="POST" role="form">

Javascript:

$("#overlayform .contentform input[type=submit]").on('submit', function(e){ // Not sure if I need this.
            e.preventDefault();
$('#overlayform input, #overlayform textarea').blur();
if ($('#overlayform .ErrorField').length > 0) {
 return false;
} else {
 $('#overlayForm .contentform input[type=submit]').addClass('submitted').val('Sending...'); //After clicking the submit button the button shows Sending
var name = $('#overlay_name').val();
var name= $('#overlay_name2').val();
var email = $('#overlay_email').val();
var telephone = $('#overlay_telephone').val();
var message = $('#overlay_message').val();

$.ajax({
  type: "POST",
  url: 'contactform.php',
  data: {
    name: name,
    telephone: telephone,
    message: message,
  },
  success: function(returnData) {
    if (returnData == 'Error') {
      //alert('Error');
    } else {
      $('#overlayform .contentform h2').text('Thank you...');
      $('#overlayform .contentform h4').text('second message');
      $('#overlayform .contentform , #overlayform .contentform input[type=submit], #overlayform .contentform .form').fadeOut('fast');
      $('#overlayform').delay(3000).fadeOut();
       $(".homecard").fadeIn();

    }
  },
  error: function(returnData) {
  }
});
return false;

} });

PHP:

//Recaptcha privatekey etc.
$resp = recaptcha_check_answer ($privatekey,
                                 $_SERVER["REMOTE_ADDR"],
                                 $_POST["recaptcha_challenge_field"],
                                 $_POST["recaptcha_response_field"]);
 if (!$resp->is_valid) {
   // What happens when the CAPTCHA was entered incorrectly
   die ("The reCAPTCHA wasn't entered correctly. Go back and try it again.") //This never shows
        "(reCAPTCHA said: " . $resp->error . ")");
 } else {
   echo "Thank you."
 }
$name= $_POST['overlay_name'];
$name2= $_POST['overlay_name2'];
$email= $_POST['overlay-email'];
$telephone = $_POST['overlay-telephone'];
$message= $_POST['overlay_message'];
$to='email address';
$subject= "Jancarus Contact Form:" $_POST['myOpt'];
 $body = "
<br>
<p>The following information was submitted through the contact form on your website:</p>
<p><b>Name</b>: $name $name2<br>
 <b>Email</b>: $email<br>
</p>";
$headers = "From: $name $name2 <$email> \r\n";
$headers .= "Reply-To: $email \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = "<html><body>$body</body></html>";
if ($_POST['submit']) {
if ($name != '' && $email != '') {
    if (!$resp->is_valid) {              
        if (mail ($to, $subject, $body, $headers)) { 
        echo '<p>Your message has been sent!</p>';
    } else { 
        echo '<p>Something went wrong, go back and try again!</p>'; //Echo doesn't seem to work. I validated the input fields in Javascript.
    } 
} else if ($_POST['submit'] && $resp) {
    echo '<p>You answered the anti-spam question incorrectly!</p>';
}
} else {
    echo '<p>You need to fill in all required fields!!</p>';
}
Answer 1

First off, I would remove the captcha system until you have everything else running properly.

Secondly, why are you submitting the form and sending the data via ajax? Similar to the above comment I would get rid of the ajax handler at least for now.

Third, if you are getting a white screen it is probably because you are getting a PHP error. Do you have error reporting on? Your php has tons of variables that are undeclared...I'm assuming that you did that somewhere else but I'm not sure.

I would recommend finding a contact form tutorial online and following that.

READ ALSO
Hide portion of element offscreen and push &amp; reveal on click

Hide portion of element offscreen and push & reveal on click

I'm building a responsive page that, when viewed on mobile, includes some popular behaviors. .

183
Ui-bootstrap-dialog closing

Ui-bootstrap-dialog closing

To close modal window one should call function modal. close(result).

166
How can I combine an HTML5 date input type and an HTML5 time input type with jQuery to form a DateTime type?

How can I combine an HTML5 date input type and an HTML5 time input type with jQuery to form a DateTime type?

I need to insert a list into a Sharepoint 2010 list from jQuery like so:.

189
How to create divs with separate classes in jQuery/JavaScript?

How to create divs with separate classes in jQuery/JavaScript?

I'm trying to make a shooter type game for a school project and I'm running in to trouble creating multiple divs with different classes associated with them. I'm a pretty new programmer so any help would be appreciated.

274