Как сделать форму отправки сообщений на сайте


Содержание материала:

Форма обратной связи с вложением (прикрепляется файл) | HTML и PHP

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

  • Форма обратной связи PHP
  • Прикрепить файл к письму PHP
  • Multiple files

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

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

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

    Если нужен вид из предыдущей формы, то следует заменить содержимое тега style: .

  • Поддержка от IE10 включительно.
  • Проверка на правильность заполнения полей осуществляется не на стороне сервера.

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

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

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

Файл contacts.html

Файл contacts.php

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

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

  1. нужно заменить свой@yandex.ru
  2. нужно заменить contacts.php на полный адрес, например, http://сайт.ru/папка/папка/contacts.php
  3. серые заголовки лучше убрать. Они меняют адрес хостинга на тот, что посетитель указывает в форме. Но некоторые почтовые сервисы (например, Яндекс.Почта) при их наличии не присылают письма вовсе
  4. для того, чтобы добавить новое поле, нужно внести изменение в HTML и PHP код. Другими словами, добавить те же участки, что и для messageFF
  5. для того, чтобы настроить прикрепление только одного файла, следует убрать всё выделенное. По умолчанию прикреплять можно несколько файлов
  6. для того, чтобы можно было прикреплять только определённый тип файлов, в input прописывается атрибут accept. По умолчанию неважно что прикреплять: картинки, видео или документы

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

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

127 комментариев:

Виталий Здравствуйте, подскажите пожалуйста как поставить эту форму на сайт (wordpress). Просто скопировать код и вставить на страницу? Форма отображается, но и первая часть кода, где нужно изменить емаил на свой тоже отображается. Или первую часть кода нужно разместить в файле на сервере? Виталий Положил первую часть кода в файл mail.php и поместил его в папку с темой шаблона, чтобы можно было редактировать из админки.. изменил емаил на свой, но сообщения не приходят. ( Виталий И еще бы хотелось чтобы после отправки сообщения внизу или где нибудь писалось»ваше сообщение отправлено. спасибо» чтобы человек был уверен в отправке..как такое реализовать? NMitra Здравствуйте, я далека от WP. Попробуйте посмотреть папку wp-content/themes/ваша_тема, а именно файл page.php. Сообщение есть и оно появляется, если верно код разместить. Вячеслав Спасибо! Хорошая форма. NMitra Рада слышать! Владимир Телевной Здравствуйте. Ваш сайт безусловно хорош. Форма данная тоже. Но только вот вопрос можно ли реализовать прикрепление нескольких файлов. И желательно чтоб это делалось путем перетаскивания файла на форму. Что то типа этого http://www.manhunter.ru/demo/upload.html (это демонстрация), источник http://www.manhunter.ru/webmaster/712_zagruzka_faylov_peretaskivaniem_v_okno_brauzera.html

Спасибо заранее =) Владимир Телевной P.S.
Желательно чтоб было реализовано все на столько же просто как данная форма. Т.к. я не просто ноль, а ноль с большим минусом. И мои знания ограничиваются копировал-вставил. NMitra Здравствуйте, я боялась этого вопроса )) Пока нет времени написать полноценное решение и толком разобраться. Нужно объединить:

http://habrahabr.ru/post/120370/
http://www.emanueleferonato.com/2008/07/22/sending-email-with-multiple-attachments-with-php/
http://www.w3schools.com/html/html5_draganddrop.asp Владимир Телевной Будем ждать полноценного решения. Спасибо за ответ. Александр Как бы ещё его заставить вызываться в модальном окне? 🙂 NMitra Как содержимое любого модального окна можно сделать, например, этого http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html Александр А как бы подправить форму, чтобы сообщение об успешной отправке было отдельно? дело в том, что при такой форме достаточно нажать F5 и письмо сваливается снова. Так можно и весь ящик замусорить. Ну или проверку какую-нибудь защитную добавить? NMitra Здесь http://shpargalkablog.ru/2014/01/feedback-form.html пример с XMLHttpRequest()
Или посмотрите тут http://shpargalkablog.ru/2013/08/bell-site.html

