85 lines
3.5 KiB
JavaScript
85 lines
3.5 KiB
JavaScript
// Файл feedback.js – кнопка обратной связи и форма отправки заявки
|
||
(function() {
|
||
// Создаём плавающую кнопку
|
||
const btn = document.createElement('button');
|
||
btn.textContent = '✉️ Обратная связь';
|
||
btn.className = 'feedback-btn';
|
||
document.body.appendChild(btn);
|
||
|
||
// Создаём модальное окно (изначально скрыто)
|
||
const modal = document.createElement('div');
|
||
modal.className = 'feedback-modal';
|
||
modal.style.display = 'none';
|
||
modal.innerHTML = `
|
||
<div class="feedback-modal-content">
|
||
<span class="feedback-close">×</span>
|
||
<h3>Оставить заявку</h3>
|
||
<form id="feedback-form">
|
||
<label>Фамилия <input type="text" name="lastname" placeholder="Иванов"></label>
|
||
<label>Имя <input type="text" name="firstname" placeholder="Иван"></label>
|
||
<label>Отчество <input type="text" name="middlename" placeholder="Иванович"></label>
|
||
<label>ИНН компании <span class="required">*</span> <input type="text" name="inn" required></label>
|
||
<label>Номер телефона <span class="required">*</span> <input type="tel" name="phone" required></label>
|
||
<label>Email <input type="email" name="email" placeholder="mail@example.com"></label>
|
||
<label>Запрос <textarea name="message" rows="4" placeholder="Опишите вашу задачу..."></textarea></label>
|
||
<button type="submit">Отправить заявку</button>
|
||
</form>
|
||
</div>
|
||
`;
|
||
document.body.appendChild(modal);
|
||
|
||
// Элементы управления
|
||
const closeSpan = modal.querySelector('.feedback-close');
|
||
const form = document.getElementById('feedback-form');
|
||
|
||
// Открытие модального окна
|
||
btn.onclick = () => {
|
||
modal.style.display = 'flex';
|
||
};
|
||
|
||
// Закрытие
|
||
closeSpan.onclick = () => {
|
||
modal.style.display = 'none';
|
||
};
|
||
window.onclick = (e) => {
|
||
if (e.target === modal) modal.style.display = 'none';
|
||
};
|
||
|
||
// Отправка формы
|
||
form.onsubmit = async (e) => {
|
||
e.preventDefault();
|
||
const formData = new FormData(form);
|
||
const data = {
|
||
lastname: formData.get('lastname') || '',
|
||
firstname: formData.get('firstname') || '',
|
||
middlename: formData.get('middlename') || '',
|
||
inn: formData.get('inn'),
|
||
phone: formData.get('phone'),
|
||
email: formData.get('email') || '',
|
||
message: formData.get('message') || '',
|
||
date: new Date().toISOString()
|
||
};
|
||
// Проверка обязательных полей
|
||
if (!data.inn || !data.phone) {
|
||
alert('Пожалуйста, заполните ИНН компании и номер телефона.');
|
||
return;
|
||
}
|
||
try {
|
||
const response = await fetch('/api/request', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data)
|
||
});
|
||
if (response.ok) {
|
||
alert('Спасибо! Ваша заявка принята. Мы свяжемся с вами в ближайшее рабочее время.');
|
||
form.reset();
|
||
modal.style.display = 'none';
|
||
} else {
|
||
const err = await response.json();
|
||
alert('Ошибка: ' + (err.error || 'не удалось отправить заявку'));
|
||
}
|
||
} catch (err) {
|
||
alert('Ошибка соединения. Попробуйте позже.');
|
||
}
|
||
};
|
||
})(); |