Создание формы калькулятора с отправкой результатов на электронную почту включает несколько шагов: создание самой формы, написание логики для вычислений и настройка отправки электронных писем. Для такой задачи можно использовать систему управления контентом (CMS) MODX Revolution и ее компоненты, такие как FormIt для создания и обработки форм, а также Custom TV (template variables) для настройки пользовательских полей.
### Создание калькулятора и настройка TV полей в MODX Revo:
1. **Создание пользовательских TV полей:**
- Перейдите в административную панель MODX.
- Откройте "Элементы" (Elements) и выберите "Поля шаблона" (Template Variables).
- Создайте три новых TV: "Поликарбонат", "Длина" и "Монтаж". Для каждого из них выберите подходящий ввод, например, список с выбором или текстовое поле.
- Укажите параметры и цены, сопоставляя их значения в опциях TV.
2. **Создание формы:**
- Добавьте новый ресурс (страницу) для формы калькулятора в MODX или используйте существующий.
- В шаблоне ресурса или в чанке (chunk) создайте форму HTML с полями для "Поликарбоната", "Длины", "Монтажа", "Имени", "Email" и "Телефона".
- Для подключения TV полей используйте теги вывода MODX, например `[[*имяTV]]` для отображения TV на странице в форме.
3. **Обработка формы и логика калькулятора:**
- Используйте компонент FormIt для обработки данных формы. Сконфигурируйте хук для обработки введенных значений и вычисления результатов.
- Напишите JavaScript, чтобы вычислить и показать актуальную и старую цены на основе выбранных параметров в реальном времени перед отправкой формы.
4. **Отправка данных и результата на email:**
- Настройте хук `email` в FormIt для отправки данных формы на указанный email.
- Укажите шаблон письма, включая теги FormIt, для вывода введенных данных и результатов расчетов в теле письма.
### Пример вызова FormIt для формы:
```html
[[!FormIt?
&hooks=`email`
&emailTpl=`EmailChunk`
&emailTo=`[email protected]`
&emailSubject=`Новая заявка с калькулятора`
]]
```
### Пример chunk (EmailChunk):
```html
<p>Имя: [[+fi.name]]</p>
<p>Email: [[+fi.email]]</p>
<p>Телефон: [[+fi.phone]]</p>
<p>Поликарбонат: [[+fi.polycarbonate]]</p>
<p>Длина: [[+fi.length]]</p>
<p>Монтаж: [[+fi.installation]]</p>
<p>Цена: [[+fi.calculated_price]]</p>
```
### JavaScript Пример:
```html
<script>
// Функция для вычисления цен
function calculatePrice() {
// Получить значения из формы
var polycarbonate = document.getElementById('polycarbonate').value;
var length = document.getElementById('length').value;
var installation = document.getElementById('installation').value;
// Логика расчета цены
var price = ...; // расчет актуальной цены
var oldPrice = ...; // расчет старой цены
// Вывести результаты
document.getElementById('cal