Как передать значение из Span в форму Contact Form 7?

Question

[Jimmy Neutron]

Ребят, такой вопрос.
Есть выпадающий список на сайте и под ним кнопка заказать, она открывает модальное окно. Форма сделана на Contact Form 7. Вопрос в том, как мне при отправке формы передать значение из выпадающего списка?
Писать отдельно форму не вариант

Изображение 1

Изображение 2

Код выпадающего списка (если он нужен)

<div class="delivery_block active">
	<div class="delivery_list"><div class="btn"> </div>
		<span class="choose">10 х 15 х 7</span>
		<span class="anymore"><b>все <br> размеры</b></span></div>
	<ul class="cities_list" style="display: block;">
		<li>10 х 15 х 7</li>
		<li>10 х 15 х 8</li>
		<li>10 х 15 х 9</li>
		<li>10 х 15 х 10</li>
		<li>10 х 15 х 7</li>
		<li>10 х 15 х 8</li>
		<li>10 х 15 х 9</li>
		<li>10 х 15 х 10</li>
	</ul>
</div>

Answer 1

[lamer350]

в CF7 вам нужно создать скрытое поле type="hidden"
в js добавить обработчик

$('.cities_list li').on('click', function(){
    var size = $(this).text();
    $('#ID_hidden_input').val(size);
});

Этот вариант вам подойдет если по умолчанию у вас не выбран ни один из размеров и будет: Выберите размер.
Иначе при отправке #ID_hidden_input будет пустым.

Comments

[Jimmy Neutron]

Т.е. оно примерно так должно быть?

spoiler

[lamer350]

Jimmy Neutron, В шаблоне формы не нужно дублировать <input type="hidden">, вы когда добавили [hidden size id:size] - на сайте он как раз и отобразится как <input type="hidden" id="size">

В теле письма только не нужно Что то: input строку добавлять, только строку: Размер: [size], а так же у вас дублируется строка Размер: [your-size] в теле письма, ее тоже нужно убрать.

[Jimmy Neutron]

lamer350, Вот вроде сделал, но не приходит значение.
Кстати да. значение автоматически есть в span. Но хотите сказать, что при выборе другого тоже не будет приходить значение?

[lamer350]

Jimmy Neutron, попробуйте JS закинуть не в Contact from, а просто в подвале где то или в ваш JS файл
Вам нужно смотреть именно теперь работу JS, попробуйте вывести в консоль и смотреть что не так. Можно и со span тянуть, но там будет чуть другой код, можете попробовать так (при условии что у вас CF7 старше версии 4.9):

wpcf7beforesubmit: $('#size').val($('span. choose').text());

Этот код уже нужно добавлять именно в CF7 в доп настройках, куда вы вставили другой js код.

[Jimmy Neutron]

lamer350, Спасибо большое.

Answer 2

[Орхан Гасанлы]

По идее, вы можете при помощи js кода на клиентской стороне передать значение в контактную форму. Повесьте обработчик на кнопку открытия модалки и при клике на нее передавайте выбранное значние в поле.

Comments

[Jimmy Neutron]

А как это можно сделать? Наглядно можете показать? Я с JS не особо то дружу

[Орхан Гасанлы]

Jimmy Neutron, весь прикол в том, что я тоже не дружу с JS))))
по идее... записываете в переменную var то что выбрал пользователь.
после чего при помощи jquery находите ваше input поле и присваиваете этому инпут методом val() зачение этой переменной.