php практически везде одинаковый, работает благодаря функции mail Владимир Электрик как сделать чтобы отправлять сразу 6 файлов подряд
. NMitra Владимир, помню, уже спрашивали, но никак не могу с собой бороться. Есть либо знания (ответ на комментарий на автомате, требует малое время), либо большой интерес к теме (пишется новая статья-ответ), либо финансовый стимул. Ссылки на материал по теме в комментарии 9. Sfera Не хватает обязательного поля Телефон Анонимный Подскажите, если отправляю письмо без прикрепленного файла выходит ошибка:
«Warning: file_get_contents() [function.file-get-contents]: Filename cannot be empty in.
Warning: Cannot modify header information — headers already sent by (output started at. «
Как разрешить отправлять без прикрепленного файла? NMitra Посмотрю на следующей недели. Анонимный NMitra, все еще актуально, Как разрешить отправлять без прикрепленного файла?
Спасибо NMitra Хм, а у меня все отправляется. http://img.shpargalkablog.ru/1.html NMitra Поэтому подсказывайте, что выдает у вас, если сделать так:

Анонимный Подскажите как сделать чтобы можно было прикрепить несколько файлов? Анонимный Подскажите как добавить защиту от спама? NMitra Фильтра по IP в большинстве случаев хватает. Чтобы его узнать, следует строку

$message = «Имя: «.$_POST[‘nameFF’].»\nEmail: «.$from.»\nСообщение: «.$_POST[‘messageFF’];

$message = «Имя: «.$_POST[‘nameFF’].»\nEmail: «.$from.»\nСообщение: «.$_POST[‘messageFF’].»\nIP: «.$_SERVER[‘REMOTE_ADDR’];

Затем при обнаружении IP, рассылающего спам

mail($to, $subject, $message, $headers);

if($_SERVER[«REMOTE_ADDR»] != 0.000.000.000) <
mail($to, $subject, $message, $headers);
> Анонимный Отличная, красивая форма, понятный код, очень помогло, спасибо! NMitra Благодарю за отзыв! Анонимный Как это работает? Куда все это вставлять? В примере с обычной обратной связью был отдельный файл contcts.php, а тут все вместе. Делают также с этим примером, но почему-то при отправке выдает ошибку Method Not Allowed
The requested method POST is not allowed for the URL /demo/index.html Анонимный Вроде разобрался. Задал форме action, письма приходят. Но почему-то вместе диалоговго окна об ошибке или успехе переводит на пустую страницу. NMitra Будет время тоже переделаю на XMLHttpRequest
Вам нужно создать страницу с расширением .php и весь код в неё добавить или подключить php на HTML страницах (служба поддержки хостера должна подсказать как, чаще добавляется строка в .htaccess) Анонимный Если приложить 2 файла общим весом менее 10 мб, то письмо не отправляется, типо, превышен лимит в 10 мб. NMitra Вместо

if ($filesize Анонимный Спасибо. Только функцию по проверке веса все-таки тоже хотелось бы иметь. NMitra if ($filesize Анонимный Здравствуйте, письма приходят, но картинки не отображаются, вместо них набор букв-цифр NMitra Здравствуйте, попробуйте упрощённый вариант http://shpargalkablog.ru/2014/05/email-file-php.html Но скорее всего и он не будет работать: проблема или в хостере (именно с его ящика приходят письма), или в почтовом клиенте. У вас где находится почтовый ящик (программа/сервис)? Анонимный весьма полезный блог, спасибо за подробный разбор этой темы, форму с прикреплением файла именно с вашего блога использовала много раз. NMitra Спасибо за отклик! Анонимный Странно, но никто не нашел ошибку скрипта! NMitra Поделитесь, пожалуйста Анонимный Она уже была замечена. Но не донесена должным образом. К сути, если крепишь файл объемом до 1Мб и более 2-х тогда считается сумма файлов в байтах, т.е. она превысит 10000000 если закрепить их по 1-му килобайту. От 1Мб вроде норм. Как обойти этот недочет? Анонимный Так что вы скажите? Каков ваш будет положительный ответ? NMitra Плаваю я в этих байтах. Итак,

килобайт (КБ) = 1024 байта
мегабайт(МБ) = 1024 килобайта

10 МБ = 10485760 байт (тут всё сравнительно верно)

А дальше не поняла. Прикрепляются два файла по 1 МБ, в итоге сумма получается 2МБ. Но форма выдаёт ошибку, что превышен размер? Анонимный Хорошо, для пущей продуктивности беседы. Уже предметнее приложу скрин, вот значение http://s017.radikal.ru/i419/1505/57/bde886d658a0.jpg которые будет в результате прикрепления 2-ух файлов общим весом 176Кб Анонимный А это уже если файл весит 6Мб http://s013.radikal.ru/i323/1505/5e/43ee22f10e0d.jpg — теперь понимаете о чем я? Анонимный Ну и чтоб уж исчерпывающая инфо. — это результат 2-ух файлов более 1-го Мб в сумме 7Мб http://s019.radikal.ru/i619/1505/34/fa139891d090.jpg NMitra Поняла, $_FILES[‘fileFF’][‘size’] передаёт строку, а нужно число. NMitra Попробуйте, поправила Анонимный Можно вашу почту, аську или скайп? NMitra [email protected] Анонимный Приходят знаки вопросов вместо имени. Где то надо указать кодировку? NMitra Попробуйте вместо

$subject = «Заполнена контактная форма с «.$_SERVER[‘HTTP_REFERER’];

$subject = ‘Заполнена контактная форма с ‘.$_SERVER[‘HTTP_REFERER’];
$subject = «=?utf-8?b?». base64_encode($subject) .»?=»; Анонимный Спасибо за код, очень полезен. но вот возникла загвоздка.

Письма отправляются без проблем, но вложений нет, подскажите в чем загвоздка, или это проблема в хостинге и нужно настроить разрешение на запись? NMitra Извините, не назову причины NMitra Попробуйте потестировать более простые вариант
1) http://shpargalkablog.ru/2015/02/multiple-files-php.html
2) http://shpargalkablog.ru/2014/05/email-file-php.html Анонимный А не может быть проблемы в скрипте? Я взял его из темы об отправке письма без вложения, так как в этой статье скрипта по отправке нет после формы, не нужно ли что то в скрипт отправки что нибудь добавить из-заа добавления отправки файла? NMitra Угу, скрипт PHP разный, также в той форме я использовала XMLHttpRequest(), а в этой нет. Не стала разбираться как через XMLHttpRequest() передать данные о файле. Анонимный поработал на стороне хостинга, файлы стали оправляться, но они не читаемы, можете подсказать как это поправить? NMitra Честно говоря, не могу. Какой почтовый сервис? Попробуйте отправить на Яндекс.Почту. Анонимный Спасибо. В итоге проблема была в почте на хостинге, которая на основе нашего домена, на яндекс почте открылся файл без проблем, как и на туже почту но не в веб браузере а полученные через почтовую программу. Большое спасибо Вам за помощь и за скрипт. sergey как сделать только html код такой формы и добавить свой mail NMitra «как сделать только html код такой формы» — Уберите всё до

email нужно добавлять в php Анонимный Как реализовать такую же форму, но с записью данных полей в файл doc(rtf) и отправкой этого файла на почту? NMitra Извините, не подскажу ответа — не было необходимости разбирать ваш вопрос ранее 🙁 Анонимный подскажите как добавить еще строки, телефон,
адрес Анонимный Все работает, но почему-то вложение не приходит на мобильный телефон. В чем может быть проблема? NMitra Проблема может быть в почтовом клиенте. Для увеличения скорости работы он может отключить показ изображения. Если на компьютере показывается письмо полностью, а на мобильном в том же почтовом клиенте без изображения, то я бы написала письмо в службу поддержке почтового клиента. Анонимный Извините, если тема актуальна еще. Ставлю на joomla 2.5. Нажимаю отправить — открывается пустое окно ,а точнее выкидывает на страницу с названием файла php, куда скопировала код. При этом на почту приходит сообщение. NMitra Угу, POST выполняется. Данный пример предполагает, что php и html должны быть в одном файле. Иначе нужно делать через XMLHttpRequest() как тут http://shpargalkablog.ru/2014/01/feedback-form.html только с другой кодировкой Анонимный Спасибо! Попробую. А то очень хочется, чтобы заработало, хорошая и удобная форма. Анонимный К сожалению не получится, joomla режет код в редакторе, а как по файлам правильно разнести, я не поняла. Анонимный И вариант с другой формой не пройдет. Joomla режет любой код скрипта в редакторе. NMitra Тогда делайте редирект с php файла как тут http://shpargalkablog.ru/2013/08/bell-site.html NMitra Если делать без задержки, то посетитель лишь увидит что страница перезагрузилась Александр Стрельченко Доброй ночи!
Подскажите, пожулайста, в какую сторону «копать» ?
С PHP не имел дела ранее, но знания js помогли правильно разобраться во внедрении Вашего обработчика.
В итоге письмо после submit пришло всего два раза (причем, на разные адреса по одному разу. менял, думал беда в почтовиках).
Alert срабатывает каждый раз «успешно».
Заранее благодарю за помощь! Возможно, исходник нужно прикрепить, чтобы Вы смогли понять.
С уважением, Александр. NMitra Доброе утро!
Попробуйте удалить заголовки:

$headers .= «From: » . $from . «\r\n»;
$headers .= «Reply-To: » . $from . «\r\n»;

У меня с ними тоже Яндекс режет письма. Александр Стрельченко Здравствуйте еще раз.
Заголовки эти сразу удалил и не использовал.

Оставил только эти два:

$headers = «MIME-Version: 1.0\r\n»;
$headers .= «Content-Type: multipart/mixed; boundary=\»$boundary\»\r\n»;

Возможно, еще в где-то проблема может быть? NMitra Это нужно.
Попробуйте второй вариант, тоже самое, но почему-то лучше срабатывает.
А форма без файлов нормально работает http://shpargalkablog.ru/2014/01/feedback-form.html ? Александр Стрельченко Второй вариант, это тот, в котором «Форма связи в одном файле»? Не пробовал его..
Без файлов пробовал до этого, но не по вашему шаблону. Срабатывала каждый раз. Александр Стрельченко Кстати, код для «Формы связи в одном файле» сразу при загрузке странички выдает алерт «Размер файлов превышает 10мб». Скопировал Ваш код один в один и проверил) Александр Стрельченко Доброй ночи еще раз.
Нашел логи с сервера и заметил ошибку наконец-то свою. Может кто-то когда-то столкнется с такой же ситуацией.
Конкретные строчки из лога:

PHP Warning: is_uploaded_file() expects parameter 1 to be string, array given in /путь/к/файлу/contacts.php on line 19, referer: http://ваш.сайт

Я делал прикрепление одного файла, а в html мой инпут имел такой вид:

Убрав скобки массива «[]» все заработало, при этом письма доходят моментально и с вложением.

В Вашей статье все грамотно отмечено цветом, что обязательно удалить нужно их, но я зря поторопился)))
Благодарю за Ваше решение!
NMitra Доброго утра, Александр. Большое спасибо, что написали! А то я бы гадала что да как. Кирилл Спасибо огромное Вам за данную форму. Установил. Все работает.
Но. Прошу помочь разобраться в одном недочете.
Ввели все данные, нажали отправить, получаем сообщение:»размер файлов превышает 10 мб».
В этой ситуации из поля «сообщение» пропадает ранее написанный текст. Это нехорошо. В остальных полях информация сохраняется.
Можно с этим что-то сделать? Александр Стрельченко Кирилл, чтобы ранее написанный текст не пропадал, удали эти события:

f.messageFF.removeAttribute(‘value’); // очистить поле сообщения
f.messageFF.value=»; // очистить поле сообщения NMitra Добавила дополнительное условие, попробуйте, при возможности, отпишитесь о результатах, сама не успела потестировать.

Александр, еще раз спасибо за активное участие! Кирилл Москвитин Спасибо.
Но можно как-то сделать, чтобы успешной отправке сообщения текст пропадал, а при ошибке оставался?
Сейчас остается и так, и так.
В принципе я и так доволен))
И еще вопрос..
Для работы формы без ошибок пришлось удалить .htaccess
А без него вроде как нельзя. Можете помочь? Кирилл А! И еще..)
При вынесении скрипта в отдельный файл страница перезагружается и форма не работает.
Это решаемо? NMitra Кирилл, я скрипт поправила (см. статью) при успешной отправке поле очистится, при ошибке — останется.

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

Вы имеете ввиду JS? NMitra «При вынесении скрипта в отдельный файл страница перезагружается и форма не работает.» — проверила, у меня работает. Вы верно указываете путь к файлу contacts.php? Виктор Загоруйко Подскажите, как после отправки письма и выдачи сообщения что все нормально отправилось сделать переход на главную или другую страницу сайта? Что и где нужно прописать? Александр Стрельченко Виктор, попробуй добавить в конце этих строк «location.href = «URL»; (как пример):

if (http.responseText.indexOf(f.nameFF.value) == 0) < // очистить поле сообщения, если в ответе первым словом будет имя отправителя
f.messageFF.removeAttribute(‘value’);
f.messageFF.value=»;
location.href = «/articles/blog/»; // это как пример ссылки — можешь указать в любом виде (http://google.com) или любую другую
>

Не тестировал, поэкспериментируй.
Возможно есть решения с помощью PHP, конечно. Кирилл Москвитин Спасибо огромное Вам за работу и поддержку!
Работает! Однако, поля имя и e-mail все равно остаются при успешной отправке. Но я в восторге)))
«При вынесении скрипта. » — сам файл .js забыл вынести на сервер)
В .htaccess я вообще не буль-буль..( Буду пыхтеть..
Виктор Загоруйко Александр, я уже перепробывал много вариантов, но почему то не получается. Как вы пишите — получается что выводит весь html код страницы))) в окне. Бился и по другим вариантам — никак не выходит. Кирилл В общем чего-то наделал с .htaccess и все заработало))) Надеюсь, надолго)
Еще раз спасибо за помощь!) Виктор Загоруйко NMitra, спасибо! Но не помогло. Вот страница сайта http://modulpicture.com/index.php?route=nnews/article&ncat=59&nnews_ > Виктор Загоруйко Проблема решилась! Всем спасибо.

P.S. Может кому понадобится — location.href = «ваш-сайт»; надо вставлять не вместо if (http.responseText.indexOf(f.nameFF.value) == 0) < // очистить поле сообщения, если в ответе первым словом будет имя отправителя
f.messageFF.removeAttribute(‘value’);
f.messageFF.value=»; или за этими строчками, а вот так if (http.responseText.indexOf(f.nameFF.value) == 0) <
f.messageFF.removeAttribute(‘value’);
f.messageFF.value=»;
>
>
>
location.href = «http://ваш_сайт»; Дмитрий Все замечательно работает, но прикрепить можно только один файл. Хоть и написано, что по умолчанию прикреплять можно несколько файлов. Помогите, пжл, мне обязательно нужна возможность прикреплять несколько фото. NMitra Можно прикреплять несколько файлов:
1) нажать кнопку
2) нажать на файл
3) нажать кнопку CTRL (или SHift, чтобы выделить идущие подряд файлы или нажатой правой кнопкой мышки выделить область из группы файлов)
4) нажать на другой файл

Это стандартная процедура. Можно как в Яндекс.Почте сделать, чтобы при добавлении файлов они суммировались, но это более трудоёмко и не всем может подходить. Дмитрий Спасибо за быстрый ответ, разобрался.
Но появилась новая проблема: выходит сообщение «Извините, данные не были переданы» и все формы остаются заполненными , хотя на самом деле на почту все приходит моментально. Дмитрий Пока вопрос снимается. Не знаю причину сбоя. Заново отписал код, загрузил на сайт — вроде опять работает. Анонимный Господа, поставил форму по второму варианту. На самом сайте перед формой выходит alert(«Ваше сообщение получено, спасибо!»);’; > ?> . В чем дело? NMitra Ставьте по первому, у вас PHP не поддерживается на HTML страницах Unknown Когда сообщение отправлено или не отправлено. Вместо русских букв Появляются знаки вопроса. Как это можно исправить?
Если вместо русс. букв написать англ — тогда выводит нормально англ. буквы. Анонимный Повторю вопрос:
Когда сообщение отправлено или не отправлено. Вместо русских букв Появляются знаки вопроса. Как это можно исправить?
Если вместо русс. букв написать англ — тогда выводит нормально англ. буквы. NMitra У вас кодировка utf-8?

Простейшая форма на HTML+PHP

категория
PHP
дата 19.03.2012
автор ansolomatin
голосов 16

Итак, для начала создадим форму на HTML , в поля которой посетитель будет вводить данные. Для примера будем использовать 3 поля: Имя, E — mail и Сообщение.

В этой простейшей HTML форме я использую метод передачи POST и передаю 3 параметра ( name , email , message ) PHP скрипту ( post . php ) лежащему в корне сайта после нажатия на кнопку «Отправить».

Полей для ввода может быть сколько угодно и с различными атрибутами. Названия параметров ( name , email , text ) используйте, какие вам удобно. Главное чтобы эти параметры были правильно обработаны скриптом ( post . php ). Вы можете использовать выпадающие списки (selec t ), флажки для выбора (checkbox), переключатели (radio) и т.д. Здесь, к примеру, для ввода сообщения я использовал текстовое поле textarea с шириной в 45 символов и с высотой в 10 строк.

Теперь создадим файл post . php . Название и путь к файлу указываются в form action = » post . php » HTML формы.

adminemail =» admin @ site . ru «; // e — mail админа

$ time = date (» H : i «); // часы:минуты:секунды

$ backurl =» http :// site . ru / index . html «; // На какую страничку переходит после отправки письма

// Принимаем данные с формы

// Проверяем валидность e-mail

echo » Вернитесь назад . Вы указали неверные данные!»;

Форма заявки и обратной связи для сайта

В этой статье вы узнаете, как создать всплывающую форму обратной связи для обычного сайта на html ина движке wordpress. В первую очередь такие формы будут необходимы интернет-магазинам, лендингам, да и простым сайтам-визиткам, так как это реально удобно для пользователя.

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

Для чего нужна форма обратной связи на сайте?

Форма обратной связи служит для отправки общений владельцу сайта от посетителей.
В специальные поля вводятся специальные данные (имя, электронная почта, текст). Для отправки сообщения на е-мейл владельцу сайта, необходимо нажать на кнопку «Отправить», может быть и другой вариант.

Ещё один плюс в пользу формы обратной связи – возможность сохранить свой е-мейл в тайне от спамеров.
В современном мире спам, это настоящий бич, который заставляет прятать е-мейл от посторонних глаз за семью печатями. Спам боты круглосуточно рыскают по сайтам в поисках новых электронных адресов для отправки на них спама. Если он найдёт е-мейл владельца сайта, то на этот адрес начнут сыпаться кучи нежелательной корреспонденции. В скором времени, на нём будет невозможно найти действительно нужную почту.

В форме обратной связи такой проблемы нет. Для отправки сообщения нужно заполнить специальное поле для отсеивания ботов. Это позволяет полностью избавиться от нежелательных писем.
Для создания формы обратной связи можете воспользоваться инструкцией и исходным кодом по созданию формы обартной связи или использовать готовый платный скрипт наподобие JivoSite, CallBackKiller и прочие.

Такие формы используются в качестве виджета обратного звонка с сайта, когда клиент хочет что бы ему позвонили.

СОЗДАЕМ ФОРМУ ОБРАТНОЙ СВЯЗИ НА HTML

Итак, допустим у вас уже есть сайт, и вы хотите создать форму, при заполнении которой, пользователь сможет получить от вас обратную связь. Для этого, в первую очередь создается сам каркас с использованием html, css и php кода.

Вставляем в нужное место на сайте следующий код:

По желанию вы можете добавить дополнительные поля для ввода информации, либо убрать уже имеющиеся. Настоятельно не рекомендую вам использовать в подобных формах капчу, либо другие защиты от ботов, что затруднит пользователю заполнение формы.

Вставили код и получилось вот так:

Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили (готовая html верстка формы обратной связи):

Так уже гораздо лучше. В любом случае, форму вам надо будет подстраивать под общий дизайн сайта, поэтому у вас она в конечном итоге будет отличаться от моей.

Далее мы можем подключить маску для поля ввода номера телефона, которая визуально облегчит ввод для пользователя.

Выглядит это вот так:

Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.

Для этого, необходимо подключить скрипт маски. Скачать его вы сможете в самом конце статьи вместе с исходниками.

Подключаем скрипт перед закрывающимся тегом . Не забудьте поменять путь к файлу на свой.

Хорошо, форма обратной связи создана, стили настроены, теперь нужно повестить на нее обработчик, чтобы уведомления приходили вам на почту.

Для этого перед закрывающимся тегом вставьте следующий скрипт:

Как работает этот скрипт?

  1. Производит проверку введенного e-mail.
  2. Указывает поля, с которыми будет работать.
  3. Проверяет эти поля на заполнения. В случае, если обязательные поля не указаны – выдает сообщение о том, что их нужно заполнить.
  4. Обрабатывает введенную информации и инициирует отправку уведомления на почту.
  5. Выдает сообщение пользователю о том, что его заявка принята с помощью Ajax.

Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.

Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.

ВСПЛЫВАЮЩАЯ ФОРМУ ОБРАТНОЙ СВЯЗИ ДЛЯ САЙТА

Бывают случаи, когда нужна именно всплывающая форма, которая открывается при нажатии на кнопку. Сделать ее очень просто. В качестве примера возьмем форму, созданную нами ранее и будет работать с ней. Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.

Добавьте эти строчки перед закрывающимся тегом body, только поменяйте путь к файлам на свой. Далее создаем кнопку, при клике на которую будет вызываться форма.

И придаем ей стили.

Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=»#inline».

