Как добавить кнопку "add +" для поля в contact forms 7 в elementor?

Пользователь

от jaylen.trantow , в категории: PHP , год назад

Как добавить кнопку "add +" для поля в contact forms 7 в elementor?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от greyson , год назад

@jaylen.trantow 

Для добавления кнопки "add +" для поля в Contact Form 7 в Elementor, вам понадобится использовать дополнительный плагин Elementor Contact Form DB. Этот плагин позволяет расширить функциональность Contact Form 7 и добавить дополнительные опции.


Вот как это сделать:

  1. Установите и активируйте плагин Elementor Contact Form DB на вашем сайте.
  2. Отредактируйте страницу с помощью Elementor.
  3. Добавьте виджет Contact Form 7 на страницу с помощью стандартного виджета Elementor.
  4. Настройте форму, добавив необходимые поля и настройки.
  5. Добавьте поле "Text" в форму Contact Form 7, где вы хотите иметь кнопку "add +". Назовите это поле как "field_name[]". Например, если вы хотите добавить поле "Имя", назовите его "user_name[]".
  6. Сохраните форму и закройте редактор формы.
  7. В редакторе страниц Elementor выберите виджет Contact Form 7, который вы только что создали.
  8. В настройках виджета найдите опцию "Additional Settings" (Дополнительные настройки) и добавьте следующий код: on_sent_ok: "addAnotherInput();" Этот код вызовет функцию "addAnotherInput()", в которой будет происходить добавление нового поля при отправке формы.
  9. Добавьте следующий JavaScript-код в свой тематический файл или в плагин для работы с пользовательскими скриптами: function addAnotherInput() { var inputField = jQuery('.wpcf7-form .wpcf7-text:last').clone(); jQuery('.wpcf7-form').find('.wpcf7-form-control:last').after(inputField); } Эта функция копирует последнее поле "Text" в форме и добавляет его после всех полей "Text" в форме.
  10. Сохраните файл JavaScript и обновите страницу с формой.


Теперь, при отправке формы, будет добавляться новое поле "Text" с текущим содержимым поля. Вы можете настроить стиль и расположение нового поля с помощью стилей CSS.

Пользователь

от ella , 5 месяцев назад

@jaylen.trantow 

Также можно использовать следующий код JavaScript для добавления кнопки "add +" для поля в Contact Form 7 в Elementor:

  1. Добавьте поле "Text" в форму Contact Form 7, где вы хотите иметь кнопку "add +". Назовите это поле как "field_name[]" (например, "user_name[]").
  2. В редакторе страниц Elementor выберите виджет Contact Form 7, который вы только что создали.
  3. В настройках виджета найдите опцию "Additional Settings" (Дополнительные настройки) и добавьте следующий код:
1
on_sent_ok: "addAnotherInput();"


  1. Добавьте следующий JavaScript-код в свой тематический файл или в плагин для работы с пользовательскими скриптами:
1
2
3
4
5
6
7
8
9
function addAnotherInput() {
    var inputField = document.createElement('input');
    inputField.setAttribute('type', 'text');
    inputField.setAttribute('name', 'field_name[]');
    inputField.setAttribute('placeholder', 'New field');
    
    var form = document.getElementsByClassName('wpcf7-form')[0];
    form.appendChild(inputField);
}


Этот JavaScript-код создаст новое текстовое поле при каждой отправке формы. Вы можете настроить это поле (например, добавить id или класс) и применить стили CSS, чтобы показать его в нужном месте и стиле на вашей форме Contact Form 7.