Блог
Простая форма на Ajax для вашего сайта
Чем лишний раз устанавливать кривые плагины на движок WordPress, лучше поберечь свой сайт и написать самому, что-то полезное, то что поможет нам обойтись без лишних плагинов от которых часто появляются головные боли вместо желаемого результата.
Вот пример простой формы обратной связи, которую при желании и должном умении можно переделать под свой лад, форма также имеет в своем арсенале поле для отправки изображений до 10 МБ, далее следует инструкция по установке:
Подключаем библиотеку JQuery по ссылки ниже, или же свою:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Копируем скрипт в ваш файл .JS:
$(function() { document.getElementById('feedback-form').addEventListener('submit', function(evt){ var http = new XMLHttpRequest(), f = this; var th = $(this); evt.preventDefault(); http.open("POST", "/mail.php", true); // Обратите внимание, что параметр "mail.php" указывает путь к файлу mail.php, если путь будет некоректный, форма работать не будет, это будет полезно для тех кто работает с CMS, и размещает формы на разных страницах, а не только на главной http.onreadystatechange = function() { if (http.readyState == 4 && http.status == 200) { alert(http.responseText); if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить поля формы, если в ответе первым словом будет имя отправителя (nameFF) th.trigger("reset"); } } } http.onerror = function() { alert('Извините, данные не были переданы'); } http.send(new FormData(f)); }, false); });
Создаем в корне вашего сайта файл mail.php копируем в него код ниже:
<?php if (isset ($_POST['contactFF'])) { $to = "coder7.ru@gmail.com"; $from = "Coder7.ru"; $subject = "Обратная связь | CODER7.RU"; $message = "\nИмя: " .$_POST['nameFF']. "\nПочта: " .$_POST['contactFF']. "\nПроект: " .$_POST['projectFF'] ; $boundary = md5(date('r', time())); $filesize = ''; $headers = "MIME-Version: 1.0\r\n"; $headers .= "From: " . $from . "\r\n"; $headers .= "Reply-To: " . $from . "\r\n"; $headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\"\r\n"; $message=" Content-Type: multipart/mixed; boundary=\"$boundary\" --$boundary Content-Type: text/plain; charset=\"utf-8\" Content-Transfer-Encoding: 7bit $message"; if(is_uploaded_file($_FILES['fileFF']['tmp_name'])) { $attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name']))); $filename = $_FILES['fileFF']['name']; $filetype = $_FILES['fileFF']['type']; $filesize = $_FILES['fileFF']['size']; $message.=" --$boundary Content-Type: \"$filetype\"; name=\"$filename\" Content-Transfer-Encoding: base64 Content-Disposition: attachment; filename=\"$filename\" $attachment"; } $message.=" --$boundary--"; if ($filesize < 10000000) { // проверка на общий размер всех файлов. Многие почтовые сервисы не принимают вложения больше 10 МБ mail($to, $subject, $message, $headers); echo $_POST['nameFF'].', Ваше сообщение отправлено, спасибо!'; } else { echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.'; } } ?>
HTML код формы:
<form id="feedback-form" enctype="multipart/form-data" method="post"> <input id="nameFF" name="nameFF" type="text" placeholder="Имя*" required> <input id="contactFF" name="contactFF" type="email" type="text" placeholder="Email*" required> <textarea id="projectFF" name="projectFF" cols="20" rows="5" placeholder="Сообщение*" required></textarea> <input type="file" name="fileFF"> <button type="submit" id="submitFF">Отправить</button> </form>
0 комментариев