Как сделать одну почтовую форму для 7-ми услуг?

Question

[Andrej Sharapov]

Здравствуйте! Нужен совет и помощь js/php-мастера.
На странице 7 услуг, для каждой из которых нужно создать собственную форму заказа.

Вариант такой: создать 7 форм на странице, у каждой добавить инпут

<input type="hidden" name="formData" value="заголовок для формы">

который будет содержать собственный заголовок.

в php выводим:

if (isset($_POST['formData'])) {$formData = $_POST['formData'];}
...
...
$subject = "$formData";
$message = "$formData\n\nОткуда: $email \n\nОтправитель: $name \n\nТелефон: $phone \n\nСообщение: $message";

Итог: На страничке 7 карточек, под каждой кнопка вызова модального окошка с формой. Фактически, сейчас 7 кнопок = 7 окошек = 7 форм. По сути, все формы отличаются только скрытым заголовком, который выводится в письме.
Вариант не ахти конечно, поскольку код превращается в огромную портянку...

Вопрос - как сделать проще? Желательно создать одну форму, общую для всех и, чтобы при клике по каждой из (семи) кнопок, менялся бы заголовок в поле отправки. Подскажите, реально ли это и как реализовать?

Comments

[alex]

вы уже ответили на свой вопрос в последнем абзаце

Answer 1

[I'm Yoda]

Как хотя бы это на странице должно выглядеть?

Comments

[Andrej Sharapov]

на страничке 7 карточек, под каждой кнопка вызова модального окошка с формой. Фактически, сейчас 7 кнопок = 7 окошек = 7 форм

[WapSter]

Andrej Sharapov, ты написал, что фронтенд разработчик, и не можешь сделать одну форму, тем более при вызове ее клинком по кнопке, чтобы изменялось значение у поля? Серьезно?

[Andrej Sharapov]

Тимур Турсунбаев, да) утренний тупильник. Тут еще проблема в том, что каждое всплывающее окно содержит помимо формы еще и уникальный текст. Поэтому просто подменить заголовок при клике не получится. Нужна более сложная логика, типа подгрузка самой формы, в окошко, по клику... Окошки разные должны быть.

[WapSter]

Andrej Sharapov, но форма (upd: структура) то не уникальная? Точно также подменяй и текст, если его нет в карточке самый простой вариант прописать его в дата атрибуте, и копировать от туда.

[Andrej Sharapov]

Тимур Турсунбаев, попробую, спасибо за мысль.

[I'm Yoda]

1. У формы делаешь скрытые инпуты с пустым значением:
<input type="hidden" name="form_title" value=""/>

2. У каждой карточки добавляешь data атрибуты:

<div class="card" data-title="Я заголовок карточки и т.д."></div>

3. При клике на карточку открывается модалка с формой куда в скрытое поле подставляется текст из атрибута data-title.

Модалка может быть одна, не надо их плодить.

Answer 2

[Denis Minimal]

Я бы создал какой-нибудь дата-атрибут у кнопки с помощью которой мы будем вызывать модальное окно, в котором будет храниться наш заголовок, например, data-card="Карточка 1" data-card="Карточка 2".
Вот вариант на Jquery

$('.button[data-card]').click(function () {
     let title = $(this).attr('data-card'); //Достаем значение дата атрибута
     $('.form .title').html(title); //Вставляем его в нам заголовок формы
     $('input[name=formData]').val(title); //Также вставляем значение дата атрибута в скрытый инпут, для передачи в обработчик формы
      //И только потом должно происходить открытие модального окна
});

Comments

[Andrej Sharapov]

да, мы с оратором выше к этому и пришли, но тогда получается, что это же событие должно добавлять форму во всплывающее окно?

[Denis Minimal]

Andrej Sharapov, какую библиотеку для модальных окон используете?
У вас же по клику на кнопку открывается модальное окно внутри которого форма. Верно?

[Andrej Sharapov]

Денис Середа, jquery, окно классическое на bootstrap. да

Пока начал прикручивать кнопки

<button type="button" data-toggle="modal" data-target="#modal04" data-action="заголовок">Подробнее</button>

и по идее в каждое окно должна подставляться форма в футер (т.е. под уникальный текст)

<div class="modal-body">
...
здесь уникальный текст
...
</div>
<div class="modal-footer d-flex flex-column">
...
сюда грузится форма с заранее измененным заголовком
...
</div>

[Denis Minimal]

В Bootstrap 4 есть уже готовое решение для такого случая. https://getbootstrap.com/docs/4.3/components/modal/ пролистай вниз и почитай.

[Andrej Sharapov]

Денис Середа, не совсем подходит. Для каждого окна надо такой код писать.

По-моему проще будет создать одно окно с встроенной формой и туда грузить уникальные тексты + менять заголовки/инпут по клику. Но это тоже бред, там текста на полтора экрана...

[Andrej Sharapov]

Денис Середа, сделал одну форму с выбором заголовка письма)

[Denis Minimal]

Andrej Sharapov, Только собрался тебе объяснить как бутстрапом все сделать) там весь сок в js коде и дата атрибуте data-whatever)

[Andrej Sharapov]

Денис Середа, да это я видел, пытался прикрутить и в один момент понял, что такой вариант не подходит) В итоге вынес форму из модалок, добавил селекторов и вывожу их значение .text() в .val() инпута как заголовок.