«
»
Contact Form 7WordPressПлагины

Contact Form 7 – Как скрыть кнопку отправки формы если поля не заполнены

В данной записи речь пойдет о том как можно скрыть кнопку отправки формы до того момента пока пользователь не ввел в поля определенное количество строк, конечно же никто не мешает переписать мое решение под себя и ужесточить правила отображения кнопки отправки.

Решение которое я предлагаю в записи возникло благодаря заказчику которому нужно было именно реализовать на сайте скрытие кнопки отправки. В итоге получилось решение предлагаемое мной в данной записи.

И так что имеем в итоге, ниже вы увидите тело самой формы Contact Form 7.

Тело Contact Form 7:

[text text-776 id:bim-name class:bim-name placeholder "Name"] [email email-498 id:bim-email class:bim-email placeholder "E-Mail-Adresse"] [textarea textarea-697 id:bim-message class:bim-message placeholder "Nachricht"] <style> .g-recaptcha > div { width: 100% !important; } .g-recaptcha iframe { width: 100% !important; } div#GoogleReCapchaFullWidth { width: 100% !important; /* position: relative; */ padding-bottom:6px; } </style> <div class="g-recaptcha" style="transform:scale(0.88);-webkit-transform:scale(0.88);transform-origin:0 0;-webkit-transform-origin:0 0;"> [recaptcha id:GoogleReCapchaFullWidth] </div> [submit id:bim-button class:bim-button "Senden"]

Скрипт для скрытия кнопки:

jQuery( document ).ready(function( $ ) { // Скрываем кнопку через jQuery // $('input#bim-button').css('display','none'); // Захватываем и наблюдаем ввод в инпуты формы $('#bim-name,input#bim-email,#bim-message').keyup(function(event) { //Переменная содержащая инпут "Имя" var name = $('#bim-name').val(); //Переменная содержащая инпут "Email" var email = $('input#bim-email').val(); //Переменная содержащая инпут "TextArea" var textarea = $('#bim-message').val(); //Функция (если имя содержит больше 4 и Email Содержит больше 6 и TextArea содержит больше 20 символов то if(name.length > 4 && email.length > 6 && textarea.length > 20) { // Отобразить кнопку отправки формы $('input#bim-button').css('display','block'); //Иначе } else { //Продолжаем скрывать кнопку отправки $('input#bim-button').css('display','none'); } }); });

Если Вы внимательно изучите JAVA SCRIPT код у Вас не должно оставаться вопросов, так как практически над каждой строкой кода имеются комментарии объясняющие что за чем.

Полезные ссылки:
http://gnatkovsky.com.ua/poka-polya-ne-zapolneny-knopka-ne-aktivna.html

Почтовая навигация

Источник записи: https://mediadoma.com

Связанные записи
WordPressПлагины

Полный обзор лучших плагинов для календаря бронирования в WordPress

ElementorWordPressВсе для разработки плагиновПлагины

Создание пользовательских виджетов Elementor - правильный путь! | Бен Маршалл

WordPressПлагины

Swift Performance - Рекомендуемые настройки производительности | Полное руководство 2020

WordPressВсе для разработки плагиновВсе для разработки шаблонов

Настройка PHP CodeSniffer в PhpStorm с помощью стандартов кодирования WordPress | Келлен Мейс