Streaming live at 10am (PST)

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


#1

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:


Need Help with PHP Script
#2

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.


#6

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: