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

Последнее обновление Ноя 29, 2024

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

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

И так что имеем в итоге, ниже вы увидите тело самой формы 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