How to use PHP mail() and ReCaptcha with Exported Site Forms

If you have a PHP Server with the mail() function enabled, this is a very basic way to handle your exported forms. My goal here was to NOT modify the form code in any way other than than adding “required” form field labels (OPTIONAL) and changing the form action location. It is a simple script that will check recaptcha and it will also email the results. There are even a few checks in place for header injection prevention. Please adjust as needed.

UPDATE
I was informed that the Webflow standard javascript/jquery form validation DOES work on exported sites. It is in the site.js file.

  1. Make sure your Webflow form is designed, styled and validation is setup in Webflow and has the reCaptcha already added. I recommend indicating on the field labels what fields are required, but this is optional. The redirect on failure page WILL NOT display any error codes, but I am sure this could be done with some JS if needed.

  2. Set the form action to “https://yourdomain.com/mail.php

  3. Go into your project settings and add the appropriate Site Key and Secret Key from reCaptcha.

  4. Create a “failed” and “thanks” page. Add some text on the “failed” page like “Something went wrong with the form you attempted to submit and it could not be sent. Please return to the previous page and try again.”

  5. Export your site

  6. Create a “mail.php” file with the following code. Adjust as needed to match your field names. Make sure to modify your $recipient email address and your reCaptcha secret key.

<?php 
if($_SERVER['REQUEST_METHOD'] == 'POST'){

  if (isset($_POST['name'])) $sender_name = preg_replace("([\r\n])", "", $_POST['name']);
  if (isset($_POST['email'])) $sender_email = preg_replace("([\r\n])", "", $_POST['email']);
  if (isset($_POST['phone'])) $sender_phone = preg_replace("([\r\n])", "", $_POST['phone']);
  if (isset($_POST['message'])) $sender_message = preg_replace("([\r\n])", "", $_POST['message']);

  $formcontent="From: $sender_name \n Email: $sender_email \n Phone: $sender_phone \n Message: $sender_message";
  $recipient = "*** YOUR EMAIL ADDRESS ***";
  $subject = "Contact Form";

  $match = "/(bcc:|cc:|content\-type:)/i";
  if (preg_match($match, $sender_name) ||
      preg_match($match, $sender_email) ||
      preg_match($match, $sender_phone) ||
      preg_match($match, $sender_message)) {
    die("Header injection detected.");
  }

  $mailheader = "From: $sender_email \r\n";
  $mailheader .= "Reply-to: $sender_email\r\n";

  $response = $_POST["g-recaptcha-response"];

  $url = 'https://www.google.com/recaptcha/api/siteverify';
  $data = array(
    'secret' => '*** YOUR SECRET KEY HERE ***',
    'response' => $_POST["g-recaptcha-response"]
  );
  $options = array(
    'http' => array (
      'method' => 'POST',
      'content' => http_build_query($data)
    )
  );
  $context  = stream_context_create($options);
  $verify = file_get_contents($url, false, $context);
  $captcha_success=json_decode($verify);

  if ($captcha_success->success==false) {
    header('Location: failed.html');
    exit;
  } else if ($captcha_success->success==true) {
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
    header('Location: thanks.html');
    exit;
  }
} else {
 die("Direct access not allowed!");
}
?>
  1. Upload the files to your hosting server. Make sure the “mail.php” is in your web root folder (should be in same directory as main “index.html” file)

Run a test form and all should be working. The reCaptcha failures should redirect to “failed” page and success submissions should redirect to “thanks” page.

Hope you enjoy. :grinning:

2 Likes

FYI: It’s a good practice to use server side validation of input field contents as well. Relying on
HTML 5 client side checks is helpful but if a client is not using a modern browser, then that is out the window as older browsers fall back to input type text.

So in addition to mail header validation the script should be checking each input for the expected values and potentially replacing more than new lines and returns.

It is usually a better bet to use a library versus the mail() function for this.

It would be beneficial to users if you share the form code.

PS. If you copy code from the web, please share the source for reference.

Webflow validation DOES WORK on exported sites using standard javascript/jquery which is included in your exported site.js file.

Some of this code was borrowed from the following sites and modified:

https://www.kaplankomputing.com/blog/tutorials/recaptcha-php-demo-tutorial/

Hi!

I really appreciate this, @bgarrant . I tried using this on my project but I am getting a “Direct access not allowed” error when submitting the form. Any idea why I’m getting this error? Thank you!

Thank you!

Btw.: I am having issues with his and made a post about it. Maybe someone has an idea?

Hey bgarrant,

I used this script 1 year ago and it worked wonderful until it just stopped working somewhere between June-July 2021. I didn’t make a change to the code or changed any files on the server.

Do you have any idea what could have caused this?
Trying to figure this out for weeks now.

Much thanks.

Hey bgarrant,

I am having some issues using your script/workaround for this export problem. It is somehow working for me but all I am receiving when submitting the contact form is an empty email + spam flagged + an error saying my “from” is missing.

It looks like this:

Which elements do I need to fix in your mail.php file? What about the $sender_email things? Sorry for my bad understanding of coding language :confused:

I would be more than happy to receive some help.

Best Michael