Урок 14. Как отправить e-mail сообщение со страницы сайта.

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

Главная

Рассылка

Магазин

Видео Курсы

Секрет

Услуги

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

Урок 14. Как отправить e-mail сообщение со страницы сайта.

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

Дата: 2009-06-08

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

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

А теперь давайте рассмотрим код, с помощью которого формируется эта форма:

Листинг 14.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>

Любая форма на web-странице формируется с помощью парных тегов <form> </form> , далее указывают метод передачи METHOD в данном случае используется метод POST.

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

Название полей формы: Имя, Тема и Сообщение (левый столбец) -это обычный текст, которому придается цвет и размер, вспомнить можно здесь. А вот сами поля куда вводятся значения (правый столбец таблицы) формируется с помощью тегов INPUT c атрибутами TYPE у которых должны быть обязательный значения, в данном случае это простой текст, поэтому - "text" .

В последнем ряду мы видим две кнопки, которые формируются значениями INPUT TYPE = "submit" VALUE = "Отправить"и INPUT TYPE=reset VALUE=" Сброс ". Как видите все очень просто.

Кроме того можно добавить код проверки на заполнение всех полей, добавляем на web-страницу вот такой код:

Листинг 14.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 на e-mail адрес Вашей почты, куда будут приходить заполненные формы. Данная форма содержит поля ИМЯ, ТЕМА и СООБЩЕНИЕ. Разумеется, вы можете изменить названия этих полей, а также добавить/удалить новые строчки. При этом нужно будет внести некоторые изменения в программу проверки/отправки сообщения.

Каждому полю формы присвоено определенное имя, которое задано атрибутом NAME. При нажатии на кнопку "Отправить" происходит вызов функции checkIt(). Если поле не заполнено выводиться окно с сообщением с кнопкой Ok, после нажатия на которую курсор переходит на незаполненное поле. Остальные функции проверки работают также (я разделил их вот таким комментарием //-----------, чтобы Вам было удобнее добавлять или удалять функции). Последняя функция должна содержать значение return true;. Именно это значение уведомляет об успешном окончании проверки и завершает проверку полей формы, так что решать, где его поставить - Вам.

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

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

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

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

Комментарии добавил(а): Oleg L
Дата: 2010-03-05

Обязательно ли вводить кавычки в строке: <table border=2 align=center cellspacing=1 cellpadding=2 BgColor=#000FFF> чтобы строка имела такой вид: <table border="2" align="center" cellspacing="1" cellpadding="2" BgColor="#000FFF"> ?

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

У меня после того как вставил эти скрипты вместо того чтобы отправить письмо вылезло окно настройки outlook express(Хотя почта у меня и так была настроена)название почты yandex.после настройки outlook exspress у меня, заместо того, чтобы отослать сообщение с моего сайта,также вылезает окно почты yandex где просится подтвердить отправку. В принципе пишу этот коментарий для того чтобы УЗНАТЬ так должно быть или что-то не так?

Комментарии добавил(а): АндрейК
Дата: 2010-07-09

Ответ Диме. Этот скрипт в качастве обработчика ваших сообщений испольует почтовый клиент, т.е. и так и должно быть

Комментарии добавил(а): Юрий
Дата: 2011-02-06

А как прописать код вызова страницы. Ну допустим после успешного отправления письма по умолчанию выводится текст через функцию echo , а мне надо подгрузить файл с описанием об успешной доставке письма. Вот как это сделать?

Комментарии добавил(а): Волейболистка
Дата: 2011-03-16

До сих пор все понимала и все хорошо. А вот тут стопр, причем сильный. ОГРОМНАЯ просьба кто-нибыть напишите пример куда вставляются теги из Листинга 14.2. У меня полная ерунда получается. Заранее спасибо!

Комментарии добавил(а): Георгий
Дата: 2012-01-24

У меня почему-то только латиница читается, вместо кириллицы каракули или коды. Что я сделал не так?

Комментарии добавил(а): Дмитрий
Дата: 2012-08-20

Оч. хороший урок

Комментарии добавил(а): Илья
Дата: 2012-11-30

У меня тоже только латиница читается. Что нужно сделать чтобы кириллица была

Комментарии добавил(а): АндрейК
Дата: 2012-12-03

Если у вас читается только латиница,скорее всего проблема с кодировкой веб-страницы. Пропишите жестко между тегами <head> русскоязычную кодировку это UTF-8 или WINDOWS-1251

Комментарии добавил(а): Виталий
Дата: 2014-09-19

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

Комментарии добавил(а): АндрейК
Дата: 2014-09-19

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

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

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

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

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

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

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

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

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

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

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

Домены

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

Google Adsense

Навигация

Уроки HTML

Инструменты

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

Украшения

Сайт от А до Я

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

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

Охрана труда

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

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

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

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

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

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

Видео Курсы

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

Заработай в Интернете
и осуществи свою МЕЧТУ
"Как?"
Узнать сейчас >>>

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

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

Статистический отчет Форма № 7-травматизм "Сведения о травматизме на производстве и профессиональных заболеваниях"

Какие отчеты необходимо сдать Специалисту по охране труда за год

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

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

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

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

Архив

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 - 2019