Добавление Google reCAPTCHA к PHP форме

Статья, в которой рассмотрим, как подключить recaptcha к форме обратной связи, работающей по технологии ajax.
Что такое Google reCAPTCHA?
Google reCAPTCHA – это сервис для защиты вашего сайта от ботов и других атак.
Формы обратной связи, комментирования, регистрации, авторизации, оформление заказа довольно часто подвергаются спам атаке. Чтобы их защитить от ботов и злоупотребление можно воспользоваться reCAPTCHA.

Версии Google reCAPTCHA:
- reCAPTCHA v2 – проверка пользователя с нажатием на флажок «Я не робот» («I'm not a robot»), бесплатно до 1 млн проверок в месяц;
- reCAPTCHA v3 – проверка пользователя в фоновом режиме не требующая от него никаких действий (бесплатно до 1 млн запросов в месяц);
- reCAPTCHA Enterprise – предназначена для комплексной защиты всего сайта от мошеннических действий (версия платная, ориентировочная стоимость около 1$ за 1000 запросов).
Подключение reCAPTCHA v2 или v3
Установку Google reCAPTCHA v2 или v3 для проверки форм можно представить в виде следующих шагов:
- получение ключей (site и secret) для сайта;
- вставка виджета и скриптов гугл капчи на HTML страницу;
- передача ответа на сервер;
- получение на сервере результата решения капчи.
Получение ключей reCAPTCHA
Получение ключей для reCAPTCHA v2 или v3 необходимо перейти на страницу «www.google.com/recaptcha/admin».
Для доступа к консоли администратора необходимо иметь аккаунт в Gmail. Если учётной записи нет, то её нужно завести.
После этого необходимо нажать на значок «+».
В открывшейся форме нужно:
- вести название ярлыка (например, Мой сайт);
- выбрать нужный тип reCAPTCHA;
- укажите один или несколько доменов (например, «mysite.ru»);
- принять условия использования reCAPTCHA.
После заполнения всех полей нажать на кнопку «Отправить».
При успешной регистрации Google будут выданы 2 ключа:
- публичный (его нужно вставить в HTML-код);
- секретный (на сервере, для установления обмена данными между сайтом и сервисом reCAPTCHA, т.е. для получения ответа о результатах решения капчи пользователем);

Установка recaptcha на сайт
Подключение reCAPTCHA к сайту (странице) осуществляется как на стороне клиента (в HTML), так на стороне сервера (в PHP).
Разберём, как это осуществляется более подробно. В качестве примере выберем ajax форму обратной связи.
Подключение recaptcha к HTML-документу
Подключение виджета reCAPTCHA к странице осуществляется посредством выполнения 2 действий:
- Включения в страницу JavaScript скрипта recaptcha.
- Добавление элемента
div
с классом"g-recaptcha"
и атрибутомdata-sitekey
, имеющий в качестве значения ваш публичный ключ (public key) капчи.
Кроме этого, добавим на страницу ещё элемент div с идентификатором id="recaptchaError". Данный элемент будем использовать для отображения ошибки, связанной с google racaptcha.
<!-- добавление элемента div --> <div class="g-recaptcha" data-sitekey="6KepjAsTFFFFFFMqccY0ZiGqc3TEd3YVxo8cHsGX"></div> <!-- элемент для вывода ошибок --> <div class="text-danger" id="recaptchaError"></div> <!-- js-скрипт гугл капчи --> <script src='https://www.google.com/recaptcha/api.js'></script>
Кроме этого необходимо будет внести ещё изменения в файл script.js
, т.к. форма обратной связи отправляется на сервер через AJAX.
// Работа с виджетом recaptcha // 1. Получить ответ гугл капчи var captcha = grecaptcha.getResponse(); // 2. Если ответ пустой, то выводим сообщение о том, что пользователь не прошёл тест. // Такую форму не будем отправлять на сервер. if (!captcha.length) { // Выводим сообщение об ошибке $('#recaptchaError').text('* Вы не прошли проверку "Я не робот"'); } else { // получаем элемент, содержащий капчу $('#recaptchaError').text(''); } // 3. Если форма валидна и длина капчи не равно пустой строке, то отправляем форму на сервер (AJAX) if ((formValid) && (captcha.length)) { ... // добавить в formData значение 'g-recaptcha-response'=значение_recaptcha formData.append('g-recaptcha-response', captcha); ... } // 4. Если сервер вернул ответ error, то делаем следующее... // Сбрасываем виджет reCaptcha grecaptcha.reset(); // Если существует свойство msg у объекта $data, то... if ($data.msg) { // вывести её в элемент у которого id=recaptchaError $('#recaptchaError').text($data.msg); }
Интегрирование recaptcha в php скрипт
Установка recaptcha в скрипт php осуществляется посредством внесения в файл process.php
следующих изменений:
- создание переменной
$secret
, содержащей секретный ключ вашего сайта; - подключения клиентской библиотеки reCAPTCHA PHP посредством включения в скрипт файла
autoload.php
; - проверка наличия ключа
g-recaptcha-response
в суперглобальном массиве POST; - если данное имя (
g-recaptcha-response
) есть, то создать экземпляр службы recaptcha, используя ваш секретный ключ; - получить результат проверки кода: если результат положительный, то выполнить необходимые действия (например, отправить информацию на почту).
- если возникла ошибка, то отправить клиенту отрицательный результат.
// ваш секретный ключ $secret = '6NepjAsGBBABBN7_Qy9yfzShcKmc70X2kXQyX1WO'; // однократное включение файла autoload.php (клиентская библиотека reCAPTCHA PHP) require_once (dirname(__FILE__).'/recaptcha/autoload.php'); // если в массиве $_POST существует ключ g-recaptcha-response, то... if (isset($_POST['g-recaptcha-response'])) { // создать экземпляр службы recaptcha, используя секретный ключ $recaptcha = new \ReCaptcha\ReCaptcha($secret); // получить результат проверки кода recaptcha $resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']); // если результат положительный, то... if ($resp->isSuccess()){ // действия, если код captcha прошёл проверку //... } else { // иначе передать ошибку $errors = $resp->getErrorCodes(); $data['error-captcha']=$errors; $data['msg']='Код капчи не прошёл проверку на сервере'; $data['result']='error'; } } else { //ошибка, не существует ассоциативный массив $_POST["send-message"] $data['result']='error'; }
Готовая форма обратной связи с recaptcha
Бесплатно загрузить форму обратной связи с recaptcha можно по следующей ссылке:
Форма обратной связи с recaptcha
Изображения готовой формы, в которую интегрирована recaptcha.



Статьи, связанные с этой темой:
У вас отличная форма, понятная. Но никак не получается настроить отправку через smtp. Пробовал через серверы mail и yandex.
Если указываю smtp.yandex.ru порт 465, то в message.txt запись появляется, а на почну не уходит сообщение. И выводится в форме ошибка: 504 Gateway Time-out при отправке данных.
Если указывать ssl://smtp.yandex.ru порт 465, то на почту сообщение не приходит, и выводится сообщение в форме: «Произошла ошибка при отправке формы на сервер.»
Уточните, пожалуйста, в чем может быть ошибка?
Заранее благодарен!
У себя на сайте в форме регистрации для валидации использую php либу grecaptcha:
На самой странице:
В принципе все отлично работает.
Но, к примеру при регистрации юзера после submit формы рекапча валидировалась, а какое-либо поле (логин, e-mail и т.п.) не прошло валидацию.
Юзер исправляет данные. При этом рекапча уже отмечена решенной.
А при повторном submit формы — получаем ошибку валидации timeout-or-duplicate
Погуглив данную ошибку понял, что API рекапчи не позволяет её верифицировать более одного раза по одному и тому же токену.
Думаю, что для решения проблемы, при получении ошибки либо НЕвалидации какого-либо поля нужно перезапускать рекапчу.
Долго гуглил — как я понял через php это не предусмотрено, а через js — grecaptcha.reset();.
Можете помочь советом, как это «прикрутить»?
В документации есть опция error-callback. Может можно решить задействовав её?
У меня разные формы на странице. При отправке первой формы (идет выше в DOM) все прекрасно. При отправке второй формы grecaptcha.getResponse() не получает код капчи и соответственно дальше скрипт не работает
В ней имеется раздел «Несколько invisible reCAPTCHA на одной странице». Здесь необходимо будет создать что-то подобное.
Заранее благодарен.
Может еще где-то нужно прописать свою почту?
Сайт: new.313news.net — форма в самом низу.
Но, лучше, конечно, это сделать через SMTP. Для этого код, приведённый выше лучше заменить на этот (вместо звёздочек следует установить свои значения):
Вот данные почты, помогите пожалуйста заполнить.
Имя пользователя: fetva@313news.net
Пароль: Используйте пароль почтовой учетной записи.
Сервер входящей почты: cpanel24.v.fozzy.com
IMAP Port: 993 POP3 Port: 995
Исходящий сервер: cpanel24.v.fozzy.com
SMTP Port: 465
IMAP, POP3 и SMTP authentication.
Через минуту в форме появилось сообщение:
А вместо капчи написано: Время проверки истекло…
Приведу код на всякий случай
Non-SSL Settings (NOT Recommended).
Исходящий сервер: mail.313news.net
SMTP Port: 587
Помогите пожалуйста еще в одном деле. Мне нужно добавить в форму и код Селектор.
Вместо поля Имя добавить селектор: Выбрать пол — Мужской, Женский
После поля Текст добавить селектор с выбором сотрудника (на почту отправляется выбранное имя)
Как добавить в форму новое поле подробно описывал в этой статье. Она, конечно, немного отличается от этой, но принцип такой же.
Я посмотрел и попытался сделать. Добавил в индексный файл
а в файл process.php добавил:
перед:
добавил
далее добавил pol тут
и тут
в итоге письмо отправляется, на почту приходит слово Пол, но выбранная опция не приходит.
Я не разбираюсь в php, помогите пожалуйста.
В этой форме ещё нужно добавить код в «script.js»:
Спасибо за инструкцию.
Помогите, пожалуйста.
1. Нет файла process.php Где он может лежать? Или его нужно создать?
2. Файл script.js у меня в шаблоне сайта, это нормально, код капчи будет в нем работать?
Спасибо.
По: script.js Он может лежать где угодно, главное измените путь под комментарием //URL-адрес запроса
Странно, прошерстил toal comannder, process.php нет нигде.
У меня cms joomla, может он имеет другое название?
Скачайте архив и все поймете
Спасибо за труды и форму. Все работает отлично.
Не подскажете как добавить 4 input'a radio в вашу форму? Или хотя бы ссылку на мануал для нубов)
Буду очень благодарен.
Алгоритм для добавления радиокнопок в форму будет следующий.
1. Добавить переключатели в разметку формы (в «index.html»):
2. Включить значение выбранной радиокнопки в FormData (для отправки на сервер). Для этого нужно добавить следующий код в «script.js»:
3. Добавить в «process.php» код для получения значения поля color из POST и включить его значение в данные для отправки на почту:
Ссылка на архив: контактная форма с radio
Но труды я думаю не напрасны, кому то это пригодится
Почему то не отправляются файлы в папку images, ошибку не пишет, просто отправляет сообщение на почту.
Сделал для нескольких типов файлов, как вы писали ниже.
<?php
// открываем сессию
session_start();
// переменная в которую будем сохранять результат работы
$data['result']='error';
// разрешённые типы файлов
$allowedExtension = array(«jpg», «jpeg», «gif», «png», «xls», «xlsx», «zip», «doc», «rar»);
// директория для хранения файлов ()
$pathToFile = $_SERVER['DOCUMENT_ROOT'].'/templates/mysite/feedback/files/';
// максимальный размер файла
$maxSizeFile = 3072000;
// ваш секретный ключ
$secret = '6gfgAAAgM458madp_-Qn9gRPSpmJm';
// функция для проверки длины строки
function validStringLength($string,$min,$max) {
$length = mb_strlen($string,'UTF-8');
if (($length<$min) || ($length>$max)) {
return false;
}
else {
return true;
}
}
// если данные были отправлены методом POST, то…
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$data['result']='success';
//получить имя, которое ввёл пользователь
if (isset($_POST['name'])) {
$name = $_POST['name'];
if (!validStringLength($name,2,30)) {
$data['name']='Поля имя содержит недопустимое количество символов.';
$data['result']='error';
}
} else {
$data['result']='error';
}
//получить email, которое ввёл пользователь
if (isset($_POST['email'])) {
$email = $_POST['email'];
if (!filter_var($email,FILTER_VALIDATE_EMAIL)) {
$data['email']='Поле email введено неправильно';
$data['result']='error';
}
} else {
$data['result']='error';
}
//получить сообщение, которое ввёл пользователь
if (isset($_POST['message'])) {
$message = $_POST['message'];
if (!validStringLength($message,20,500)) {
$data['message']='Поле сообщение содержит недопустимое количество символов.';
$data['result']='error';
}
} else {
$data['result']='error';
}
// если не существует ни одной ошибки, то прододжаем…
if ($data['result']=='success') {
// однократное включение файла autoload.php (клиентская библиотека reCAPTCHA PHP)
require_once (dirname(__FILE__).'/recaptcha/autoload.php');
// если в массиве $_POST существует ключ g-recaptcha-response, то…
if (isset($_POST['g-recaptcha-response'])) {
// создать экземпляр службы recaptcha, используя секретный ключ
$recaptcha = new \ReCaptcha\ReCaptcha($secret);
// получить результат проверки кода recaptcha
$resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
// если результат положительный, то…
if ($resp->isSuccess()){
// действия, если код captcha прошёл проверку
//обработаем файлы, загруженные пользователем посредством элементов с name=«images[]»
// если ассоциатианый массив $_FILES[«images»] существует, то
if(isset($_FILES[«images»])) {
// переберём все файлы (изображения)
$files = array();
foreach ($_FILES[«images»][«error»] as $key => $error) {
// если ошибок не возникло, т.е. файл был успешно загружен на сервер, то…
if ($error == UPLOAD_ERR_OK) {
// имя файла на устройстве пользователя
$nameFile = $_FILES['images']['name'][$key];
// расширение загруженного пользователем файла в нижнем регистре
$extFile = mb_strtolower(pathinfo($nameFile, PATHINFO_EXTENSION));
// размер файла
$sizefile = $_FILES['images']['size'][$key];
//myme-тип файла
$filetype = $_FILES['images']['type'][$key];
// проверить расширение файла, размер файла и mime-тип
if (!in_array($extFile, $allowedExtension)) {
$data['files']='Ошибка при загрузке файлов (неверное расширение).';
$data['result']='error';
} elseif ($sizefile > $maxSizeFile) {
$data['files']='Ошибка при загрузке файлов (размер превышает 3МБ).';
$data['result']='error';
} elseif (!in_array($filetype, $allowedExtension)){
$data['files']='Ошибка при загрузке файлов (неверный тип файла).';
$data['result']='error';
} else {
//ошибок не возникло, продолжаем…
// временное имя, с которым принятый файл был сохранён на сервере
$tmpFile = $_FILES['images']['tmp_name'][$key];
// уникальное имя файла
$newFileName = uniqid('img_', true).'.'.$extFile;
// полное имя файла
$newFullFileName = $pathToFile.$newFileName;
// перемещаем файл в директорию
if (!move_uploaded_file($tmpFile, $newFullFileName)) {
// ошибка при перемещении файла
$data['files']='Ошибка при загрузке файлов.';
$data['result']='error';
} else {
$files[] = $newFullFileName;
}
}
} else {
//ошибка при загрузке файл на сервер
$data['result']='error';
}
}
}
} else {
// иначе передать ошибку
$errors = $resp->getErrorCodes();
$data['error-captcha']=$errors;
$data['msg']='Код капчи не прошёл проверку на сервере';
$data['result']='error';
}
} else {
$data['result']='error';
}
}
} else {
//ошибка, не существует ассоциативный массив $_POST[«send-message»]
$data['result']='error';
}
// дальнейшие действия (ошибок не обнаружено)
if ($data['result']=='success') {
//1. Сохрание формы в файл
$output = "---------------------------------". "\n";
$output .= date(«d-m-Y H:i:s»). "\n";
$output .= «Имя пользователя: ». $name. "\n";
$output .= «Адрес email: ». $email. "\n";
$output .= «Сообщение: ». $message. "\n";
if (isset($files)) {
$output .= «Файлы: ». "\n";
foreach ($files as $value) {
$href = substr($value,strpos($value, '/templates/mysite/feedback/'));
$output .= ''.$href.''. "\n";
}
}
if (file_put_contents(dirname(__FILE__).'/message.txt', $output, FILE_APPEND | LOCK_EX)) {
$data['result']='success';
} else {
$data['result']='error';
}
//2. Отправляем на почту
// включить файл PHPMailerAutoload.php
require_once dirname(__FILE__). '/phpmailer/PHPMailerAutoload.php';
//формируем тело письма
$output = «Дата: ». date(«d-m-Y H:i»). "\n";
$output .= «Имя пользователя: ». $name. "\n";
$output .= «Адрес email: ». $email. "\n";
$output .= «Сообщение: ». "\n". $message. "\n";
if (isset($files)) {
$output .= «Файлы: ». "\n";
foreach ($files as $value) {
$href = substr($value,strpos($value, '/templates/mysite/feedback/'));
$output .= ''.$href.''. "\n";
}
}
// создаём экземпляр класса PHPMailer
$mail = new PHPMailer;
$mail->CharSet = 'UTF-8';
$mail->From = 'as@3u.ru';
$mail->FromName = 'Админ 3u.ru';
$mail->Subject = 'Письмо с сайт 3u.ru';
$mail->Body = $output;
$mail->IsHTML(true);
$mail->AddAddress( 'My@ya.ru' );
// прикрепляем файлы к письму
// отправляем письмо
if ($mail->Send()) {
$data['result']='success';
} else {
$data['result']='error';
}
}
echo json_encode($data);
?>
//после загрузки веб-страницы
$(function () {
// максимальное количество файлов
var countFiles = 5;
// типы разрешённых файлов
var typeFile = [
'jpg',
'jpeg',
'gif',
'png',
'xls',
'xlsx',
'zip',
'doc',
'rar',
];
// максимльный размер
var maxSizeFile = 3072000; //3 МБ
// отображаем на форме максимальное количество файлов
$('#countFiles').text(countFiles);
// при изменения значения элемента «Выбрать файл»
$(document).on('change','input[name=«images[]»]',function(e){
// если выбран файл, то добавить ещё элемент «Выбрать файл»
if ((e.target.files.length>0)&&($(this).next('p').next('input[name=«images[]»]').length==0) && ($('input[name=«images[]»]').length<countFiles)) {
$(this).next('p').after('');
}
// если выбран файл, то…
if (e.target.files.length>0) {
// получить файл
var file = e.target.files[0];
// проверить размер файла
if (($.inArray(file.name.split('.').pop().toLowerCase(),typeFile)>=0) && (file.size<3072000)) {
formData.append('images[]', file, file.name);
}
// проверить тип файла
else if ($.inArray(file.name.split('.').pop().toLowerCase(),typeFile)==-1) {
$(this).next('p').text('* Файл не будет отправлен, т.к. его тип не соответствует разрешённому');
}
else {
// убираем сообщение об ошибке
if ($(this).next('p')) {
$(this).next('p').text('');
}
}
}
else {
// если после изменения файл не выбран, то сообщаем об этом пользователю
$(this).next('p').text('* Файл не будет отправлен, т.к. он не выбран');
}
});
// при отправке формы messageForm на сервер (id=«messageForm»)
$('#messageForm').submit(function (event) {
// отменим стандартное действие браузера
event.preventDefault();
// заведём переменную, которая будет говорить о том валидная форма или нет
var formValid = true;
// перебирём все элементы управления формы (input и textarea)
$('#messageForm input,#messageForm textarea').each(function () {
//найти предков, имеющих класс .form-group (для установления success/error)
var formGroup = $(this).parents('.form-group');
//найти glyphicon (иконка успеха или ошибки)
var glyphicon = formGroup.find('.form-control-feedback');
//валидация данных с помощью HTML5 функции checkValidity
if (this.checkValidity()) {
//добавить к formGroup класс .has-success и удалить .has-error
formGroup.addClass('has-success').removeClass('has-error');
//добавить к glyphicon класс .glyphicon-ok и удалить .glyphicon-remove
glyphicon.addClass('glyphicon-ok').removeClass('glyphicon-remove');
} else {
//добавить к formGroup класс .has-error и удалить .has-success
formGroup.addClass('has-error').removeClass('has-success');
//добавить к glyphicon класс glyphicon-remove и удалить glyphicon-ok
glyphicon.addClass('glyphicon-remove').removeClass('glyphicon-ok');
//если элемент не прошёл проверку, то отметить форму как не валидную
formValid = false;
}
});
//проверяем элемент, содержащий код капчи
//1. Получаем капчу
var captcha = grecaptcha.getResponse();
//2. Если длина кода капчи, которой ввёл пользователь не равно 6,
// то сразу отмечаем капчу как невалидную (без отправки на сервер)
if (!captcha.length) {
// Выводим сообщение об ошибке
$('#recaptchaError').text('* Вы не прошли проверку «Я не робот»');
} else {
// получаем элемент, содержащий капчу
$('#recaptchaError').text('');
}
// если форма валидна и длина капчи не равно пустой строке, то отправляем форму на сервер (AJAX)
if ((formValid) && (captcha.length)) {
// получаем имя, которое ввёл пользователь
var name = $("#name").val();
// получаем email, который ввёл пользователь
var email = $("#email").val();
// получаем сообщение, которое ввёл пользователь
var message = $("#message").val();
// объект, посредством которого будем кодировать форму перед отправкой её на сервер
var formData = new FormData();
// добавить в formData значение 'name'=значение_поля_name
formData.append('name', name);
// добавить в formData значение 'email'=значение_поля_email
formData.append('email', email);
// добавить в formData значение 'message'=значение_поля_message
formData.append('message', message);
// добавить в formData файлы
// получить все элементы с атрибутом name=«images[]»
var images = document.getElementsByName(«images[]»);
// перебрать все элементы images с помощью цикла
for (var i = 0; i < images.length; i++) {
// получить список файлов элемента input с type=«file»
var fileList = images[i].files;
// если элемент не содержит файлов, то перейти к следующей
if (fileList.length > 0) {
// получить первый файл из списка
var file = fileList[0];
// проверить тип файла и размер
if ((file.type.match('image.*')) && (file.size<524288)) {
// добавить его (файл (file) с именем file.name) в formData
formData.append('images[]', file, file.name);
}
}
}
// добавить в formData значение 'g-recaptcha-response'=значение_recaptcha
formData.append('g-recaptcha-response', captcha);
// технология AJAX
$.ajax({
//метод передачи запроса — POST
type: «POST»,
//URL-адрес запроса
url: "/templates/mysite/feedback/process.php",
//передаваемые данные — formData
data: formData,
// не устанавливать тип контента, т.к. используется FormData
contentType: false,
// не обрабатывать данные formData
processData: false,
// отключить кэширование результатов в браузере
cache: false,
//при успешном выполнении запроса
success: function (data) {
// разбираем строку JSON, полученную от сервера
var $data = JSON.parse(data);
// устанавливаем элементу, содержащему текст ошибки, пустую строку
$('#error').text('');
// если сервер вернул ответ success, то значит двнные отправлены
if ($data.result == «success») {
// скрываем форму обратной связи
$('#messageForm').hide();
// удаляем у элемента, имеющего id=msgSubmit, класс hidden
$('#msgSubmit').removeClass('hidden');
} else {
// Если сервер вернул ответ error, то делаем следующее…
$('#error').text('Произошла ошибка при отправке формы на сервер.');
// Сбрасываем виджет reCaptcha
grecaptcha.reset();
// Если существует свойство msg у объекта $data, то…
if ($data.msg) {
// вывести её в элемент у которого id=recaptchaError
$('#msg').text($data.msg);
}
if ($data.files) {
$('#error').html($('#error').text()+'
'+$data.files);
}
}
},
error: function (request) {
$('#error').text('Произошла ошибка ' + request.responseText + ' при отправке данных.');
}
});
}
});
});
Код вставлять не нужно. Просто укажите ссылку на архив этой формы, размещённой на каком-нибудь файлохранилище. Но лучше разместить форму на Github, и предоставить ссылку на этот репозиторий. Тогда будут видны изменения. Форма, представленная в статье расположена на Github по этому адресу.
Подскажите, как сделать темную капчу?
из коробки выдаёт Произошла ошибка при отправке данных.
ошибка 500 в нетворке
сменил версию php на 7
ошибку уже не выдаёт
и при отправке ничего не происходит
1) Не может форма обработать капчу, хотя зареган и прописан открытый и закрытый ключ.
2) У брать капчу не вариант, так как хостинг блочит отправку сообщений без капчи.
Ссылка на код: codepen.io/qasp/pen/MZqOrQ
Вопрос в том чего делать и куда прописать в коде закрытый ключ, так как я уже вставлял в поле объявлений и не помогло?
Спасибо, а то я в скриптах не ахти.
if ($filesize < 10000000) {
mail($to, $subject, $message, $headers);
$output = '';
} else {
$output = '';
}
}
то все нормально, но не отправляет хост без капчи. А с капчей беда беда. Или просто форма вылетает без подтверждений и так или неправильный код, или еще чего хуже стопорится. Вся пробле в том что не могу капчу вклинить правильно.
<?php include «init.php»; ?>
<?php
if(trim($_GET['mode'])=='ajax'){
header('Content-Type: application/json; charset=utf-8');
if(trim($_POST['action'])==htmlspecialchars(trim($_GET['controller']))){
$result=array();
$result['errors']=array();
if(trim($_POST['email'])==''){
$result['errors']['email']=l('register_error_email_empty');
} elseif(!preg_match("/^([-a-zA-Z0-9._]+@[-a-zA-Z0-9.]+(\.[-a-zA-Z0-9]+)+)*$/", trim($_POST['email']))){
$result['errors']['email']=l('register_error_email_invalid');
} elseif(mysql_num_rows(mysql_query(«SELECT * FROM `users` WHERE `email`='»._F($_POST['email'])."';"))){
$result['errors']['email']=l('register_error_email_exists');
}
if(trim($_POST['password'])==''){
$result['errors']['password']=l('register_error_password_empty');
} elseif(mb_strlen(trim($_POST['password']))<6){
$result['errors']['password']=l('register_error_password_short');
}
if(trim($_POST['cpassword'])==''){
$result['errors']['cpassword']=l('register_error_cpassword_empty');
} elseif(mb_strlen(trim($_POST['password']))>=6 && trim($_POST['cpassword'])!=trim($_POST['password'])){
$result['errors']['cpassword']=l('register_error_cpassword_not_equals');
}
if(!isset($_POST['agree'])){
$result['errors']['agree']=l('register_error_agree_off');
}
if(count($result['errors'])==0){
$code=md5(uniqid('').$time);
$create=mysql_query(«INSERT INTO `users` SET `email`='»._F($_POST['email'])."', `register_code`='".$code."', `register_password`='".md5(trim($_POST['password']))."', `time`='".$time."', `active`='0';");
$mail=mysql_fetch_assoc(mysql_query(«SELECT * FROM `mail_templates` WHERE `code`='register';»));
$to=trim($_POST['email']);
$mail['title']=$mail['title_'.$config['lang']];
$mail['body']=$mail['body_'.$config['lang']];
$mail['body']=str_replace('[SITE_NAME]', $config['sitename'], $mail['body']);
$mail['body']=str_replace('[SITE_URL]', $config['siteurl'], $mail['body']);
$mail['body']=str_replace('[ACTIVATION_CODE]', $code, $mail['body']);
liam($to, $mail['title'], $mail['body'], «noreply@».$config['siteurl']);
$result['status']='success';
} else {
$result['status']='error';
}
echo json_encode($result);
}
exit;
}
?>
<?php
$pagetitle=l('register_title')." • ".$config['sitename'];
$pagedesc=$config['description'];
?>
<?php
if($m){ include «m-register.php»; exit; }
?>
<?php include «includes/header.php»; ?>
<?php echo l('register_title'); ?>
<?php echo l('register_type_email'); ?>
<?php echo l('register_type_password'); ?>
<?php echo l('register_retype_password'); ?>
<?php echo l('register_agree'); ?>
<?php echo l('register_submit'); ?>
<?php echo l('register_already_registered'); ?>
<?php echo l('register_features'); ?>
<?php echo l('register_feature_1'); ?>
<?php echo l('register_feature_2'); ?>
<?php echo l('register_feature_3'); ?>
<?php echo l('register_features_end'); ?>
<?php include «includes/footer.php»; ?>
[/PHP]
Тестирую форму на локальном сервере (денвер)
Проверки срабатывают, но при нажатии на кнопку «Отправить» ничего не происходит.
— проверьте, ввели ли вы ключи (публичный и секретный) в нужные места формы;
— посмотрите, есть ли ошибки в ответе, который пришёл от сервера после обработки формы.
В Денвере установлена email заглушка, поэтому почтовые сообщения не отправляются. Они просто складываются в некоторую папку.
— Ругается на 68 строку в Post.php return file_get_contents(self::SITE_VERIFY_URL, false, $context);
— Да, складывает письма в tmp папку.
Единственное что не умеют большинство хостеров — это подписывать письма с помощью DKIM. Без этой подписи письма будут попадать большинству пользователей в спам. Если это так, то может и есть смысл настроить почту для домена, например, через Яндекс.
В чем может быть проблема? Возможно, это связано с тем, что у Гугла сейчас новая версия рекапчи (V2)?
-вид формы авторизации в админку: itchief.ru/assets/uploadify/4/2/b/42b1f14fa230ca225581f8c64d76f0e2.jpeg
-файл login.php выглядит так:
-файл adm_head.php выглядит так (если он нужен):
а после авторизации на страницу сайт/admin
PS я не программист, своими силами смог вставить только код рекапчи в форму авторизации, прошу подкорректировать мои данные для нормальной работы.
Посмотрите, какой ответ вам возвращает сервер (вкладка Network -> process.php -> Response). После этого будет понятно, что у вас работает не так.
Ещё раз спасибо за форму и уделённое время!
Хорошие формы!
Но столкнулся с проблемой:
Установил эту форму yadi.sk/d/jrEy-35W3LDYk4, после отправки формы пишет «Ошибка! Форму не удалось отправить.» и поля не очищаются, хотя письмо отправителю и мне приходит. В консоли гугла ошибок нет. Как починить, куда копать?
Заранее благодарен!
столкнулся с проблемой не показывает алерт после отправки. Причем даже на форме которую скачал без изменений. В чем может быть проблема?
проблема была банальной
на сервере не было объявлено «date_default_timezone_set»
Интересует вопрос о персональных данных.
В капче они, но они относятся только к Google и нужен дополнительно чекбокс? Или ссылки в капче по сути тоже самое?
Надеюсь понятен вопрос, заранее благодарю за ответ.
yadi.sk/i/KP3HRWEZ3LDQCp
столкнулся с проблемой в форме. при заполнение поле E-mail вот таким адресом test@test поле проходит валидацию показывает галочку. Но пишет ошибка при отправке письма.
Не могу понять
за проверку отвечает след код.
//получить email, которое ввёл пользователь
if (isset($_POST['email'])) {
$email = $_POST['email'];
if (!filter_var($email,FILTER_VALIDATE_EMAIL)) {
$data['email']='Invalid email.';
$data['result']='error';
}
} else {
$data['result']='error';
}
а также по какой то причине не показывает не показывает подпись об ошибке у поля.
Добавил проект на Github: github.com/itchief/feedback-form-with-recaptcha-2
Ссылка на архив: yadi.sk/d/jrEy-35W3LDYk4
Тестируйте…
Знаю что подобное делали с другой вашей формой, но как я понял они разные — формы, технология применения модального окна такая же?
Посмотрю, как это можно сделать. Когда получится, напишу.
- на Гитхабе: feedback-form-in-modal-with-recaptcha-2
- на Яндекс Диске: feedback-form-in-modal-with-recaptcha-2
Если вы хотите одну форму использовать на нескольких страницах, то её можно поместить в отдельный файл, а затем на необходимых страницах проекта подключить этот файл с помощью php функции include. В этом случае — если потребуется изменить форму, то это нужно будет сделать всего в одном файле.Если же вы не хотите это делать на сервере или увеличивать размер HTML файла, то можете поместить форму обратной связи опять же в отдельный файл, а затем подгружать её на страницу с помощью AJAX (например, посредством jQuery функции get или load).
В файле script.js заменил:
В файле process.php заменил:
При прикрепление файлов соответствующих расширений все норм, но при попытке отправить вылезает сообщение о ошибке
«Произошла ошибка при отправке формы на сервер.»
«Код капчи не прошёл проверку на сервере»
1. Публичного в строчке:
2. Секретного:
Ключи еще раз проверил, указаны правильно.
Но думаю, дело не в ключах, так как если не прикреплять файл, то отправка идет без ошибок.
Я использую форму с рекапчей во всплывающем окне. Может быть в этой форме есть какие-то другие нюансы?
Получается в форме нужна галочка с заголовком-ссылкой "Я принимаю условия" если перейдет по ссылке то открывается окно шаблона текста о политике конфиденциальности.
Александр, добры день. Что-то подобное делали в своих формах?
1. Необходимо в форму добавить checkbox:
2. Добавить в JS следующий код:
Форма, для отправки которой необходимо принять условия (поставить галочку): yadi.sk/d/cFNZXx0H3Keumj
3. Добавить к кнопке отправить Спасибо!
Прекрасная капча, прекрасно работает! Спасибо Александру!
Одно напрягает: после постановки галочки приходится еще разгадывать ребусы на 2-3 картинках, появляющихся одна за другой. Не хочется напрягать пользователя.
Видел на многих сайтах эту же капчу без всяких картинок, одна галочка и вперед! Настроение не портится. Может, кто-то подскажет как запретить появление этих картинок?
Александр, подскажите как в этом модуле подключить автоматический ответ «клиенту на его указанные email» письмом с шаблонам типа «Спасибо за заказ с сайта… и наши контакты для связи».
Может конечно, где-то уже это реализовано у вас.
Было бы вообще здорово видеть такую фишку! с меня $
За ранее спасибо!
Это действие осуществляется очень просто. Необходимо после отправки одного письма, вставить отправку ещё одного (клиенту).
Я так понимаю это правится только process.php
Постскриптум: Я вставил код и протестил, то мне на почту с сайта пришло 2 письма одинаковых, а клиенту ничего.
Привожу кусок нижнего когда с process.php Ваш код куда вставить надо?
Полный пример:
Было бы неплохо видеть небольшой шаблон в формате html со стандартной отправкой.
Чтобы использовать email шаблон, его нужно создать (например: yadi.sk/d/POIcqpXz3KA4LN). В необходимые места шаблона положить плейсхолдеры (%email.title%, %email.nameuser%, %email.message%), которые при формировании письма будут заменены значениями с формы.
Формирование письма и его отправку в файле process.php можно осуществить так:
Но после заполнения всех полей формы ничего не происходит, кроме появления двух зеленых галочек в полях имя и емэйл, сообщение на емэйл так же не приходит :( Видимо, в «готовой капче» нужно доделывать что-то еще.
У меня стоит довольно примитивная форма на сайте, который сделал в свое время ( elenaturkka.ru/ord.php ), вторую неделю пытаюсь прикрутить к ней гугловскую рекапчу, прочел больше десятка статей с советами, как все это надо делать, пытался выполнять рекомендации, но так и не смог. Капча красивенько стоит, но свою функцию не выполняет. Трудно быть не программистом. Если не ответите, продолжу поиски…
подскажите пожалуйста, как прикрутить к данной форме progress-bar от bootstrap на время загрузки файлов на сервер?
Для этого необходимо:
1. В HTML форму добавить progress-bar (например, перед кнопкой submit):
2. В файл script.js добавить дополнительный код в ajax функцию, а именно параметр xhr.
Можно также дополнительно добавить параметр beforeSend, который будет во время отправки формы на сервер, изменять состояние кнопки submit на не активное, а также отображать индикатор загрузки (по умолчанию скрыт). После прохождения ответа (параметр success) добавить также дополнительно ещё 2 строчки, выполняющие обратное действие (возвращающее эти элементы в первоначальное состояние).
В process.php добавил следующее
$allowedExtension = array(«jpg» => «image/jpg», «jpeg» => «image/jpeg», «gif» => «image/gif», «png» => «image/png», «doc» => «doc», «docx» => «docx», «pdf» => «pdf»); // разрешённые типы файлов
Есть парочка вопросов
1. Нужно ли в этом коде перед doc, dox, pdf указывать «image/...»?
2. Что нужно вставить в script.js, чтоб заработали doc, dox, pdf
Огромное спасибо!
В текущей версии неважно, что указывать в качестве значения ключа, т.к. сравнение идёт именно по ключу.
Т.е. можно так:
Ответ на второй вопрос можешь посмотреть в этом комментарии: itchief.ru/lessons/php/how-to-install-recaptcha-on-website#comment-3861
В нём описано, как это сделать не только для js, но и для php.
Все получилось, работает.
1. Подскажите как прикрутить кнопку «ответить» когда приходит письмо на почту?
2. И как установить email отправителя, который он указывает при отправке, сейчас по умолчанию email@mysite.ru в коде.
Спасибо!
Формируйте тело письма для отправки в формате HTML:
Добавить кнопку ответить можно так:
Email отправителя устанавливается посредством изменения следующей строчки:
сделал форму под наши требования, после отправки она не скрывается, поля очищаются и можно отправить форму снова, только капча остается не обновленная, стоит галочка
На 120 строчке замените $files[] = $newFullFileName; на
Вот как выглядит измененй код
// проверить расширение файла, размер файла и mime-тип
if (!in_array($extFile, $allowedExtension)) {
$data['files']='Ошибка при загрузке файлов (неверное расширение).';
$data['result']='error';
} elseif ($sizefile > $maxSizeFile) {
$data['files']='Ошибка при загрузке файлов (размер превышает 3МБ).';
$data['result']='error';
} else {
//ошибок не возникло, продолжаем…
// временное имя, с которым принятый файл был сохранён на сервере
$tmpFile = $_FILES['images']['tmp_name'][$key];
$files[] = $tmpFile;
}
} else {
//ошибка при загрузке файл на сервер
$data['result']='error';
}
Можно оставить всё как было, и просто добавить код для удаления файлов на сервере после отправки письма:
А код удаления ставить после 121 строки?
Нет в самом конце после 195 строчки (когда письмо уже отправлено).
Гугл снова нас всех порадовал и сделал Invisible reCAPTCHA Сайт
В свете этого вопрос, а как заменить reCAPTCHA на Invisible reCAPTCHA?
Представлены инструкции как это сделать для форм, работающих по AJAX, так и без неё. А также шаги по подключению нескольких invisible reCAPTCHA к одной странице.
На данное письмо отвечать не нужно.';
добавить html-код страницы красиво оформленного e-mail? Я вставляю код, но при отправке с сайта письма скрипт показывает ошибку и письмо не отправляет?
Удобнее будет не сразу присваивать длинную строку $mail->Body, а собрать её из кусочков, как это сделано в process.php.
У меня ошибка: Код капчи не прошёл проверку на сервере
Огромное спасибо за отличную форму и Вашу отзывчивость на наши приставания с вопросами.
Вопрос в следующем. Если не ставить галку «Я не Робот» (некоторые неискушенные пользователи интернета почему-то не обращают внимания на эту Гугловскую recaptchу) форма не отправляется (вообще ничего не происходит) и сообщения «Вы не прошли проверку „Я не Робот“ не появляется (многие на этом прекращают попытки и пишут на почту „Ваша форма не работает“).
Все перепроверял и сравнивал с исходниками неоднократно.
В чем может быть проблема.
И еще вопрос. Можно ли сделать так, что бы сообщениям присваивался номер (типа „Заказ#0001“, Заказ#0002» и т.д)?
Добавьте в форму следующий элемент:
Сообщения, например, можно сохранять в базу и получать номер заказа уже от туда.
Но, если нужно очень просто, то можно сделать так.
Создать дополнительный текстовый файл, например, orders.txt.
В файле process.php написать небольшой скрипт, например перед отправкой формы на почту:
В форме немного изменяем сообщение:
А также сценарий JavaScript:
Огромное спасибо. Все просто отлично. Фомой доволен выше крыши.
Но есть одно но. С некоторых устройств форма не отправляется.
Выяснить удалось через Вебвизор Яндекс-Метрики.
Форма заполняется, по движению мыши видно, что ставят галочку recaptchу, «заказать» и все, дальше ничего не происходит, видно, что тыкают мышкой во все подряд, и тишина.
К сожалению, посредством Вебвизора не выяснить, какие сообщения об ошибках при этом высвечиваются на ихнем мониторе.
Встречается на разных устройствах, но больше всего с windows 10, браузеры и chrom и firefox.
В чем может быть причина.
С одним человеком удалось связаться по телефону. Попросил его посмотреть код в chrom-е. Сказал, что высвечивает json. больше добиться от неё ничего не удалось.
Но на подавляющем большинстве устройств (компы, планшеты, смартфоны) форма работает отлично — присваивается номер заказа, отправляется копия письма на почту, прикрепляются файлы.
В чем может быть причина?
Другая ситуация — может быть связана с тем, что пользователь использует старую версию файла скрипта (если у вас настроено кэширование, например в конфигурационном файле .htaaccess). Т.е. пользователь открыл страницу с формой обратной связи, при открытии страницы файлы, в том числе и script.js, попали в кэш. Потом вы его обновили на сервере, но при открытии страницы браузер пользователя не будет загружать новую версию файла, а будет использовать сохранённую (старую) версию. Может быть причина в этом. В этом случае можно переименовать файл script.js, например в script-v1.1.js и подключить его к странице.
Можно ли сделать подсказку типа «У Вас отключен „Javascript“. Корректная работа формы невозможна».
Хотя, как это сделать, если этот Javascript отключен?
Например, его можно расположить перед формой обратной связи:
Да, если вам дополнительные стили bootstrap.min.css не нужны, то можете их удалить. Они необходимы только для оформления формы и на её работоспособность никак не влияют. При необходимости данный файл вообще можно убрать и оформить форму с помощью своих стилей.
Наиболее просто убрать из файла bootstrap.min.css лишнее, можно на странице getbootstrap.com/customize/. Поставьте галочки только на нужных компонентах (например, Grid system, Form, Button) и получите файл bootstrap.min.css состоящий только из этих классов.
В итоге должно получиться следующее: yadi.sk/d/BUSIKJTi3BeR5k
Я в строку добавил еще 'mp4'. И в строку — тоже.
В файле script.js необходимо изменить следующие строки:
В файле process.php:
Для того, чтобы в письме файлы приходили в виде ссылок необходимо выполнить следующее:
1. Удалить из файла process.php следующий код:
2. Добавить в то место где формируем тело письма этот код:
Видимо, потому что письмо не HTML. Тогда как сделать, чтобы ссылка приходила готовая:
Если письмо не отправляется, то значит, происходит какая-то ошибка на сервере. Для начала попробуйте проверить поддерживает ли хостинг вообще отправку писем. Или то, что вы используете… Также посмотрите, какой вообще AJAX ответ приходит с сервера на ваш запрос. Для этого можно воспользоваться вкладкой Network в панели разработчика браузера.
Существуют ли какие-либо «подводные камни» при установке recaptcha взамен ранее использовавшейся? Попытались решить вопрос с заменой капчи «наскоком» получили форму, которая отправляет сообщение независимо от результата обработки recaptcha.
Подозреваю, что нам надо правильно разместить и прописать у себя файлы process.php и autoload.php. Возможно что-то еще.
Заранее спасибо.
С уважением,
Дмитрий
Наверно что-то не так настроили. reCaptcha — это надёжная капча и проблем с обработкой её результатов не должно быть.
Подскажите пожалуйста, скачал вашу форму обратной связи с reCaptcha и установил на Denwere, все вроде хорошо, но при отправке сообщения вываливается ошибка VM34651:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0(…)success @ script.js:143i @ jquery-1.12.4.min.js:2fireWith @ jquery-1.12.4.min.js:2y @ jquery-1.12.4.min.js:4c @ jquery-1.12.4.min.js:4
Ругается вот на это: var $data = JSON.parse(data);
Код не менял, подскажите пожалуйста что сделать? Возможно это Denwer глючит?
Такая ошибка говорит о том, что в процессе выполнения файла process.php возникает какая-то ошибка. Это приводит к тому, что не выполняется эта строчка:
Т.е. мы не получаем ответ в формате json.
А JavaScript пытается разобрать то, что не является json. Поэтому он и «ругается» на эту строчку (var $data = JSON.parse(data)).
Вам необходимо посмотреть, какая возникает ошибка. Это можно, например, увидеть во вкладке Network панели разработчика браузера.
Надо пробовать на реальном сайте. В Denwer форма может не работать.
Вот, что говорит хром:
Request URL:http://1.u0154129.z8.ru/process.php
Status Code:500 Internal Server Error
Изображения:
itchief.ru/assets/uploadify/8/0/b/80b191b7ec82fb0d35c41f76bb41aec7.jpg
itchief.ru/assets/uploadify/3/e/2/3e2b558993f30b3a495a57ec5bd08497.jpg
itchief.ru/assets/uploadify/1/7/8/178ab8ba94b39c8842c0353a32a5de18.jpg
В php я «валенок». Если окажите помощь, буду вам очень благодарен.
Есть к Вам просьба, добавить несколько полей для заполнения в форму. Пробовал сделать сам, но не получилось, (выдает ошибку отправки формы на сервер)
Если Вам не сложно помогите пожалуйста, нужны следующие поля: Имя, маил, №тел, Название организации, Тема, сообщение.
Зарание спасибо.
1. Открыть файл script.js, найти в нём строчку
и добавить перед ней необходимые поля в объект formData следующим образом:
'имя_поля' — это некоторое имя, которое затем на сервере можно будет получить так:
2. В файле process.php добавить переданные значения в тело письма (но при этом необходимо проверить, есть ли в массиве $_POST указанное имя):
По кнопкам Заказа звонка и Запроса замеров вроде отрабатывает, по 4м кнопкам хочу, письмо отправляется, форма не прячется, сообщения о отправке не выдается в консоль выводится:
true
1209
Uncaught SyntaxError: Unexpected token < in JSON at position 1(…)
Ошибка синтаксиса ссылается на строку var $data = JSON.parse(data); файла formcheck.js
Попробуйте проанализировать ответ, который приходит с сервера на вкладке браузера Network в панели разработчика. Может вы используете на стороне сервера некоторые поля, которые не указали в форме или что-то другое. Попробуйте проверить каждую форму по отдельности на предмет ошибок.
Warning: session_start(): Cannot send session cookie — headers already sent by (output started at… /process.php:1) in… /process.php on line 3
Warning: session_start(): Cannot send session cache limiter — headers already sent (output started at… /process.php:1) in… /process.php on line 3
{«result»:«success»}
Но для меня это птичий язык...(
Как оказалось файл process.php начинался с: " <?php", — (/пробел/<?php)
В жизни не подумал бы, что из-за этого…
Но странно ведет себя форма запроса звонка, непредсказуемо через раз, через два отправляется, когда не отправляется жалуется на то, что серверу пришло пустое поле name:
{result: «error», name: «Поле имя не должно быть пустым.»}
name
:
«Поле имя не должно быть пустым.»
result
:
«error»
Я в файле php проверку длины поменял на проверку непустое:
//получить имя, которое ввёл пользователь
if (isset($_POST['name'])) {
$name = $_POST['name'];
if (empty($name)) {
$data['name']='Поле имя не должно быть пустым.';
$data['result']='error';
}
} else {
$data['result']='error';
}
в js ничего не менялось.
Поле:
input type=«text» class=«form-control» id=«name» name=«name» required=«required» value="" placeholder=«Алексей Сергеевич Петров» minlength=«4» style=«border: 1px solid rgba(153, 153, 255, 0.5);width:100%;»
Где может быть засада?
причем на остальных формах с полем name я поступил точно также и они работают
То есть мысль ясна: получить ответ от сервера, если все хорошо; очистить поля формы; форму (модальное окно) закрыть, всплывающее уведомление показать.
А вот как это сделать?
Подключил bootstrap-notify в локалке на тестовых страничках — работает как надо,
Когда подключаю его к сайту на joomla происходит следующее:
1. bootstrap-notify требует для работы bootstrap.js (он же нужен, чтобы модальное окно программно закрывать по .modal('hide'))
2. после подключения bootstrap.js к живому joomla сайту модальные окна сами закрываются едва открывшись.
в чем может быть проблема?
1. Скачать и подключить к странице плагин jGrowl:
2. Изменить параметры success и error метода jQuery ajax:
Готовый пример можно получить по ссылке: yadi.sk/d/IS2h3L4IyPK8w
Пытаюсь на сайт прикрутить 3 модальных окна с формами и с рекапчта, запутался совсем-совсем, из них отрабатывает только одна, при чем странно не выдает сообщение о успешной отправке сообщения.
Можете помочь, — посмотреть, Может свяжемся по электронной почте.
А вот почему две другие формы не отправляются не понимаю… (
Где-то накосячил в js и php обрабтчиках
Ссылка на zip архив
форма обратного звонка — отрабатывает
Остальные две — затыкаются после нажатия на кнопку отправки
Комментарий на эту тему:
itchief.ru/lessons/php/how-to-install-recaptcha-on-website#comment-2852
Ответ с виджета, если их несколько, необходимо получать по его идентификатору.
Если виджеты, например, имеют идентификаторы recaptcha1 и recaptcha2, то и отправлять их ответ на сервер необходимо по id:
В локале работает. буду пробовать на живом.
Допустим все 6 скриптов проверки и обработки (3js+3php) мы положили в корень сайта.
Подключая их на страницах src формируем через «location.origin + '/formcheck.js';».
Это работает, пути в src тегов script прописываются.
В этих js скриптах проверки форм, пытаюсь проделать тот-же фокус с путем к php, например:
…
// Формируем путь к скрипту
var ofcURLPHP = CurrentDomain + "/process.php";
// технология AJAX
$.ajax({
//метод передачи запроса — POST
type: «POST»,
//URL-адрес запроса
url: ofcURLPHP,
//передаваемые данные — formData
data: formData,
…
И вот тут похоже, что в url: не пишется путь до скрипта, по нажатию на кнопку отправки формы, форма не отправляется и модальное окно закрывается.
Можно как-то это вылечить?
(Смысл задачи в том, чтобы на внутренних страницах сайта, имеющих, например путь site.ru/product/okno/okna.html не прописывать руками пути к скриптам обработчикам, не множить их в подпапках).
Все работает, только 1 форма начала вести себя, как во вчерашнем вопросе (не отсылается по нажатию кнопки)…
После исправлений по вчерашней вашей рекомендации все работало.
И в принципе в js только добавилось определение адреса, где php лежит.
Cсылка на архив
Форма про типовые.
При сбросе reCaptcha также необходимо указывать идентификатор:
true
953.
Но самое странное не это.
Форма, которая по кнопкам «Хочу» заработала просто сама по-себе, но заболела форма про «перезвоните мне»
Проставил идентификаторы.
Та форма, что по кнопкам «Хочу» — работать перестала, за-то вылечилась форма запроса звонка.
Волшебство какое-то.
Александр, может мы сможем это поправить возможно не безвозмездно.
У меня такой вопрос, возможно ли уведомлять юзера, что файл был принят/загружен, а то ошибки выдаются типа: (Файл не будет загружен, размер больше 512Кбайт), а по успеху тишина.
Буду оч благодарен за помощь. Сам я 2-а по кушу в этом = )
PS Форма у меня с обычной каптчей взятая тут: itchief.ru/lessons/php/feedback-form-for-website
Поздно увидел с каптчей от гугла… переделывать не охота = )
Тут нет ничего сложно.
Необходимо открыть файл script.js и изменить внутреннее содержимое блока
на следующее:
Есть такой index.php:
Задача следующая: экшн ведет на go.php (например), при клике по кнопке без каптчи должна появиться ошибка-напоминание, что без каптчи никто никуда не пойдет? или просто переход не должен произойти.
Если каптча разгадана, то тогда осуществляется переход на go.php.
При переходе по прямому адресу site.ru/go.php вход не должен произойти, если можно сделать что-то типа переадресации на страницу с каптчей, в случае попытки захода на go.php минуя каптчу.
Все, что находил в сети, не подходит… Переделать — не хватает знаний.
Если Вам не сложно, и если эта задача действительно не сложная, то не могли бы помочь?
Т.е заходим на index.php и там каптча, после ввода каптчи в этом же index.php открывается уже содержание страницы, а каптча исчезает.
Видел на одном сайте такое. Скорее всего это будет проще сделать, чем первый вариант. И этот вариант даже будет лучше.
И там тоже нажатие кнопки без каптчи не дает никакой результат, только после ввода каптчи появляется соджержимое страницы. А каптча исчезает.
И пока находимся на этой странице — каптчи нет. При новом заходе на страницу каптча снова есть.
Помогите решить задачу, а то уже перерыл весь гугл, и наш и зарубежный — нет таких вариантов, даже близко.
Нужно сделать без поля ввода текста и чтобы после ввода каптчи она исчезала и появлялось основное содержание страницы
Вместо ваш_секретный_код и ваш_site_код вставить соответствующие ключи Google reCaptcha.
1 файл (например, index.html):
2 файл (например, go.php). Он будет проверять код reCaptcha. В случае ошибки, переправлять его (пользователя) на страницу, содержащую капчу гугл. В случае успеха, отображать содержимое этой формы.
feex.ru/test/index2.php — это Ваш первый код
Теперь всё работает. Спасибо)
Добавили на форму HTML:
HTML:
И написали простановку значений для этих двух полей.
JavaScript:
Оно вроде бы все замечательно. берет текущее время, проставляет его в поле с началом, прибавляет к текущему времени 1 час, проставляет его в поле с концом, все замечательно, тут вопросов нет, но, допустим пользователь зашел на сайт после 18:00, когда рабочий день закончен, и почту никто не прочитает сегодня, вот тут и заковырка, как сделать так, чтобы если пользователь заказывает звонок после окончания рабочего дня, но до 23:59, то ему надо сказать, что позвонят ему только завтра и начало и конец выставить, соответственно 8:00 и 22:00.
Если пользователь — полуночник и запрашивает звонок в период между 00:00 и 7:59 то начало и конец — также выставить на 8:00 и 22:00.
Если запрашивает с 8:00 до 18:00 — то по принципу, как сейчас.
Как это можно реализовать?
HTML:
JavaScript:
Все отлично, протестировал, работает как надо.
Вопрос, а как сделать так, чтобы этот скрипт срабатывал не при загрузке страницы, а при открытии модального окна с формой?
Вскрылся баг. Safari не обращает никакого внимания на установленные скриптом значения, а именно не отображает value установленное скриптом, и не обращает внимания на то, что скрипт устанавливал значения min/
Может есть способы побороть?
И Хром на Андроиде тоже подкосячивает, он вроде-как все значения атрибутов устанавливает, но установленное скриптом значение value не отображает (надообязательно тыкнуться в поле и «подтвердить»).
Работа с value в JavaScript осуществляется как свойством:
Добавление своих пользовательских атрибутов осуществляется с помощью data-. Т.е. data-min и data-max.
С показом value, кстати не помогло через document.getElementById они устанавливаются, но не отображаются в полях (iphone + Safari и Android + Chrome).
По поводу min и max — так вроде это не пользовательские атрибуты они вроде в спецификации HTML5 есть. и они отрабатываются в текущем виде на Android + Chrome, а вот Safari на iPhone их игнорит.
Когда вы устанавливаете значение value, обращаться к нему необходимо как к свойству, а не как к атрибуту:
Такие атрибуты в HTML5 есть, но вот их поддержка осуществляется только несколькими браузерами (Edge, Chrome, Opera и Android 4.4+). _http://caniuse.com/#search=date
По поводу min и max — ccылку посмотрел, правильно ли я понимаю, что эти ограничения выставить не получится для Safari на iOS или есть какой-то обходной путь?
Почему-то внезапно перестал отрабатывать скрипт (и соответственно отображать форму). Выдает ошибку Uncaught ReferenceError: аTomorrowСall is not defined.
Не подскажете в чем может быть проблема?
(из изменений были только: поправлены стили кнопки, которая вызывает модельное окно, и само модальное окно перенесено непосредственно под тэг body)
И в локале, где точно ничего не менялось и никуда не двигалось — произошло тоже самое.
Если убираем «обертку» То все работает, никаких ошибок не возникает.
Если да, то все стает еще интереснее. Исчезает ошибка, но если вызов окна происходит после 17:00 (конец рабочего дня), то никакие значения полям не выставляются, тоже не отрабатывает.
Дело было в путях к jQuery.
Столкнулся с такой проблемой.
Если на странице 1 модальное окно с формой, — то все отлично.
Если же на странице больше 1 модального окна с формами то Рекапча отображается только в самом первом, в остальных не отображается.
Можно-ли это как-то побороть?
А также в файле .htaccess:
Еще такой вопрос: можно сделать так, чтоб была показана загрузка или хотя бы стрелка мышки в песочные часы переключалась. т.к. не понятно нажал «отправить» или нет?
Одна полностью будет повторять тот функционал, который у вас есть. А на второй будут только два поля: имя и номер телефона.
P.s. Сразу не понял, почему у меня не работает отправка, когда разместил обе формы. Просто проверка полей в первой проходит, а во второй они пустые. Поэтому отправки нет(((
Следовательно, необходимо сделать 2 таких обработчика. Один для одной формы, другой для другой.
Далее сделать 2 файла для обработки формы на стороне сервера (например, process.php и process2.php). Или использовать один php-файл, но тогда необходимо проверять с какой формы пришёл ответ, и обрабатывать уже именно её.
Кроме этого, если Вы собираетесь использовать в каждой форме Google reCaptcha, то проделать ещё следующее:
1. Каждому блоку reCaptcha дать идетификатор:
2. Использовать скрипт для отрисовки 2 гугловских капч
3. Проверять капчу на сервере.
Код для рекапчи вставил, спасибо, обе показываются.
В script.js скопировал обработчик, который вы написали. Опять же сменил всего лишь messageForm на messageForm1. Но вторая форма ничего не делает при нажатии на «Отправить сообщение». Первая работает.
Александр, если Вас не затруднит, напишите пожалуйста правильный script.js для моего случая. Формы одинаковые. Заранее спасибо.
Спасибо за Ваш труд!
Подскажите, пожалуйста, почему так происходит. Добавляю изображения к сообщению в форме. Они сохраняются в папку files на сервере, но не приходят в письме. Куда нужно смотреть?
Заранее спасибо.
на следующий:
Все работает :)
подскажите, пожалуйста, что надо изменить в форме, чтоб поля для файлов показывались не по мере добавления файлов, а все сразу?
В файл index.html после строчек:
добавьте ещё 4 точно таких же:
Немного офтопа) Можешь подсказать хорошую литературу, чтобы с нуля изучить php. Хочу такие же вещи как ты вытворять в modx)
В меню не хватает иконки для php)
Лучи добра)
Наверное навязчив и назойлив, но хочется больше «красоты», можно-ли как-то сделать так, чтобы див с рекапчей появлялся только тогда, когда все поля формы заполнены.
1. Добавить класс hidden к капчи и сообщению:
2. Добавить в script.js после загрузки страницы такой код:
Принцип здесь простой. Проверяем каждый элемент после его изменения и записываем результаты в объект result. После этого проверяем количество ключей в объекте. Если их количество равно 5, то проверяем все ли они прошли валидацию. Если да, то отображаем гугл капчу.
HTML и JavaScript код формы обратной связи
Александр, подскажите, где что нужно поправить в коде js и php если нам не надо отправлять файлы, но есть еще два поля, например с телефоном и адресом сайта пользователя. Если содержимое формы выглядит так.
HTML:
Скачать по ссылке: форму обратной связи с телефоном для сайта.
Кстати в Вас в HTML шаблоне 2 опечатки в атрибуте for.