Без этого всплывающая форма не будет открываться на сайте. После чего прячем созданную нами ранее форму, чтобы она открывалась во всплывающем окне.

Для этого нужно заменить стили #inline со старых на новые.

В итоге получаем вот такую кнопку.

При нажатии на которую открывается всплывающее окно с обратной связью.

Опять же, стили, расположение полей и элементов можно менять так, как вам будет нужно. К примеру, для обратного звонка с сайта достаточно будет оставить всего 2 поля – имя и телефон, а остальные поля убрать.

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

Довольно часто бывает такая проблема, при которой сквозная форма на сайте, перестает отправлять на внутренних страницах. Для того, чтобы этого не происходило, указывайте в обработчике полный пусть к файлу sendmessage.php. Например, вот так:

Скачать исходные файлы форм обратной связи.

Ключевые слова статьи: добавить форму обратной связи на сайт, верстка формы обратной связи, форма обратной связи html, форма обратной связи php, форма обратной связи почта, добавить форму обратной связи, css форма обратной связи, форма обратный звонок, виджет обратный звонок.

Настройка формы отправки на почту

06.06.2014, 17:07

Форма отправки на почту
Необходимо сделать форму, которая будет отправлять сообщение на указанную (в форме) почту. То есть.

Форма отправки на электронную почту
Здравствуйте. Как сделать форму отправки сообщений с сайта на ел.почту администратора. С.

Отправка формы на почту
Всем привет,не могу разобраться,надеюсь на вашу помощь. Мне нужно что бы данные в форме при.

Стилизация кнопки отправки формы
Вот есть 2 кнопки, одна пересылает по ссылке и имеет класс CSS(вроде так оно называется), в общем.

Благодарность после отправки формы
Привет! Как делать, что бы после отправки формы, всплывало окно с благодарностью?

Интересная форма для отправки сообщения с сайта

Рассмотрим оригинальную форму обратной саязи на jQuery. Такая форма легко украсит любой сайт.

Шаг 1. HTML

Для разметки нам нужно сделать ссылку на библиотеку JQuery.

Шаг 2. DIV

Шаг 3. CSS

Вот что у нас получится!

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru

Статьи по теме jQuery

Крупные заголовки сайта стали весьма популярны, эта тенденция развивается достаточно быстро на рынке веб-дизайна, сегодня мы бы хотели предоставить коллекцию анимированных фоновых заголовков для вашего вдохновения. Мы будем использовать Canvas и Javascript, чтобы создать анимированный фон для крупных заголовков.

Эта ссылка «Back to top» позволяет пользователям плавно перемещаться вверх по странице. Это небольшая деталь, которая улучшает навигацию на веб-сайте с длинными страницами.

Продолжаем рассматривать интересные фишки, которые можно достичь с помощью CSS. В Данном уроке мы рассмотрим весьма интересный, на мой взгляд, эффект движущихся объектов, а именно шестереночного механизма с помощью правил CSS3. Эффект достаточно красиво смотрится, плавно работает, и представляет собой картину полноценного механизма из задействованных деталек различной величины. Эффект весьма специфичный и не каждому веб-мастеру станет полезным, но при правильном применении станет весомым атрибутом дизайна..

Во время поиска в Интернете для вдохновения мы столкнулись с красиво оформленным веб-сайтом Honda HR-V. Когда вы переходите от раздела к другому, переход украшается анимированной фигурой, созданной с помощью элемента .

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.

Хотите уникальный сайт? Ознакомьтесь с нашими ценами!

Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка. ПОРТФОЛИО

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Форма обратной связи

Все поля обязательны для заполнения!

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика — это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа — это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Блог Vaden Pro

Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее HTML кода, оформление ее на CSS, создание PHP скрипта, который бы обрабатывал полученные от пользователя данные и отправлял их на нашу почту, написание JS скрипта, который бы проверял форму на адекватность вводимых данных, защита нашего детища от спама, чтобы наш почтовый ящик не обвалился от атак ботов.


Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы.

Итак, начинаем создание формы обратной связи:

В первую очередь мы пишем HTML код, в нем задаются поля, которые будет заполнять пользователь. Они же в дальнейшем будут оформляться. Код формы выглядит следующим образом:

И визуально она выглядит сейчас следующим образом:

Согласен, пока все некрасиво и ничего не понятно, но мы только начали.

Рассмотрим приведенный выше код подробно:

Для того, чтобы наша форма обратной связи выглядела презентабельно ее нужно оформить. Для получения следующего результата:

Мы использовали данный код:

Подробно расписывать CSS я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:

  1. Не стоит писать оформление под каждый тег в форме. Старайтесь строить свои селекторы так, чтобы парой строк кода оформлять все необходимые Вам элементы.
  2. Не используйте для переноса строк и создания отступов лишние теги по типу br >, p > и тд, с этими задачами прекрасно справляется CSS со свойством display: block и margin с padding. Больше о том, почему не стоит пользоваться br > в верстке вообще можете почитать в статье Тэг br, а так ли он нужен?.
  3. Не стоит пользоваться табличной версткой для форм. Это противоречит семантике этого тега, а поисковики любят семантичный код. Для того, чтобы формировать визуальную структуру документа нам достаточно тегов div, и заданных им в CSS свойств display: inline-block (выстраивает блоки в ряд) и vertical-align: top (не дает им разбежаться по экрану), задаем им необходимую высоту и вуаля, ничего лишнего и все расположено так, как нам нужно.

Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap. Урок по оформлению форм с его использованием можно посмотреть тут.

Ну вот и пришло время сделать нашу форму работоспособной.

Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form.

В конечном итоге его код будет выглядеть следующим образом:

Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:

Этой строкой мы создаем ссылку для возвращения на предыдущую страницу. Поскольку мы заранее не знаем с какой страницы пользователь попадет на эту, то делается это при помощи маленькой JS функции. В дальнейшем мы просто будем обращаться к этой переменной для вывода ее в нужных нам местах.

Тут мы прикручиваем проверку формы на наполненность полей. Как вы догадались, в части $_POST[‘name’] в кавычках мы пишем значение атрибута name наших инпутов.

Если все поля заполнены, то скрипт начнет обрабатывать данные в своей внутренней части, если же хоть одно поле не было заполнено, то на экран пользователя выведется сообщение с требованием заполнить все поля формы echo «Для отправки сообщения заполните все поля! $back» и ссылкой для возврата на предыдущую страницу, которую мы создали самой первой строкой.

Дале вставляем во внутреннюю часть обработчика формы:

Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.

Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.

