Как сделать форму для отправки данных

Это результат объединения статей:

форма не работает намеренно, присутствует для того, чтобы можно было оценить внешний вид, пощёлкав по кнопкам.

Особенности:

  • Внешний вид:
    • форма по прежнему резиновая, но теперь наименования пунктов располагаются слева (см. свойство float),
    • при нажатии на label фокус получает соответствующий input,
    • при наведении курсора мышки на поле, его границы становятся голубыми, при фокусе — бледно-голубыми,
    • правильно заполненные поля будут темнеть.
    Если нужен вид из предыдущей формы, то следует заменить содержимое тега style: <style>содержимое</style>.
  • Поддержка от IE10 включительно.
  • Проверка на правильность заполнения полей осуществляется не на стороне сервера.

Ниже представлены два варианта скрипта отправки данных с сайта на почту: с Javascript (Ajax) и без.

1. Форма связи позволяет отправить несколько изображений и др.файлов без перезагрузки страницы

  1. PHP вынесен в отдельный файл
  2. при нажатии клавиши F5 форма не будет отправлена снова
  3. после отправки формы страница не будет перезагружена

Файл contacts.html

<!DOCTYPE HTML> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Контактная форма</title> <style> #feedback-form { max-width: 550px; padding: 2%; border-radius: 3px; background: отправки #f1f1f1; } #feedback-form label { float: left; display: block; clear: right; } #feedback-form.w100 { float: right; max-width: 400px; width: 97%; margin-bottom: 1em; padding: 1.5%; } #feedback-form.border { border-radius: 1px; border-width: 1px; border-style: solid; border-color: #C0C0C0 #D9D9D9 #D9D9D9; box-shadow: 0 1px 1px rgba(255,255,255,.5), 0 1px 1px rgba(0,0,0,.1) inset; } #feedback-form.border:focus { outline: none; border-color: #abd9f1 #bfe3f7 #bfe3f7; } #feedback-form.border:hover { border-color: #7eb4ea #97cdea #97cdea; } #feedback-form.border:focus::-moz-placeholder { color: transparent; } #feedback-form.border:focus::-webkit-input-placeholder { color: transparent; } #feedback-form.border:not(:focus):not(:hover):valid { opacity:.8; } #submitFF { padding: 2%; border: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset; background: #669acc; color: #fff; } #feedback-form br { height: 0; clear: both; } #submitFF:hover { background: #5c90c2; } #submitFF:focus { box-shadow: 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05); } </style> <form enctype="multipart/form-data" method="post" id="feedback-form"> <label for="nameFF">Имя:</label> <input type="text" name="nameFF" id="nameFF" required placeholder="например, Иван Иванович Иванов" x-autocompletetype="name" class="w100 border"> <label for="contactFF">Email:</label> <input type="email" name="contactFF" id="contactFF" required placeholder="например, " x-autocompletetype="email" class="w100 border"> <label for="fileFF">Прикрепить файл:</label> <input type="file" name="fileFF[]" multiple id="fileFF" class="w100"> <label for="messageFF">Сообщение:</label> <textarea name="messageFF" id="messageFF" required rows="5" placeholder="Детали заявки…" class="w100 border"></textarea> <br> <input value="Отправить" type="submit" id="submitFF"> </form> <script> document.getElementById('feedback-form').addEventListener('submit', function(evt){ var http = new XMLHttpRequest(), f = this; evt.preventDefault(); http.open("POST", "contacts.php", true); http.onreadystatechange = function() { if (http.readyState == 4 && http.status == 200) { alert(http.responseText); if (http.responseText.indexOf(f.nameFF.value) == 0) { f.messageFF.removeAttribute('value'); f.messageFF.value=''; } } } http.onerror = function() { alert('Извините, данные не были переданы'); } http.send(new FormData(f)); }, false); </script>

Файл contacts.php

<?php if (isset ($_POST['contactFF'])) { $to = ""; $from = $_POST['contactFF']; $subject = "Заполнена контактная форма с ".$_SERVER['HTTP_REFERER']; $message = "Имя: ".$_POST['nameFF']."\nEmail: ".$from."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF']; $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"; for($i=0;$i<count($_FILES['fileFF']['name']);$i++) { if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) { $attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'][$i]))); $filename = $_FILES['fileFF']['name'][$i]; $filetype = $_FILES['fileFF']['type'][$i]; $filesize += $_FILES['fileFF']['size'][$i]; $message.=" --$boundary Content-Type: \"$filetype\"; name=\"$filename\" Content-Transfer-Encoding: base64 Content-Disposition: attachment; filename=\"$filename\" $attachment"; } } $message.=" --$boundary--"; if ($filesize < 10000000) { mail($to, $subject, $message, $headers); echo $_POST['nameFF'].', Ваше сообщение получено, спасибо!'; } else { echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.'; } }?>

2. Форма связи в одном файле

загрузка...

Рекомендации к скрипту отправки файлов на почту

  1. нужно заменить свой@yandex.ru
  2. нужно заменить contacts.php на полный адрес, например, http://сайт.ru/папка/папка/contacts.php
  3. серые заголовки лучше убрать. Они меняют адрес хостинга на тот, что посетитель указывает в форме. Но некоторые почтовые сервисы (например, Яндекс.Почта) при их наличии не присылают письма вовсе
  4. для того, чтобы добавить новое поле, нужно внести изменение в HTML и PHP код. Другими словами, добавить те же участки, что и для messageFF
  5. для того, чтобы настроить прикрепление только одного файла, следует убрать всё выделенное. По умолчанию прикреплять можно несколько файлов
  6. для того, чтобы можно было прикреплять только определённый тип файлов, в input прописывается атрибут accept. По умолчанию неважно что прикреплять: картинки, видео или документы <input type="file" name="fileFF[]" multiple id="fileFF" class="w100" accept="image/">

Скорее всего письма будут падать в СПАМ папку, поэтому для них нужно создать правило. Скажем, так это делается в Яндекс.Почте: Создать правило в Яндекс.Почте, чтобы письма не уходили в СПАМ

Если на хостингах выключена функция mail() (галка может именоваться "sendmail_from"), то скрпт работать не будет. Так как по факту email отправляется с электронного ящика хостинга.


Источник: http://shpargalkablog.ru/2014/05/feedback-form-file.html



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Форма обратной связи с вложением (прикрепляется файл) HTML и PHP Как сделать цветным фон в фотошоп

Как сделать форму для отправки данных Отправка почты с помощью php формы - создать сайт просто!
Как сделать форму для отправки данных Отправка почты с помощью PHP и Ajax / Песочница / Хабрахабр
Как сделать форму для отправки данных Как создать форму для отправки как создать форму в html
Как сделать форму для отправки данных Форма отправки почтовых сообщений с сайта
Как сделать форму для отправки данных SnipCode : Отправка данных формы на почту (Email)
Как сделать форму для отправки данных Настройка формы отправки на почту - HTML, CSS
Как сделать форму для отправки данных Простейшая форма на HTMLPHP
Как сделать форму для отправки данных Отправка данных формы
3. медико-экономическое обоснование применения одноразовой медицинской M - все о IT мире «Ложится мгла на старые ступени» читать Арена своими руками Муравьиная ферма Белый цвет в одежде: правила сочетания цветов

Похожие новости