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.
-
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.
-
Set the form
action
to “https://yourdomain.com/mail.php” -
Go into your project settings and add the appropriate Site Key and Secret Key from reCaptcha.
-
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.”
-
Export your site
-
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 reCaptchasecret
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!");
}
?>
- 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.