Полностью отказываться от защиты формы на серверной стороне в пользу JS не рекомендую, поскольку хоть и крайне редко, но встречаются уникумы с отключенным в браузере JS.

После чистки тегов добавляем отправку сообщения:

Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:

  1. ‘почта_для_получения_сообщений@gmail.com’ – сюда между кавычек вставляете свою почту
  2. ‘Письмо с адрес_вашего_сайта’ – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.
  3. ‘Вам написал: ‘.$name.’ br /> Его номер: ‘.$phone.’ br /> Его почта: ‘.$mail.’ br /> Его сообщение: ‘.$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом br /> делаем перенос строки, чтобы сообщение в целом было читабельно.
  4. Content-type:text/html;charset=windows-1251 — в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.

Кодировка указанная в «голове» документа ( meta http — equiv = «Content-Type» content = «text/html; charset=windows-1251» /> ), кодировка из сообщения Content-type:text/html;charset=windows-1251 и в целом кодировка файла PHP должны совпадать иначе в получаемых на почту сообщениях вместо русских или английских букв будут выводиться «кракозябры».

Многие не указывают кодировку отправляемого сообщения явно, но на некоторых почтовых клиентах из-за этого в дальнейшем могут возникнуть проблемы (на почту приходят нечитабельные письма), потому я рекомендую ее все-же указывать.

Проверка формы на адекватность вводимых данных

Чтобы пользователи по невнимательности не промахивались полями и заполняли все корректно стоит поставить проверку вводимых данных.

Это можно сделать как на PHP на стороне сервера, так и на JS на стороне клиента. Я использую второй вариант, поскольку так человек сразу может узнать что он сделал не верно и исправить ошибку не делая дополнительных переходов по страницам.

Код скрипта вставляем в том же файле, где у нас располагается HTML часть формы. Для нашего случая он будет выглядеть так:

Ну а теперь обычный разбор:

Для того, чтобы при нажатии на кнопку отправки формы, у нас происходила ее проверка вешаем запуск нашего скрипта на тег form:

Теперь по пунктам забираем состав проверки:

  1. Обращаемся к нашей форме и по значению атрибута name выбираем интересующий нас инпут.
  2. Записываем его содержимое в переменную
  3. Собственно сама проверка формы на совпадение с заданными нами символами. (/^[A-Za-zА-Яа-я ]*[A-Za-zА-Яа-я ]+$/ — могут использоваться только буквы русского и английского алфавитов; /^[0-9+][0-9- ]*[0-9- ]+$/ — первый символ это «+» или цифра, дальше могут быть только цифры; /^[A-Za-z0-9][A-Za-z0-9\._-]*[A-Za-z0-9_]*@([A-Za-z0-9]+([A-Za-z0-9-]*[A-Za-z0-9]+)*\.)+[A-Za-z]+$/ — первые несколько символов это английские буквы или точки, потом знак @, потом снова английские буквы, потом точка и потом еще несколько английских букв).
  4. Если все верно, то проверка ничего не выводит и идет к следующему блоку кода, если же проверка на символы выдала ошибку, то выполняется часть скрипта с действиями 5 и 6.
  5. Пользователю выводится это сообщение о ошибке.
  6. Происходит выход из скрипта проверки.

Как можете заметить такая мини проверка пишется для каждого нашего поля. Проверку на одно поле я выделил на скриншоте красным квадратом, у других полей она имеет аналогичную структуру и если возникнет необходимость добавить поле или убрать его, Вы теперь с легкостью сможете это сделать.

Полный код страниц формы

Для удобства разместили полный код страниц в открытом доступе. Итак, в корне сайта должны лежать файлы:

Подводя итоги

Формы могут обладать и гораздо более сложной структурой, включать в себя списки и много чего еще, но основные принципы их обработки и проверки, рассмотренные в этой статье, остаются везде одинаковыми.

Так что начинайте с малого, своей первой рабочей формы, и дополняйте ее по мере необходимости своими частями.

Надеюсь этот мануал окажется для Вас полезным. Если что-то было не понятно или не получается повторить – задавайте вопросы в комментариях.

О защите от спама я напишу в следующих статьях.

Как сделать форму обратной связи для сайта

Форма обратной связи — нужная вещь для любого сайта. С помощью неё пользователь может отправить сообщение администратору ресурса, т.е. иметь какой-то контакт с сайтом. Вот как примерно выглядит форма:

Главным html тегом на котором основывается работа обратной связи является — тег

Работу этой формы можно посмотреть на странице контакты. Главные особенности работы этого скрипта:

1. Происходит проверка всех полей (благодаря валидации). Поэтому можно быть спокойным вредоносные скрипты и прочие спецсимволы, которые могут нарушить работу сервера.

2. В случае если поле заполнено некорректно или не заполнено вообще, будет выведено сообщение об ошибке

Неправильно введен E-mail:

Неправильно введена капча:

3. Этот код можно интегрировать в любой движок. Либо на статичный сайт.

Простая форма обратной связи без перезагрузки страницы на PHP+jQuery

Я много видел разных мудреных реализаций форм обратной связи в Интернете и думаю, что даже заядлый программист не сразу разберется в работе такого кода. А зачем, собственно говоря, усложнять работу, если все можно сделать как никогда просто, не так ли?

Сегодня я хотел бы показать самую простую и на 100% рабочую реализацию формы обратной связи без перезагрузки страницы с использованием технологии AJAX (jQuery) и обработки/отправки данных на PHP.

Под простотой я подразумеваю наличие лишь текстовых полей. По желанию, вы можете внедрить чекбоксы, селекты, прикрепление файлов и даже свою капчу.

Технология AJAX, если вы еще не знаете, позволяет без перезагрузки страницы передать значения в PHP-скрипт (и не только), где, уже приняв эти данные, можно произвести необходимые операции.

Если вы не сильно разбираетесь в сайтостроении или только начали освоение этой темы и нуждаетесь в добавлении одного из перечисленный функционалов – пишите об этом в комментариях, постараюсь помочь.

Простой пример формы обратной связи без перезагрузки страницы

Поскольку для отправки формы мы будем использовать PHP, то не стоит делать акцент на том, что на вашем хостинге должна быть его поддержка.

1. Первым делом сверстаем форму с нашими полями. CSS-стили мы упустим, так как сейчас нам это не так важно. В качестве полей сделаем «Имя», «E-mail» и поле для ввода сообщения:

Обратите внимание на элемент с классом «result» – в него мы будем выводить сообщения об ошибках или успешном отправлении сообщения.

2. Далее пишем скрипт, который соберет все данные с формы и отправит их в наш PHP-обработчик:

Скрипт вставляем перед закрывающим тегом

