У вас лендінг, чи сайт на WordPress, чи на ModX, чи ще щось — це неважливо, якщо ваш хостинг підтримує функцію mail()
, то цей туторіал вам підійде. Ми зверстаємо форму, стилізуємо її, напишимо невеличкий скрипт на jQuery та PHP, після чого ваші клієнти зможуть відправляти вам свої імена та телефони! І це без перезавантаження сторінки.
Спочатку зробимо структуру. Майте на увазі, що вона може бути абсолютно різною у мене та у вас, я просто показую приклад.
<div class="form-block"> <h4>Свяжитесь с нами</h4> <form class="form"> <p><input type="text" name="name" placeholder="Ваше имя" required></p> <p><input type="email" name="email" placeholder="Ваш e-mail" required></p> <p><input type="tel" name="phone" placeholder="Ваш телефон" required></p> <p><textarea name="text" placeholder="Сообщение" required></textarea></p> <button>Отправить</button> </form> </div>
Тут нічого складного: загальний батьківський блок, форма (не забудьте дати їй клас, далі знадобиться), у якій чотири поля для тексту із атрибутом required
— для обов’язкового заповнення. Тепер стилізуємо її:
/* Стилі для загального блоку */ .form-block { max-width: 400px; padding: 30px 45px; border-radius: 10px; box-shadow: 0 0 25px rgba(0,0,0,.1) } /* Стилі для заголовку форми */ .form-block h4 { margin: 0 0 25px; text-align: center; font-size: 28px; line-height: 28px; } /* Стилі для полів форми */ .form-block form p { margin: 0 0 15px; } .form-block form input, .form-block form textarea { width: 100%; border: 1px solid #ddd; padding: 15px; outline: none; transition: .3s; } .form-block form textarea { resize: none; height: 100px; } /* Стилі для полів при фокусі */ .form-block form input:focus, .form-block form textarea:focus { border-color: #aaa; } /* Стилі для кнопки форми */ .form-block form button { background: #353535; border: 0; outline: none; color: #fff; padding: 15px 35px; cursor: pointer; transition: .3s; } .form-block form button:hover { background: #222; }
Після цього напишемо трохи JS коду, не забудьте підключити бібліотеку jQuery:
$(document).ready(function() { /* Обираємо форми по класу */ $(".form").submit(function() { $.ajax({ type: "POST", /* Файл для опрацювання інформації з полів */ url: "mail.php", /* Зчитуємо інформацію з полів цієї форми за допомогою serialize() */ data: $(this).serialize() }).done(function() { /* Після успішного виконання чистимо поля форми */ $(this).find("input").val(""); /* Видаємо вспливаюче вікно про успішну відправку */ alert("Дякуємо! Зовсім скоро ми вийдемо на зв'язок!"); $(".form").trigger("reset"); }); return false; }); });
Чому ми використовуємо клас, а не ідентифікатор? Тому що, до прикладу, на лендінгу форм може бути декілька, а ідентифікатор повторюватися не може, тоді як з класом проблем не буде. Наступний крок — трохи PHP. Створіть файл mail.php
, до якого ми звертаємося у JS, і там напишіть наступне:
<?php $recepient = "youremail@mail.com"; /* Тут ваша пошта, куди приходитиме інформація */ $sitename = "Назва вашого сайту"; /* Тут просто назва вашого сайту з тегу <title> */ /* Тут зчитуємо дані по атрибуту name в input та textarea */ $name = trim($_POST["name"]); $email = trim($_POST["email"]); $phone = trim($_POST["phone"]); $text = trim($_POST["text"]); /* А тут формуємо лист, можна використовувати HTML */ $message = " <h1>Нова заявка!</h1> <p><b>Ім'я:</b> $name</p> <p><b>Пошта:</b> $email</p> <p><b>Телефон:</b> $phone</p> <p><b>Текст:</b> $text</p> "; $pagetitle = "Нове повідомлення з сайту \"$sitename\""; mail($recepient, $pagetitle, $message, "Content-type: text/html; charset=\"utf-8\"\n From: $recepient");
Ось і все! Код в усіх блоках можна редагувати, головне розуміти, що ви змінюєте. Залишайте ваші питання у коментарях, якщо щось не зрозуміло, спробую допомогти.
Absolutely indited content , appreciate it for selective information . Claudelle Armando Dareen