Contact Form 7: разные значения value и текста в выпадающем списке select
Кто-нибудь знает, как я могу установить разные значения в опциях выпадающего списка в плагине Contact Form 7? Вот пример HTML, который я хотел бы сгенерировать:
<select>
<option value="1">Моя машина</option>
<option value="2">Ваша машина</option>
</select>

Похоже, что Contact Form 7 поддерживает это нативно, просто не совсем очевидно, как это реализовать.
Вот страница документации, объясняющая функциональность: http://contactform7.com/selectable-recipient-with-pipes/
По сути, все, что вам нужно сделать, это указать значения в таком формате:
"Видимое значение|фактическое-значение-для-формы"
То, что идет до символа |
, будет отображаться в форме, а то, что после — будет фактическим значением, передаваемым в форме.
Надеюсь, это поможет!

@SolomonClosson На самом деле это всё ещё работает; просто выглядит странно. HTML формы не показывает 'сырое' значение, но, как указано в конце ссылки, вы можете получить к ним доступ с помощью префикса _raw_
, например _raw_ВАШЕПОЛЕ
вместо ВАШЕПОЛЕ
.

Это будет работать только на стороне сервера. Согласно документации, это сделано для предотвращения передачи значений клиенту в браузере, поэтому если вы хотите получить доступ к значению опции с помощью JavaScript (val() в jQuery) вместо текста опции (text() в jQuery), то воспользуйтесь решением Demilio.

как это сделать, если я использую атрибут "data" для заполнения select?

Пример реализации можно посмотреть здесь.

Это работает, но не так, как ожидал автор вопроса. Автор ожидает решение, в котором элемент <select>
в браузере содержит как видимый текст, так и скрытое значение, и при отправке формы на сервер будет отправляться скрытое значение. Однако в CF7 при использовании символа pipe фактически создается только видимое значение в элементе <select>
, но когда видимый текст отправляется с формой, CF7 заменяет его на скрытое значение перед генерацией email или сохранением записи.

Я решил эту проблему, сначала опубликовав стандартную форму Contact Form 7, затем скопировал исходный код, созданный из всех шорткодов Contact Form 7. После этого вместо использования шорткода в качестве тега <select>
, я использовал реальный тег <select>
с тегами <option>
внутри. Таким образом, я смог использовать движок Contact Form 7 и одновременно установить свои собственные значения и текст в тегах <option>
...