Плагин универсальной отправки формы на E-mail с проверкой для сайта

Плагин легко можно интегрировать в любой сайт без глубокого анализа кода и архитектуры.
В статье мы рассмотрим принцип работы плагина, процедуру инициализации, конфигурации и установки.

В данной статье мы предложим свою наработку универсальной отправки форм на E-mail с проверкой на заполненность средствами PHP и Jquery. Плагин легко можно интегрировать в любой сайт без глубокого анализа кода и архитектуры. В статье мы рассмотрим принцип работы плагина, процедуру инициализации, конфигурации и установки.

Отличительные особенности и возможности плагина универсальной отправки форм:

  • Проверка заполненности форм с возможностью группировки элементов и выводом подсказок для пользователя
  • Множество шаблонов для отправки с возможностью автоматического выбора шаблона
  • Работа формы без перезагрузки — AJAX
  • Обработка удачных и ошибочных отправок
  • Уникальные заголовки писем
  • Отправка файлов на E-mail

Универсальный плагин отправки форм с проверкой на E-mail состоят из основных частей:

  • HTML форма для заполнения
  • JQuery скрипт для проверки и отправки AJAX
  • PHP скрипт для автоматизации обработки данных, отправленных с формы, подключения шаблонов писем и обработки результатом отправки
  • PHPMailer в качестве smtp клиента для процедуры отправки письма
  • TPL файлы шаблонов отправки письма

Установка примера плагина на хост веб-сервера и первая отправка формы на E-mail

Скачав и распаковав плагин мы увидим следующее дерево файлов и каталогов:

Для дальнейшего первого опыта отправки демонстрационной формы нам необходимо сконфигурировать файл /php/config.php:

Останавливаться подробно на процедуре конфигурации файла config.php мы не будем. Более подробную информацию о конфигурации SMTP клиента PHPMailer можно почитать здесь!

После успешной и корректной редакции конфигурационного файла нам необходимо разместить файлы архива на любой веб сервер. В режиме просмотра локальных файлов в браузере данный скрипт не сработает. Заливаем все содержимое в любую папку на хосте веб сервера и открываем через браузерную строку адреса ссылку:

http(https)://domen.domen/path/to/dir/index.html

Если у нас открылась презентационная страница с описанием и формой — все сделано верно. Далее мы заполняем форму и ждем кнопку «Отправить». В случае успешной отправки форма выведем соответствующее сообщение. В случае ошибок при отправке — выведется информация об ошибке. Процедуру отладки PHPMailer мы так же рассматривать не будем.

Установка и интеграция плагина универсальной отправки формы на E-mail на сайт

Для установки плагина на существующий сайт необходимо:

1. Копировать следующий перечень файлов и каталогов:

2. Создать новую или отредактировать существующую форму по следующему примеру:

Описание и назначение ключевых атрибутов формы для корректно работы скрипта. Необязательные параметры скрипта выделены жирным курсивом:

2.1. Тег form:

name — Определяет название шаблона tpl при обработке полученного массива POST скриптом function-send-form.php. Название шаблона письма должно соответствовать значению атрибута name и формируется по маске » .tpl«

method — значение атрибута всегда POST. В противном случае функция обработки формы PHP не сработает. По умолчанию скрипт обработки данных function-send-form.php ориентирован только на POST параметры формы.

action — ссылка на серверный обработчик AJAX запроса. Если ваш путь серверного обработчика AJAX запроса отличается — необходимо отредактировать значение атрибута

class — атрибут может содержать любое количество набора классов, но для корректно работы JQuery скрипта необходимо наличие класса sendler. По данном классу происходит отслеживание события отправки формы на вашем сайте.

2.2. Поля для заполнения внутри формы могут содержать следующие атрибуты:

name — определяет имя POST параметра

type — для корректно работы формы и распознания типов элементов формы атрибут рекомендуется к обязательному использованию

title — выводит подсказку в тег, который указан классов в атрибуте текущего тега confirminfo

class — все поля, обязательные для заполнения и проверки должны содержать в значении атрибута класс «Y-required«, «group000_Y-required«. group000_Y-required — группирует необходимые элементы в группы, для проверки заполненности одного из элементов группы. Radio группировать не нужно, группировка происходит про атрибуту name, как это заложено разработчиками type

confirminfo — значение атрибута определяет класс тега, куда выводится предупреждение о незаполненности элемента формы

2.3. Тег с классом response определен по умолчанию в качестве класса для вывода системных сообщений результатов работы формы, вывода сообщений в режиме отладки плагина и предупреждений о некорректно заполненных элементов формы.

Стилизацию данной формы можно взять из примера, любо разработать собственную.

3. В результате редактирования или создания формы должен отрабатывать JQuery обработка формы с функцией AJAX. Результат работы формы должен вернуться в тег с классом «response «. Если у вас что-то работает неправильно — свертись с примером, приложенным в виде архива к данной статье.

Принцип работы плагина универсальной отправки форма на E-mail с проверкой

Плагин отправки формы на E-mail работы в несколько этапов и по следующему принципу.

1. Срабатывает событие отправки формы с классом sendler.

2. Событие отправки формы перехватывает JQuery скрипт и запускает процедуру проверки формы на корректность заполнения.

3. В случае нарушений правил заполнения формы скрипт добавляет к обязательным полям на заполнение класс wrong и, в случае наличия необходимых атрибутов title и confirminfo, выводит сообщения с подсказками для заполнения.

4. В случае успешного прохождения проверки формы запускается функция отправки формы AJAX запросом на обработчик (ссылку), указанный в атрибуте action.

5. Серверный обработчик получает необходимые параметры AJAX запроса, подключает необходмый шаблон письма (ориентируясь на атрибут name формы — POST параметр template). Далее происходит инициализация класса PHPMailer, формирования тела письма, заголовков и поцидура отправки письма на E-mail

6. В случае успешно или неуспешной отправки письма серверный обработчик вернет соответствующее сообщение на страницу в JQuery скрипт

Правила создания и редактирования tpl шаблонов письма

Правила верстки html писем мы рассматривать не будем. Рассмотрим обязательные параметры tpl шаблона письма и принцип создания шаблонов для скрипта универсальной отправки формы на E-mail.

Рассмотрим пример из архива:

Как можно заменить, значения атрибутов name тегов формы идентичны именам переменных в шаблоне письма tpl. Все верно, так оно и есть!

Все вновь созданные шаблоны складываем в каталог mail-tpl с расширением файла .tpl.

Название tpl документа должно совпадать значению атрибута name формы отправки на сайте.

Завершение

