Для удобства посетителей сайта, чтобы быстро отправить письмо по электронной почте, например Администратору Сайта, совсем не обязательно набирать его в почтовой программе (почтовом клиенте), а можно это сделать, воспользовавшись формами на web-странице.
В прошлом уроке "Формы на web-страницах сайта" мы разобрались с теоритической частью органицации различных форм на сайте. Сегодня давайте напишем реальный код для формы отправки сообщений с сайта.
Кроме этого можно еще организовать и проверку заполнения полей формы, на тот случай, если кто-то из посетителей Вашего сайта решил поиграться (поверьте таких чудаков хватает).
Теорию мы разбирали с Вами в прошлом уроке, если есть непонятные моменты вернитесь назад повторите. Приступаем сразу к коду в Листинге 1 приведен готовый код формы отправки почтовых сообщений:
Для простоты форматирования, поля формы заключены в таблицу. Как создаются таблицы мы уже тоже говорили посмотреть можно в уроке Таблицы. Теория. и в следующем уроке Таблицы. Практика. Иногда для упорядочения полей формы вместо таблиц используют теги <p> </p>теги абзацев. Принципиальной разницы нет, используйте то, что Вам больше нравится.
Иногда при заполнении формы, нужно быстро очистить все поля, для этих целей добавлена еще одна кнопка "Сброс" которая описывается в Листинге 1 вот таким кодом:
<INPUT TYPE=reset VALUE=" Сброс ">
Если функция "Сброс" Вам не нужно, просто удалите эту строчку.
А это программа Листинг 2, будет проверять, заполнил ли пользователь все поля и отправлять данные из формы адресату:
Листинг 2.
<SCRIPT LANGUAGE="JavaScript">
function checkIt() { // функция проверки полей формы
//-----------
if (document.forms.mailer.Name.value != "") { // функция проверки поля Name
} else {
alert("\nОбласть \"Имя\" в форме. \n\nПожалуйста, введите свое имя."); // выводит сообщение, если поле Name не заполнено
document.forms.mailer.Name.focus(); // возврашает курсор на поле Name
return false;
}
//-----------
if (document.forms.mailer.Subject.value != "") { // функция проверки поля Subject
} else {
alert("\nОбласть \"Тема\" в форме. \n\nПожалуйста, введите тему."); // выводит сообщение, если поле Subject не заполнено
document.forms.mailer.Subject.focus(); // возврашает курсор на поле Subject
return false;
} //-----------
if (document.forms.mailer.Message.value != "") { // функция проверки поля Message return true; // ВСЕ ОТЛИЧНО
} else {
alert("\nОбласть \"Сообщение\" в форме. \n\nПожалуйста, напишите сообщение."); // выводит сообщение, если поле Message не заполнено
document.forms.mailer.Message.focus(); // возврашает курсор на поле Message
return false;
} //-----------
}
function msg() { // функция отправки
document.mailer.action = "mailto:Ваша@почта.ru"
mailtoandSubject = (('?Subject=' + document.mailer.Subject.value) + '&Body=' + document.mailer.Message.value);
}
</SCRIPT>
Смените значение переменной Ваша@почта.ru на Ваш адрес электронной почты, куда будут приходить заполненные в форме сообщения. Данная форма содержит поля ИМЯ, ТЕМА и СООБЩЕНИЕ. Разумеется, вы можете изменить названия этих полей, а также добавить/удалить новые строчки (поля). При этом нужно будет внести некоторые изменения в программу проверки/отправки сообщения.
Каждому полю формы присвоено определенное имя, которое задано атрибутом NAME. При нажатии на кнопку "Отправить" происходит вызов функции checkIt(). Если поле не заполнено выводиться окно с сообщением с кнопкой Ok, после нажатия на которую курсор переходит на незаполненное поле.
Остальные функции проверки работают также (я разделил их вот таким комментарием //-----------, чтобы Вам было удобнее добавлять или удалять функции).
Последняя функция должна содержать значение return true;. Именно это значение уведомляет об успешном окончании проверки и завершает проверку полей формы, так что решать, где его поставить - Вам.
Такая форма использует почтовую программу пользователя и, если она не настроена, ничего не отправится. Это к вопросу обработчика значений формы (из прошлого урока). Если Вы заметили то в Листинге 1 значение ACTION="" пустое, в данном случае в качестве обработчика выступает почтовая программа.
А вот так форма отправки сообщений будет выглядеть на web-странице:
Такая форма использует почтовую программу пользователя и, если она не настроена, ничего не отправится. Что за программа и где ее настроить.
Комментарии добавил(а): АндрейК Дата: 2010-07-26
Речь идет о почтовом клиенте, который установлен у Вас на компьютере
Комментарии добавил(а): Павел Дата: 2011-02-01
я не понимаю... как сдлать,чтобы он оправлял почту... какую прогу надо для обработки??? почему он мне первую строку формы пишет на ШТМЛ странице???
Комментарии добавил(а): Павел Дата: 2011-02-01
Как сделать так, чтобы введенные данные просто оправлялись мне на почту??? И как автоматически из других,ранее заполненных форм, брались данные??
Комментарии добавил(а): нгенгенг Дата: 2011-04-21
енгенген
Комментарии добавил(а): aparadox Дата: 2012-03-01
Я сервис халявный нашел по отправке Email с сайта. Все просто и легко.
Комментарии добавил(а): aparadox Дата: 2012-03-01
Я сервис халявный нашел по отправке Email с сайта. Все просто и легко.
Комментарии добавил(а): Надежда Дата: 2012-10-21
Подскажите где этот халявный сервис найти,пожалуйста!Качают деньги ,не могу отписаться от аккуанта.
Комментарии добавил(а): Sanych Дата: 2014-02-25
У меня форма заработал, но если на русском заполнять поля, то отправляет данные в мой outlook кракозяблами. Как бы это порешать?
Комментарии добавил(а): Никита Дата: 2013-08-22
Всем привет! может кто наконец подскажет код который отправлял бы с сайта сообщение на почту! лекго и просто чтоб было! эта фигня наверху не работает! может и я не так делаю!
Комментарии добавил(а): Leonid Дата: 2014-12-27
Прога не работает!!! Вопрос остался открытым:как отправить сразу на почту, а не на Outlook Express.
Комментарии добавил(а): АндрейК Дата: 2014-12-27
Leonid! Все работает, письма отправляются на почтовый сервер, прописанный в скрипте, а оттуда их забирает почтовый клиент, который установлен на вашем компьютере, в данном случае Outlook Eх. Никто Вам не мешает войти в свою почту через WEB-интерфейсю Вы просто путаете разные понятия.
Комментарии добавил(а): Сергей Дата: 2016-01-28
Непонятно,как объединяются эти два листинга Java как-то внутри html? Два разных файла разного расширения?