<style>
.custom-form {
max-width: 500px;
margin: 0 auto;
font-family: Arial, sans-serif;
}
.form-input {
width: 100%;
padding: 18px 20px;
margin-bottom: 20px;
border-radius: 30px;
border: none;
background: #ffffff;
color: #666;
font-size: 16px;
box-sizing: border-box;
}
.form-input::placeholder {
color: #999;
}
.contact-methods {
margin-bottom: 20px;
color: #666;
}
.contact-methods label {
margin-right: 20px;
cursor: pointer;
}
.submit-btn {
width: 100%;
padding: 18px;
border-radius: 40px;
border: none;
background: #7E2226;
color: #ffffff;
font-size: 18px;
cursor: pointer;
transition: 0.3s;
}
.submit-btn:hover {
opacity: 0.9;
}
.error-message {
color: #7E2226;
margin-bottom: 15px;
display: none;
}
</style>
<div class="custom-form">
<input type="text" id="name" class="form-input" placeholder="Ваше имя" required>
<input type="tel" id="phone" class="form-input" placeholder="+995 (___) ___-___" required>
<div class="contact-methods">
<p>Удобный способ связи:</p>
<label><input type="radio" name="contact" value="Телефон"> Телефон</label>
<label><input type="radio" name="contact" value="WhatsApp"> WhatsApp</label>
<label><input type="radio" name="contact" value="Telegram"> Telegram</label>
</div>
<div class="error-message" id="error">Заполните все данные</div>
<button class="submit-btn" onclick="sendForm()">Оставить заявку</button>
</div>
<script>
async function sendForm() {
const name = document.getElementById('name').value.trim();
const phone = document.getElementById('phone').value.trim();
const contactMethod = document.querySelector('input[name="contact"]:checked');
const errorBlock = document.getElementById('error');
if (!name || !phone || !contactMethod) {
errorBlock.style.display = "block";
return;
}
errorBlock.style.display = "none";
const data = [
{
name: "Заявка с сайта",
_embedded: {
contacts: [
{
name: name,
custom_fields_values: [
{
field_code: "PHONE",
values: [{ value: phone }]
}
]
}
]
},
custom_fields_values: [
{
field_name: "Способ связи",
values: [{ value: contactMethod.value }]
}
]
}
];
try {
const response = await fetch("https://YOURDOMAIN.amocrm.ru/api/v4/leads/complex", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer YOUR_ACCESS_TOKEN"
},
body: JSON.stringify(data)
});
if (response.ok) {
alert("Заявка отправлена!");
document.getElementById('name').value = '';
document.getElementById('phone').value = '';
document.querySelectorAll('input[name="contact"]').forEach(el => el.checked = false);
} else {
alert("Ошибка отправки");
}
} catch (error) {
alert("Ошибка соединения");
}
}
</script>