Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Главная

Рассылка

Магазин

Видео Курсы

Секрет

Услуги

Сегодня: Добавить в Избранное Написать Автору Обмен валют Оплата сервисов

Как отправить E-mail сообщение с сайта?

Автор: Андрей Краснокутский

Дата: 2010-06-24

Отправляем письмо из E-mail формы.

Для удобства посетителей сайта, чтобы быстро отправить письмо по электронной почте, например Администратору Сайта, совсем не обязательно набирать его в почтовой программе (почтовом клиенте), а можно это сделать, воспользовавшись формами на web-странице.

В прошлом уроке "Формы на web-страницах сайта" мы разобрались с теоритической частью органицации различных форм на сайте. Сегодня давайте напишем реальный код для формы отправки сообщений с сайта.

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

Теорию мы разбирали с Вами в прошлом уроке, если есть непонятные моменты вернитесь назад повторите. Приступаем сразу к коду в Листинге 1 приведен готовый код формы отправки почтовых сообщений:

Листинг 1.

<FORM NAME="mailer" METHOD="post" ACTION="" ENCTYPE="text/plain" onSubmit="(document.mailer.action += mailtoandSubject)">
<table border=2 align=center cellspacing=1 cellpadding=2 BgColor=#000FFF>
<tr><td><FONT size="2" color="#FFFFFF">Имя:</font></td>
<td><INPUT TYPE="text" NAME="Name" size="24" onChange="msg(this.form)"></td></tr>
<tr><td><FONT size="2" color="#FFFFFF">Тема:</font></td>
<td><INPUT TYPE="text" NAME="Subject" size="24" onChange="msg(this.form)"></td></tr>
<tr><td><FONT size="2" color="#FFFFFF">Сообщение:</font></td>
<td><TEXTAREA NAME="Message" COLS=40 ROWS=6 onChange="msg(this.form)"></TEXTAREA></td></tr>
<tr><td colspan=2 align=center><INPUT TYPE = "submit" VALUE = "Отправить" ONCLICK="return checkIt()">
<INPUT TYPE=reset VALUE=" Сброс "></td></tr></table>
</FORM>

Для простоты форматирования, поля формы заключены в таблицу. Как создаются таблицы мы уже тоже говорили посмотреть можно в уроке Таблицы. Теория. и в следующем уроке Таблицы. Практика. Иногда для упорядочения полей формы вместо таблиц используют теги <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-странице:

Что бы изменить фоновый цвет внутри таблицы, поменяйте шестнадцатеричное значением цвета в парамете: BgColor=#000FFF Листинг 1.

Копируйте код Листнга 1 и Листинга 2, изменяйте на свои значения и вставляйте на свои web-страницы.

Удачи.

Читайте так же:

Закачиваем сайт на Хостинг. Ура!!! Наш сайт заработал в Интернете.

Как заработать в Интернете на продаже ссылок?

Использование SMS Сообщения в Интернет Бизнесе. Как организовать. Какие Прибыльные Модели бизнеса Вы сможете построить.

Форматы изображений для сайта.

Как заработать в Интернете не имея своего сайта?

Покупаем и Регистрируем Доменное имя для сайта.

Просмотров: 114975

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Комментарии добавил(а): Юлия
Дата: 2010-07-26

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

Комментарии добавил(а): АндрейК
Дата: 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? Два разных файла разного расширения?

Добавить Ваш комментарий:

Разработка полного пакета документов по Охране труда под "КЛЮЧ"
с учетом специфики работы вашей организации. СУОТ.
Дистанционное сопровождение организаций по Охране труда.
Проведение Специальной оценки условий труда (СОУТ).

Новости сайта

12.05.2015
Новая услуга! Изготовление графических элементов. Заказать: иллюстрации для книг, коллажи, подарочные и поздравительные открытки, 3D обложки, фантастические и сюрреалистические работы, зарисовки, баннеры и еще много, многое другое, быстро и дешево.

05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"

Реклама в Почтовых Рассылках.

Почтовая рассылка

Новинка!

Как реально заработать
в Интернете?

"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense

Навигация

Уроки HTML

Инструменты

Шаблоны сайтов

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

Почтовая Рассылка

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете

Как заработать деньги в Интернете?
Создай свой ИнфоБизнес

Хотите заработать?
2-х Уровневая
Партнерская программа!
Присоединяйтесь.

Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты

Проверить аттестат

Проверено Z-PAYMENT

Принимаем Z-PAYMENT

www.megastock.ru

HTML | CSS | Статьи | Инструменты | Шаблоны | Книги | Украшения | Сайт | Заработок | Обман
PHP | Услуги | Скрипты | Рассылка | SEO | jQuery | СОУТ | Online | Секрет| Написать Автору

Разрешается полное или частичное копирование материалов сайта с обязательным
указанием ссылки на автора материала и источник - www.LuksWeb.ru

Copyright Андрей Краснокутский © 2008 - 2018