Измените контактную форму 7 введите значение перед отправкой
Я использую контактную форму 7 и Flamingo для создания регистрационной формы консультанта на своем сайте Wordpress. По запросу моего клиента у каждой заявки должен быть регистрационный код (reg_code), который представляет собой комбинацию даты отправки и случайного числа, чтобы сделать ее уникальной.
Поэтому я добавил скрытое поле ввода в свой код CF7 с идентификатором "reg_code". С первой попытки я использовал JS для создания переменной "reg_code" сразу после того, как пользователи посетят мой сайт и установят скрытое поле значение для сгенерированной переменной "reg_code". "reg_code" был успешно сохранен в отправке CF7, но в некоторых случаях, когда пользователь не отправлял форму при первом посещении, но через несколько дней, часть даты в его "reg_code" будет неправильной, потому что этот код был сгенерирован во время его первого посещения и кэширован в браузере.
Чтобы избежать этой проблемы, я решил перенести функцию генерации "reg_code" из JS в PHP, и процедура будет выглядеть следующим образом:
- Отправить нажата кнопка
- Используйте AJAX для вызова функции PHP, которая возвращает reg_code
- Установите скрытое поле "reg_code" в значении CF7 в возвращаемый результат
- Действительно выполните отправку CF7, которая сохранит все поля CF7 во Фламинго
Это мой JS для запуска вызова AJAX перед событием отправки CF7:
$('.wpcf7-form').on('submit', function (e) {
$.ajax({
type: "post",
dataType: "json",
url: js_object.ajax_url,
data: {
action: "custom_reg_code",
},
success: function (response) {
if (response.success) {
$('#reg_code').val(response.data)
}
else {
console.log('Something wrong')
}
},
error: function (jqXHR, textStatus, errorThrown) {
console.log('fail: ' + textStatus, errorThrown);
},
complete: function() {
}
})
})
Мой результат: Это работает только несколько раз. Только некоторые материалы имеют значение "reg_code", некоторые другие имеют пустой "reg_code".
Как я предполагаю, CF7 отправит событие не будет ждать завершения вызова AJAX. Я попытался добавить e.preventDefault() в приведенный выше код, чтобы остановить отправку CF7 по умолчанию, но тогда это не удалось. Я также попробовал список событий CF7 "wpcf7submit", но все равно не повезло.
Наконец, возникает вопрос: есть ли способ приостановить событие отправки CF7 по умолчанию, чтобы изменить значение поля ввода, а затем продолжить процесс отправки?
Большое вам спасибо
2 answers
Вы могли бы избавить себя от проблем с AJAX и сделать это по-другому, поместив скрытое поле в свою форму на PHP.
Способ 1, с помощью плагина
Я обычно использую плагин расширения динамического текста контактной формы 7 в качестве простого способа создания пользовательских тегов CF7, которые все еще нуждаются в небольшом кодировании. Вы также можете пройти дополнительное расстояние и просто закодировать свои собственные теги CF7, но я еще не пробовал этого, но я мог бы отредактировать этот ответ.
С помощью этого плагин на месте вы можете добавить теги в свою форму CF7 следующим образом:
[dynamichidden custom-reg-code “CF7_custom_reg_code”]
И в области электронной почты на странице администратора CF7 вы бы вставили [пользовательский reg-код].
Чтобы заставить его работать, просто создайте соответствующий шорткод для генерации строки:
function generateRandomString($length = 10) {
return substr(str_shuffle(str_repeat($x='0123456789', ceil($length/strlen($x)) )),1,$length);
}
function wpse306816_CF7_custom_reg_code() {
return date("Ymd") . generateRandomString();
}
add_shortcode('CF7_custom_reg_code', 'wpse306816_CF7_custom_reg_code');
Наконечник шляпы для https://stackoverflow.com/a/13212994/6347850 для генерации случайных чисел.
Теперь в вашей форме будет скрытое поле, состоящее из текущей даты и случайного числа, которое вы можете использовать в ваша форма отправлена по электронной почте или сохранена во Фламинго, как и в любом другом поле CF7.
Способ 2, без помощи плагина
И небольшое исследование показало, что еще проще просто написать свой собственный тег CF7 и не возиться с плагином.
Чтобы создать тег CF7 [serial], вы регистрируете его с помощью wpcf7_add_form_tag() на крючке действия wpcf7_init, передавая имя тега и имя функции обратного вызова для его обработки:
add_action( 'wpcf7_init', 'wpse306816_CF7_add_custom_tag' );
function wpse306816_CF7_add_custom_tag() {
wpcf7_add_form_tag(
'serial',
'wpse306816_CF7_handle_custom_tag' );
}
И в вашем случае обратный вызов просто должен вернуться последовательное строковое значение:
function generateRandomString($length = 10) {
return substr(str_shuffle(str_repeat($x='0123456789', ceil($length/strlen($x)) )),1,$length);
}
function wpse306816_CF7_handle_custom_tag( $tag ) {
return date("Ymd") . generateRandomString();
}
Я хотел бы вмешаться здесь, потому что я просто боролся с этой же проблемой - изменением входных данных до того, как CF7 был отправлен через ajax. Я полагаю, что оригинальный плакат пытался выяснить, как это сделать с помощью Javascript, о чем Энди не упомянул в своем ответе. Итак, вот пример того, как это сделать:
var form = document.getElementsByClassName('wpcf7-form')[0];
form.addEventListener('submit', function(evt) {
form.elements['reg_code'].value = 'parsed_code';
}, { capture: true });
Обратите пристальное внимание на последний аргумент в прослушивателе событий - useCapture = true. Этот аргумент по умолчанию является ложным. Мой исходный код, который не работал, проигнорировал этот аргумент. То Отправка CF7 Ajax всегда срабатывала первой, таким образом игнорируя мое событие. Просто изменив значение useCapture на true, ваше событие запускается первым перед отправкой события CF7 Ajax.
Я еще не пробовал, но я предполагаю, что, также используя Проверено 22.04.2019 - не работает.evt.preventDefault(), вы могли бы эффективно запретить отправку формы Ajax CF7, если это необходимо.