Пожалуй, это вся необходимая информация для эффективного использования плагина универсальной отправки форм на E-mail с проверкой. Всем спасибо за внимание!

Лучший способ сказать автору «СПАСИБО» рассказать друзьям или поделиться ссылкой!
Другие статьи:

DateTimePicker – удобный и легкий в использовании плагин для быстрой подстановки даты и времени в поля ввода.

Плагин DateTimePicker для сайта — инструкция, настройка, инициализация

В этой статье будет рассмотрено решение этой задачи с использованием плагина Masked Input, который отличается простотой и удобством в использовании.

Плагин маски ввода для input — jquery maskedinput — инструкция, настройка, инициализация

Метод, который мы рассмотрим ниже, позволяет размещать информацию на страницах любого пользователя или группы,к которому имеет доступ авторизованный пользователь.

Публикация на стене Вконтакте средствами API — кросспостинг

С помощью PHPExcel можно производить чтение и запись информации в файлы, форматировать их содержимое,выполнять операции с формулами, стилями и т.д.

Чтение excel на PHP — основные методы класса PHPExcel

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

TinyMCE вырезает теги — исключения для тегов TinyMCE

Научимся вставлять теги в выделенный фрагмент текста, вставлять теги на место селектора в тексте и получать средствами JS HTML код отредактированного текста и текст без HTML сущностей.

Cвойства и методы TinyMCE — вставка тегов, вывод значений

Как вы уже поняли, редактор является платформенным Javascript редактором HTML кода, т.е. WYSIWYG редактором для сайтов и веб приложений. Разработчиком этого полезного продукта является компания Moxiecode Systems AB.

Установка и настройка TinyMCE — инициализация и параметры

В статье мы: познакомимся с каруселью; научимся интегрировать ее на свой сайт; познакомимся с основными параметрами инициализации;рассмотрим самые популярные свойства и методы классов jCarousel

Установка и настройка jCarousel — параметры и методы

Любой backend программист php сталкивается с задачей автоматизации почтовой рассылки на веб сайтах и многие,кто сталкивался с данной задачей впервые, вставали перед ключевым вопросом: «Писать или не писать smtp клиент с нуля?».

Инструкция SMTP PHPMailer — свойства и методы класса

Очень часто при создании плиточной навигации на сайте появляется потребность в ее анимации.В этой статье изложено решение этой задачи с помощью плагина.

Заметки Веб-разработчика

Полезная информация для исполнителей и заказчиков

Как сделать простую Форму Обратной связи с AJAX обработкой

Форма обратной связи сейчас есть практически на каждом лендинге или просто на сайте каким-либо образом связанным с продажей своей услуги. По сути, это уже почти обязательный атрибут любого сайта ориентированного на продажу услуг или товаров.

Мы с вами сделаем небольшую форму с полями для имени, телефона и сообщения. Также, мы добавим AJAX запрос для того, чтобы избавить пользователя от неудобного переадресовывания на другую страницу после отправки письма. То есть, после отправки, выскочит сообщение под формой: «Ваше сообщение успешно отправлено».

ШАГ 1. Добавление формы в HTML файл

Для начала нам необходимо в html файл добавить нашу форму. Вставьте вот такой код:

Появляется несколько вопросов:
«Что за блок erconts?»
«Почему мы оставили action пустым?»
«Почему блок erconts имеет display: none?»

Блок erconts будет использован как контейнер для сообщения, которое будет выводится после отправки письма. То есть, в него с помощью ajax мы будем выводить всякого рода ошибки или сообщения с подтверждением отправки.

Action мы оставили пустым, чтобы небыло переадресации на другую страницу после отправки письма, ведь мы используем ajax метод и переадресация нам уже просто не к чему.

Блок erconts будет анимировано появляться с сообщением об успешной отправке сообщения. Анимация будет прописана в коде следующего шага.

ПРИМЕЧАНИЕ! Советую не убирать id callbacks и id submit у елемента form и input соответственно. По этим id мы сможем напрямую обращатся к ним в ajax запросе.

ШАГ 2. Добавление AJAX запроса в javascript файл

Далее, создаем javascript файл, подключаем его в наш html файл. Затем помещаем в javascript файл код ниже:

Как вы видите, мы отлавливаем событие нажатия кнопки с id submit и начинаем вызывать ajax функцию. В строке url: «send.php» вызывается php файл с обработчиком формы, который мы создадим в следующем шаге. В строке data: «$(«#callbacks»).serialize()» собираются данные для обработки, которые ввел пользователь в форму. В функции error выводится сообщение при ошибке отправки. Такое сообщение будет выводится, если вдруг у человека не будет работать интернет или если не был подключен обработчик о котором я писал ранее. В функции beforeSend выводится сообщение перед отправкой. Это сообщение часто даже не видно при отправке, потому что оно мелькает буквально на пару сотен долисекунд из-за быстрой обработки письма. Функция success выводит сообщение при удачной отправки данных письма обработчику.

По сути, этот ajax запрос просто берет данные которые ввел пользователь и передает их в файл обработчика, который мы сейчас будем создавать. А уже из того файла берет сообщение об ошибке или об успешной отправки письма.

ШАГ 3. Создание обработчика формы в PHP файле

Вам нужно в папке вашего сайта создать файл send.php и вставить в него этот код:

Кратко опишу, что делает этот код.

Первая часть кода заносит данные, которые ему передал ajax в свои переменные под названием name, phone и body. Затем, эти переменные проверяются на их содержание. Если хоть одна из них будет пустая, обработчик вернет сообщение об ошибке: «Пожалуйста, заполните все поля». Далее, если эти переменные содержат какие-то данные, то есть, пользователь ввел свои данные, обработчик начинает прорабатывать письмо. Наш обработчик начинает вычислять ip пользователя и его браузер. Далее он конструирует письмо с темой, которую мы можем указать в этом обработчике. Он вставляет переменные с данными в это письмо и проводит отправку на почту, которую вы должны указать в переменной $to в коде этого обработчика. В моем случае я написал свою почту, а вы должны написать свою или ту на которую должно прийти письмо.

Конец кода с помощью функции mail() определяет, получилось ли отправить письмо или нет. Если обработчик смог отправить письмо, он пишет одно сообщение, а если нет, другое.

Вы можете изменять сообщения, которые должен написать этот обработчик пользователю при отправке.

ВСЕ ГОТОВО! Теперь на вашем сайте есть абсолютно работающая форма обратной связи в Ajax исполнении.

Топ-пост этого месяца:  Размещение дочерних элементов в сетке с помощью свойства display contents CSS примеры кода
Добавить комментарий