Until now, I was working with Google Recaptcha v2, but now I want to update my WebApp using the lastest version (v3).
Is it possible to anyone add a fully working Google Recaptcha v3 example for a basic form as I can't find any working demos of it?
I'd really appreciate it.
Thank you very much.
PS: I'm using Java Servlets on the server side, but it doesn't matter if you explain using PHP or whatever.
Simple code to implement ReCaptcha v3
The basic JS code
<script src="https://www.google.com/recaptcha/api.js?render=your reCAPTCHA site key here"></script>
<script>
grecaptcha.ready(function() {
// do request for recaptcha token
// response is promise with passed token
grecaptcha.execute('your reCAPTCHA site key here', {action:'validate_captcha'})
.then(function(token) {
// add token value to form
document.getElementById('g-recaptcha-response').value = token;
});
});
</script>
The basic HTML code
<form id="form_id" method="post" action="your_action.php">
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
<input type="hidden" name="action" value="validate_captcha">
.... your fields
</form>
The basic PHP code
if (isset($_POST['g-recaptcha-response'])) {
$captcha = $_POST['g-recaptcha-response'];
} else {
$captcha = false;
}
if (!$captcha) {
//Do something with error
} else {
$secret = 'Your secret key here';
$response = file_get_contents(
"https://www.google.com/recaptcha/api/siteverify?secret=" . $secret . "&response=" . $captcha . "&remoteip=" . $_SERVER['REMOTE_ADDR']
);
// use json_decode to extract json response
$response = json_decode($response);
if ($response->success === false) {
//Do something with error
}
}
//... The Captcha is valid you can continue with the rest of your code
//... Add code to filter access using $response . score
if ($response->success==true && $response->score <= 0.5) {
//Do something to denied access
}
You have to filter access using the value of $response.score. It can takes values from 0.0 to 1.0, where 1.0 means the best user interaction with your site and 0.0 the worst interaction (like a bot). You can see some examples of use in ReCaptcha documentation.
I thought a fully-functioning reCaptcha v3 example demo in PHP, using a Bootstrap 4 form, might be useful to some.
Reference the shown dependencies, swap in your email address and keys (create your own keys here), and the form is ready to test and use. I made code comments to better clarify the logic and also included commented-out console log and print_r lines to quickly enable viewing the validation token and data generated from Google.
The included jQuery function is optional, though it does create a much better user prompt experience in this demo.
PHP file (mail.php):
Add secret key (2 places) and email address where noted.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
# BEGIN Setting reCaptcha v3 validation data
$url = "https://www.google.com/recaptcha/api/siteverify";
$data = [
'secret' => "your-secret-key-here",
'response' => $_POST['token'],
'remoteip' => $_SERVER['REMOTE_ADDR']
];
$options = array(
'http' => array(
'header' => "Content-type: application/x-www-form-urlencoded\r\n",
'method' => 'POST',
'content' => http_build_query($data)
)
);
# Creates and returns stream context with options supplied in options preset
$context = stream_context_create($options);
# file_get_contents() is the preferred way to read the contents of a file into a string
$response = file_get_contents($url, false, $context);
# Takes a JSON encoded string and converts it into a PHP variable
$res = json_decode($response, true);
# END setting reCaptcha v3 validation data
// print_r($response);
# Post form OR output alert and bypass post if false. NOTE: score conditional is optional
# since the successful score default is set at >= 0.5 by Google. Some developers want to
# be able to control score result conditions, so I included that in this example.
if ($res['success'] == true && $res['score'] >= 0.5) {
# Recipient email
$mail_to = "youremail#domain.com";
# Sender form data
$subject = trim($_POST["subject"]);
$name = str_replace(array("\r","\n"),array(" "," ") , strip_tags(trim($_POST["name"])));
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$phone = trim($_POST["phone"]);
$message = trim($_POST["message"]);
if (empty($name) OR !filter_var($email, FILTER_VALIDATE_EMAIL) OR empty($phone) OR empty($subject) OR empty($message)) {
# Set a 400 (bad request) response code and exit
http_response_code(400);
echo '<p class="alert-warning">Please complete the form and try again.</p>';
exit;
}
# Mail content
$content = "Name: $name\n";
$content .= "Email: $email\n\n";
$content .= "Phone: $phone\n";
$content .= "Message:\n$message\n";
# Email headers
$headers = "From: $name <$email>";
# Send the email
$success = mail($mail_to, $subject, $content, $headers);
if ($success) {
# Set a 200 (okay) response code
http_response_code(200);
echo '<p class="alert alert-success">Thank You! Your message has been successfully sent.</p>';
} else {
# Set a 500 (internal server error) response code
http_response_code(500);
echo '<p class="alert alert-warning">Something went wrong, your message could not be sent.</p>';
}
} else {
echo '<div class="alert alert-danger">
Error! The security token has expired or you are a bot.
</div>';
}
} else {
# Not a POST request, set a 403 (forbidden) response code
http_response_code(403);
echo '<p class="alert-warning">There was a problem with your submission, please try again.</p>';
} ?>
HTML <head>
Bootstrap CSS dependency and reCaptcha client-side validation
Place between <head> tags - paste your own site-key where noted.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://www.google.com/recaptcha/api.js?render=your-site-key-here"></script>
HTML <body>
Place between <body> tags.
<!-- contact form demo container -->
<section style="margin: 50px 20px;">
<div style="max-width: 768px; margin: auto;">
<!-- contact form -->
<div class="card">
<h2 class="card-header">Contact Form</h2>
<div class="card-body">
<form class="contact_form" method="post" action="mail.php">
<!-- form fields -->
<div class="row">
<div class="col-md-6 form-group">
<input name="name" type="text" class="form-control" placeholder="Name" required>
</div>
<div class="col-md-6 form-group">
<input name="email" type="email" class="form-control" placeholder="Email" required>
</div>
<div class="col-md-6 form-group">
<input name="phone" type="text" class="form-control" placeholder="Phone" required>
</div>
<div class="col-md-6 form-group">
<input name="subject" type="text" class="form-control" placeholder="Subject" required>
</div>
<div class="col-12 form-group">
<textarea name="message" class="form-control" rows="5" placeholder="Message" required></textarea>
</div>
<!-- form message prompt -->
<div class="row">
<div class="col-12">
<div class="contact_msg" style="display: none">
<p>Your message was sent.</p>
</div>
</div>
</div>
<div class="col-12">
<input type="submit" value="Submit Form" class="btn btn-success" name="post">
</div>
<!-- hidden reCaptcha token input -->
<input type="hidden" id="token" name="token">
</div>
</form>
</div>
</div>
</div>
</section>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('your-site-key-here', {action: 'homepage'}).then(function(token) {
// console.log(token);
document.getElementById("token").value = token;
});
// refresh token every minute to prevent expiration
setInterval(function(){
grecaptcha.execute('your-site-key-here', {action: 'homepage'}).then(function(token) {
console.log( 'refreshed token:', token );
document.getElementById("token").value = token;
});
}, 60000);
});
</script>
<!-- References for the optional jQuery function to enhance end-user prompts -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="form.js"></script>
Optional jQuery function for enhanced UX (form.js):
(function ($) {
'use strict';
var form = $('.contact_form'),
message = $('.contact_msg'),
form_data;
// Success function
function done_func(response) {
message.fadeIn()
message.html(response);
setTimeout(function () {
message.fadeOut();
}, 10000);
form.find('input:not([type="submit"]), textarea').val('');
}
// fail function
function fail_func(data) {
message.fadeIn()
message.html(data.responseText);
setTimeout(function () {
message.fadeOut();
}, 10000);
}
form.submit(function (e) {
e.preventDefault();
form_data = $(this).serialize();
$.ajax({
type: 'POST',
url: form.attr('action'),
data: form_data
})
.done(done_func)
.fail(fail_func);
}); })(jQuery);
I am assuming you have site key and secret in place. Follow this step.
In your HTML file, add the script.
<script src="https://www.google.com/recaptcha/api.js?render=put your site key here"></script>
Also, do use jQuery for easy event handling.
Here is the simple form.
<form id="comment_form" action="form.php" method="post" >
<input type="email" name="email" placeholder="Type your email" size="40"><br><br>
<textarea name="comment" rows="8" cols="39"></textarea><br><br>
<input type="submit" name="submit" value="Post comment"><br><br>
</form>
You need to initialize the Google recaptcha and listen for the ready event. Here is how to do that.
<script>
// when form is submit
$('#comment_form').submit(function() {
// we stoped it
event.preventDefault();
var email = $('#email').val();
var comment = $("#comment").val();
// needs for recaptacha ready
grecaptcha.ready(function() {
// do request for recaptcha token
// response is promise with passed token
grecaptcha.execute('put your site key here', {action: 'create_comment'}).then(function(token) {
// add token to form
$('#comment_form').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
$.post("form.php",{email: email, comment: comment, token: token}, function(result) {
console.log(result);
if(result.success) {
alert('Thanks for posting comment.')
} else {
alert('You are spammer ! Get the #$%K out.')
}
});
});
});
});
</script>
Here is the sample PHP file. You can use Servlet or Node or any backend language in place of it.
<?php
$email;$comment;$captcha;
if(isset($_POST['email'])){
$email=$_POST['email'];
}if(isset($_POST['comment'])){
$comment=$_POST['comment'];
}if(isset($_POST['token'])){
$captcha=$_POST['token'];
}
if(!$captcha){
echo '<h2>Please check the the captcha form.</h2>';
exit;
}
$secretKey = "put your secret key here";
$ip = $_SERVER['REMOTE_ADDR'];
// post request to server
$url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . urlencode($secretKey) . '&response=' . urlencode($captcha);
$response = file_get_contents($url);
$responseKeys = json_decode($response,true);
header('Content-type: application/json');
if($responseKeys["success"]) {
echo json_encode(array('success' => 'true'));
} else {
echo json_encode(array('success' => 'false'));
}
?>
Here is the tutorial link: https://codeforgeek.com/2019/02/google-recaptcha-v3-tutorial/
Hope it helps.
We use recaptcha-V3 only to see site traffic quality, and used it as non blocking. Since recaptcha-V3 doesn't require to show on site and can be used as hidden but you have to show recaptcha privacy etc links (as recommended)
Script Tag in Head
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render='SITE KEY' async defer></script>
Note: "async defer" make sure its non blocking which is our specific requirement
JS Code:
<script>
ReCaptchaCallbackV3 = function() {
grecaptcha.ready(function() {
grecaptcha.execute("SITE KEY").then(function(token) {
$.ajax({
type: "POST",
url: `https://api.${window.appInfo.siteDomain}/v1/recaptcha/score`,
data: {
"token" : token,
},
success: function(data) {
if(data.response.success) {
window.recaptchaScore = data.response.score;
console.log('user score ' + data.response.score)
}
},
error: function() {
console.log('error while getting google recaptcha score!')
}
});
});
});
};
</script>
HTML/Css Code:
there is no html code since our requirement is just to get score and don't want to show recaptcha badge.
Backend - Laravel Code:
Route:
Route::post('/recaptcha/score', 'Api\\ReCaptcha\\RecaptchaScore#index');
Class:
class RecaptchaScore extends Controller
{
public function index(Request $request)
{
$score = null;
$response = (new Client())->request('post', 'https://www.google.com/recaptcha/api/siteverify', [
'form_params' => [
'response' => $request->get('token'),
'secret' => 'SECRET HERE',
],
]);
$score = json_decode($response->getBody()->getContents(), true);
if (!$score['success']) {
Log::warning('Google ReCaptcha Score', [
'class' => __CLASS__,
'message' => json_encode($score['error-codes']),
]);
}
return [
'response' => $score,
];
}
}
we get back score and save in variable which we later user when submit form.
Reference:
https://developers.google.com/recaptcha/docs/v3
https://developers.google.com/recaptcha/
I have seen most of the articles that don't work properly that's why new developers and professional developers get confused about it.
I am explaining to you in a very simple way. In this code, I am generating a google Recaptcha token at the client side at every 3 seconds of time interval because the token is valid for only a few minutes that's why if any user takes time to fill the form then it may be expired.
First I have an index.php file where I am going to write HTML and JavaScript code.
<!DOCTYPE html>
<html>
<head>
<title>Google Recaptcha V3</title>
</head>
<body>
<h1>Google Recaptcha V3</h1>
<form action="recaptcha.php" method="post">
<label>Name</label>
<input type="text" name="name" id="name">
<input type="hidden" name="token" id="token" />
<input type="hidden" name="action" id="action" />
<input type="submit" name="submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?render=put your site key here"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval(function(){
grecaptcha.ready(function() {
grecaptcha.execute('put your site key here', {action: 'application_form'}).then(function(token) {
$('#token').val(token);
$('#action').val('application_form');
});
});
}, 3000);
});
</script>
</body>
</html>
Next, I have created recaptcha.php file to execute it at the server side
<?php
if ($_POST['submit']) {
$name = $_POST['name'];
$token = $_POST['token'];
$action = $_POST['action'];
$curlData = array(
'secret' => 'put your secret key here',
'response' => $token
);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://www.google.com/recaptcha/api/siteverify");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($curlData));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$curlResponse = curl_exec($ch);
$captchaResponse = json_decode($curlResponse, true);
if ($captchaResponse['success'] == '1' && $captchaResponse['action'] == $action && $captchaResponse['score'] >= 0.5 && $captchaResponse['hostname'] == $_SERVER['SERVER_NAME']) {
echo 'Form Submitted Successfully';
} else {
echo 'You are not a human';
}
}
Source of this code. If you would like to know the explanation of this code please visit. Google reCAPTCHA V3 integration in PHP
For a "basic form" (as the original question asks) what's needed is simple if you're content to validate on the server. Here's a complete HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
<!--
function onSubmit() {
var form = document.forms[0];
if ( form['name'].value ) {
form.submit();
} else {
alert( 'Please provide a name.' );
}
}
//-->
</script>
</head>
<body>
<form action="process.asp" method="post">
Name: <input type="text" name="name" /><br /><br />
<button class="g-recaptcha" data-sitekey="SITE_KEY" data-callback='onSubmit' data-action='contact'>Send</button>
</form>
</body>
</html>
And here's the complete page for processing it, using Classic ASP (filename = process.asp) for simplicity:
<%# Language=JavaScript %>
<%
var name = Request( 'name' ).Item;
var recaptchaResponse = Request( 'g-recaptcha-response' ).Item;
var ip = Request.ServerVariables( 'REMOTE_ADDR' );
var xmlhttp = Server.CreateObject( 'MSXML2.ServerXMLHTTP' );
var query = 'secret=SECRET_KEY&response=' + recaptchaResponse + '&remoteip=' + ip;
xmlhttp.open( 'POST', 'https://www.google.com/recaptcha/api/siteverify?' + query, false ); // false says to wait for response
xmlhttp.send();
var response = JSON.parse( xmlhttp.responseText );
Response.Write( name + ' is a ' + (response.success && response.action == 'contact' && response.score > 0.5 ? 'HUMAN' : 'ROBOT') );
%>
A few notes:
You'll supply your own SITE_KEY and SECRET_KEY.
You'll need a JSON parser.
You'll do the server-side POST using a method suitable for your
server.
I added one simple form field validation so you can see how to
integrate that.
You can make the "action" string anything you want, but be sure that
what's on the server is consistent with what's in the HTML.
You might want to respond differently to a response.success that
isn't true or a response.action that doesn't match your action
string, or do other error checking.
You might want a score conditional other than "> 0.5".
This code has no problems with the two-minute timeout.
I process POST on PHP from an angular ajax call. I also like to see the SCORE from google.
This works well for me...
$postData = json_decode(file_get_contents('php://input'), true); //get data sent via post
$captcha = $postData['g-recaptcha-response'];
header('Content-Type: application/json');
if($captcha === ''){
//Do something with error
echo '{ "status" : "bad", "score" : "none"}';
} else {
$secret = 'your-secret-key';
$response = file_get_contents(
"https://www.google.com/recaptcha/api/siteverify?secret=" . $secret . "&response=" . $captcha . "&remoteip=" . $_SERVER['REMOTE_ADDR']
);
// use json_decode to extract json response
$response = json_decode($response);
if ($response->success === false) {
//Do something with error
echo '{ "status" : "bad", "score" : "none"}';
}else if ($response->success==true && $response->score <= 0.5) {
echo '{ "status" : "bad", "score" : "'.$response->score.'"}';
}else {
echo '{ "status" : "ok", "score" : "'.$response->score.'"}';
}
}
On HTML
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
On js
$scope.grabCaptchaV3=function(){
var myCaptcha = angular.element('#g-recaptcha-response').val();
var params = {
method: 'POST',
url: 'api/recaptcha.php',
headers: {
'Content-Type': undefined
},
data: {'g-recaptcha-response' : myCaptcha }
}
$http(params).then(function(result){
console.log(result.data);
}, function(response){
console.log(response.statusText);
});
}
if you are newly implementing recaptcha on your site, I would suggest adding api.js and let google collect behavioral data of your users 1-2 days. It is much fail-safe this way, especially before starting to use score.
Related
I'm working on a WordPress site. Basically, I publish download links (PDFs), and would like to stop web crawlers from accessing this content. This led me to Google's reCAPTCHA. Can I use this alone, so that when a user clicks/answers correctly, the links on the page will be made active? I'm having trouble editing a page in WordPress to do this. Thanks.
-Rudy.
I understand that you want to show link dynamically after the verification of the recaptcha.
You can create a an ajax that fetches the link after the verifcation of recaptcha passes.
To do this, we will use WordPress ajax requests, wp-ajax:
First, you register the ajax handler the request in the server side
add_action( 'wp_ajax_get_hidden_pdf_link', 'search_hidden_pdf_link' );
// add this line to handle requests of non logged in users
add_action( 'wp_ajax_nopriv_get_hidden_pdf_link', 'search_hidden_pdf_link' );
function search_hidden_pdf_link() {
// the response will be ajax response
header('Content-Type: application/json;charset=utf-8');
if(recaptcha_fails()){
// writing the failure response
echo json_encode(array('object' => 'error'));
wp_die();
}
$secret_pdf_link = generate_pdf_link();
// writing the succcess response
echo( json_encode( array('object' => 'success', 'link' => $secret_pdf_link)));
wp_die();
}
and in the front end, you create an ajax form, which asks and displays the link.
PDF Link
<form id="pdf-link-form" action="<?php echo admin_url('wp-ajax.php'); ?>">
<!-- some input that tells the backend which pdf to fetch -->
<input type="hidden" name="public_pdf_id" value="<?php echo $pdf_id; ?>">
<!-- the ajax request identifier, it is the suffix inside the action -->
<input type="hidden" name="action" value="get_hidden_pdf_link">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
</form>
<script>
$(document).ready(function () {
$('#pdf-link-form').submit(function (event) {
event.preventDefault();
form = $(this);
$.ajax({
type: 'POST',
url: form.attr('action'),
data: form.serializeArray()
}).done(function (result) {
if(result.object == 'success'){
$('#hidden-pdf-link').attr('href', result.link);
form.remove();
alert('you can access the pdf')
} else {
alert('you are not allowed to access my pdf!!');
}
})
});
});
</script>
Wordpress Email Form
Hi all
I've been using this sort of email form in a number of sites and it's always worked.
I've tried to use it in a Wordpress site but it won't
Is there any obvious reason why this approach won't work in a Wordpress site.
I need an email form that doesn't reload the contact page as the form is at the bottom.
html
<form action="#" id="contact_form">
<input type="text" id="name" placeholder="Name:">
<input type="text" id="email" placeholder="Email:">
<textarea id="message" rows="8" cols="40" placeholder="Message:"></textarea>
<input type="submit" id="submit"/>
<div id="status">
<p></p>
</div>
</form>
Jquery
$('#submit').click(function(){
//
var nameVal = $('#contact_form #name').val();
var emailVal = $('#contact_form #email').val();
var messageVal = $('#contact_form #message').val();
//
$.post('/contact_form.php', {name: nameVal, email: emailVal, message: messageVal}, function(data){
$("#status p").html(data);
$("#status p").show().fadeOut(3500);
if(data.indexOf('Thank You')==0) {document.forms[0].reset();}
});
})
php
$errors = array();
$required_fields = array('name','email','message');
foreach($required_fields as $fieldname){
if(!isset($_POST[$fieldname]) || empty($_POST[$fieldname])){
$errors[] = $fieldname;
}
}
if(empty($errors)){
$name_field = Trim(stripslashes($_POST['name']));
$name = explode(' ', $name_field);
$firstname = ucfirst($name[0]);
$email_field = Trim(stripslashes($_POST['email']));
$message = Trim(stripslashes($_POST['message']));
//
$to = "info#ttmt.org.uk";
$subject = "Email from Website";
$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";
//
mail($to, $subject, $body);
echo "Thank You $firstname";
}else{
echo "Please complete all.";
}
--- UPDATE ---
I've got part of it working now.
Part of the problem was the jquery couldn't find the php.
I created a 'code' folder inside wp-conntent and put the php there and the jquery looks like this.
$j.post('wp-content/code/contactEngine.php', { theName:nameVal, theEmail:emailVal, theMessage:messageVal }, function(data){
Now I'm getting the returned data form the php file but the email isn't sent.
Will this not work in WP
mail($to, $subject, $body);
You cannot use $_POST['name'] within Wordpress. Using other namings for input fields will fix your issue, eventually you could use the 'Contact Form 7' Wordpress-plugin for a better user experience :-)
I'm making a WordPress theme where every post will have a contact form. The contact form will collect information about the visitor and send a mail to the site administrator. It will also send an email to the visitor with a link to a downloadable PDF (this code is not done yet).
The problem I have is that the php function that handles the ajax form doesn't respond. It only returns a -1 (No Properties). But I get a status code 200 OK.
I'm running the dev server on MAMP Pro OSX and DynDNS.
This is the PHP I have in functions.php
function ajax_contact() {
if(!empty($_POST)) {
$name = $_POST['name'];
$company = $_POST['company'];
$mail = $_POST['mail'];
$admin_mail = get_bloginfo('admin_email');
$error = "";
if(!$name) {
$error .= "Please tell us your name<br/>";
}
if(!$company) {
$error .= "Please tell us your company<br/>";
}
if(!$mail) {
$error .= "Please tell us your E-Mail address<br/>";
}
if(empty($error)) {
$subject = "New download notification";
$message = "You've received a new download notification. \n\n
Name: ".$name."\n
Company: ".$company."\n
Mail: ".$mail."\n";
// Send a mail to the admin with the contact info.
$send_mail = wp_mail($admin_mail, $subject, $message);
// Send mail to visitor with the download link.
if($send_mail) {
echo "sent";
die();
}
} else {
echo "error: " . $error;
die();
}
}
}
add_action('wp_ajax_nopriv_ajax_contact', 'ajax_contact');
add_action('wp_ajax_ajax_contact','ajax_contact');
This is the javascript code
function sendForm(formId, postId, str)
{
console.log("formId: " + formId);
console.log("formId: " + postId);
console.log("str: " + str);
$.ajax({
type: "POST",
url: "../wp-admin/admin-ajax.php",
action: "ajax_contact",
data: str,
success: function(data) {
$("#" + formId).ajaxComplete(function(event, request, settings){
if(data == 'sent') {
$("#" + formId).find(".success").fadeIn("slow");
}
else {
result = data;
$("#" + formId).siblings(".success").html(result);
}
});
}
});
}
And this is the actual form (I have multiple forms on the same page)
<form name="form-<?php the_ID(); ?>" id="form-<?php the_ID(); ?>"/>
Name <br/>
<input type="text" name="name" value=""/><br />
Company / Organisation <br/>
<input type="text" name="company" value=""/><br />
Email <br/>
<input type="text" name="mail" value=""/><br />
<input type="hidden" name="postId" value="<?php the_ID(); ?>">
<input type="submit" value="submit" class="requestbutton" id="requestButton-<?php the_ID(); ?>" rel="<?php the_ID(); ?>"/>
</form>
EDIT: Changed the ajax action name, problem still persists
Your AJAX action: should be contact_form not ajax_contact
I have two files the one which hosts my actual contact form and then a file where i post the form to.
contactform.php (which is part of the footer template)
<form id="contact" action="<?php bloginfo('template_url'); ?>/sendmail.php" method="post">
<label for="name">Your name: *</label>
<input type="text" id="nameinput" name="name" value=""/>
<label for="email">Your email: *</label>
<input type="text" id="emailinput" name="email" value=""/>
<label for="comment">Your message: *</label>
<textarea cols="20" rows="7" id="commentinput" name="comment"> </textarea><br />
</form>
sendmail.php
<?PHP
if(isset($_POST['submit'])) {
error_reporting(E_NOTICE);
function valid_email($str)
{
return ( ! preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*#([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $str)) ? FALSE : TRUE;
}
if($_POST['name']!='' && $_POST['email']!='' && valid_email($_POST['email'])==TRUE && strlen($_POST['comment'])>1)
{
$to = preg_replace("([\r\n])", "", hexstr($_POST['receiver']));
$from = preg_replace("([\r\n])", "", $_POST['email']);
$subject = "Website contact message from ".$_POST['name'];
$message = $_POST['comment'];
$match = "/(bcc:|cc:|content\-type:)/i";
if (preg_match($match, $to) ||
preg_match($match, $from) ||
preg_match($match, $message)) {
die("Header injection detected.");
}
$headers = "From: ".$from."\r\n";
$headers .= "Reply-to: ".$from."\r\n";
if(wp_mail($to, $subject, $message, $headers,'',true))
{
echo 1; //SUCCESS
}
else {
echo 2; //FAILURE - server failure
}
}
else {
echo 3; //FAILURE - not valid email
}
}else{
die("Direct access not allowed!");
}
function hexstr($hexstr) {
$hexstr = str_replace(' ', '', $hexstr);
$hexstr = str_replace('\x', '', $hexstr);
$retstr = pack('H*', $hexstr);
return $retstr;
}
?>
The issue is that this does not know of wp_mail function. I know that I need to include something so wp_mail will be available but what do I add? The function does exist. The issue with including the file that has wp_mail defined is that inside that function it requires some core php functions (wp_mail is being overwritten by cimy_swift plugin)
hi why not try just submitting the form to the base wpurl? then within your header.php file copy and paste your code in?
ie: using a hidden field you can check to see if its been posts, in this case the hidden field is called 'action' and it has a value of 'sendemail'.
form
<form id="contact" action="<?php bloginfo('wpurl'); ?>" method="post">
//form stuff
<input type="hidden" name="action" value="sendemail" />
</form>
Header.php
within the header file we do a call to check and see if the form has been posted,
<html>
<head>
<title><?php wp_title();?></title>
<?php
if( isset($_POST['action']) && ($_POST['action']=='sendemail') ) {
// run your code
}
?>
</head>
if you dont want to go down that route, and wish to use your theme folder to hold the php script then what to is, include the below in your sendmail.php file
define('WP_USE_THEMES', FALSE);
require('../../../wp-blog-header.php');
//above is assuming your file is located in the theme root, not a sub folder.
this will give you access to all the wordpress functions and shortcodes etc..etc..
hope that helps a little..
Marty
I would like to pass information to an iframe via post. (Could be jquery or javascript that executes the post, it doesn't really matter).
The information cannot be sent via querystring as I do not have access to change the way the page brought in by the iframe is.
This data will determine the layout of the content in the iframe so how can I make it so that after the post is sent the iframe is updated? (possibly refresh?)
I wrote a blog post about doing this with jQuery to upload a file using a hidden iframe. Here's the code:
Here is the HTML for the form:
<div id="uploadform">
<form id="theuploadform">
<input type="hidden" id="max" name="MAX_FILE_SIZE" value="5000000" >
<input id="userfile" name="userfile" size="50" type="file">
<input id="formsubmit" type="submit" value="Send File" >
</form>
The DIV in which to allow jQuery to create the iframe you can hide it with a little CSS:
<div id="iframe" style="width:0px height:0px visibility:none">
</div>
The DIV in which to show the results of the callback:
<div id="textarea">
</div>
The jQuery code:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#formsubmit").click(function() {
var userFile = $('form#userfile').val();
var max = $('form#max').val();
var iframe = $( '<iframe name="postframe" id="postframe" class="hidden" src="about:none" />' );
$('div#iframe').append( iframe );
$('#theuploadform').attr( "action", "uploader.php" )
$('#theuploadform').attr( "method", "post" )
$('#theuploadform').attr( "userfile", userFile )
$('#theuploadform').attr( "MAX_FILE_SIZE", max )
$('#theuploadform').attr( "enctype", "multipart/form-data" )
$('#theuploadform').attr( "encoding", "multipart/form-data" )
$('#theuploadform').attr( "target", "postframe" )
$('#theuploadform').submit();
//need to get contents of the iframe
$("#postframe").load(
function(){
iframeContents = $("iframe")[0].contentDocument.body.innerHTML;
$("div#textarea").html(iframeContents);
}
);
return false;
});
});
</script>
I used a php app like this uploader.php to do something with the file:
<?php
$uploaddir = 'uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
$maxfilesize = $_POST[MAX_FILE_SIZE];
if ($maxfilesize > 5000000) {
//Halt!
echo "Upload error: File may be to large.<br/>";
exit();
}else{
// Let it go
}
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
print('File is valid, and was successfully uploaded. ');
} else {
echo "Upload error: File may be to large.<br/>";
}
chmod($uploadfile, 0744);
?>
There's more there than you need, but it illustrates the concept in jQuery.
I don't have the code handy but my team accomplished this purely in Javascript. As I recall it went something like this:
function postToPage() {
var iframe = document.getElementById('myIFrame');
if (iframe) {
var newForm = '<html><head></head><body><form...> <input type="hidden" name="..." value="..." /> </form><script type=\"text/javascript\">document.forms[0].submit();</scrip' + 't></body></html>';
iframe.document.write(newForm); //maybe wrong, find the iframe's document and write to it
}
}