Делаем свою форму отправки e-mail сообщений на Narod.ru

В этом совете описано, как сделать почтовую форму на хостинге Narod.ru. У пользователя не будет открываться почтовый клиент на компьютере. Все данные отправятся вам на e-mail.

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

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

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

Итак, смотрим:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Отправка e-mail сообщения</title>

<script language="JavaScript">
function isValidName ( str ) {
if (str == "") {
alert ("Введите Ваше имя");
return false;
}
return true;
}
function isValidEmailAddress ( str ) {
if (str == "") {
alert ("Введите свой электронный адрес");
return false;
}
else if ( str.indexOf ( " " , 0) != -1 || str. indexOf ( "@" ,3 ) == -1 || str. indexOf ( "." , 6) == -1 ) {
alert("Ошибка: " + str + ". Вы уверены, что это ваш электронный адрес?" );
return false;
}
return true;
}
function isValidURL ( str ) {
if (str == "") {
alert ("Внесите, пожалуйста, адрес сайта");
return false;
}
else if ( str.indexOf ( " " , 0) != -1 || str.indexOf ( "http://" , 0) == -1 || str.indexOf ( "." , 8) == -1 ) {
alert("Ошибка: " + str + ". Вы уверены, что это адрес сайта?" );
return false;
}
return true;
}
function isValidTema ( str ) {
if (str == "") {
alert ("Внесите, пожалуйста, тему сообщения");
return false;
}
return true;
}
function isValidNotes ( str ) {
if (str == "") {
alert ("Внесите, пожалуйста, текст сообщения");
return false;
}
return true;
}
function checkAll () {
form = document.forms[0];
if (!isValidName(form.elements[0].value)) {form.elements[0].focus(); return false;}
if (!isValidEmailAddress(form.elements[1].value)) {form.elements[1].focus(); return false;}
if (!isValidURL(form.elements[2].value)) {form.elements[2].focus(); return false;}
if (!isValidTema(form.elements[3].value)) {form.elements[3].focus(); return false;}
if (!isValidNotes(form.elements[4].value)) {form.elements[4].focus(); return false;}
return true;
}
</script>

</head>
<body bgcolor="990000" text="CCFFFF" topmargin="5">
<br><br>
<form ENCTYPE="multipart/form-data" action="http://narod.yandex.ru/send-poll.xhtml" method=POST>
<table border="0" cellspacing="0" cellpadding="1" align="center" width="20%">
<tr>
<td align="center" colspan="2">Отправка E-mail сообщения<br><br></td>
</tr>
<tr>
<td align="left" width="39%">Ваше имя: *</td>
<td align="right"><input type="text" name="a[Ваше имя]"></td>
</tr>
<tr>
<td align="left">Ваш e-mail: *</td>
<td align="right"><input type="text" name="a[Ваш e-mail]"></td>
</tr>
<tr>
<td align="left">Ваш URL: *</td>
<td align="right"><input type="text" name="a[Ваш URL]" value="http://"></td>
</tr>
<tr>
<td align="left">Тема сообщения: *</td>
<td align="right"><input type="text" name="a[Тема сообщения]"></td>
</tr>
<tr>
<td align="center" colspan="2">Текст сообщения: *</td>
</tr>
<tr>
<td align="center" colspan="2"><textarea rows=8 cols=55 name="a[Текст сообщения]"></textarea></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" onClick="return checkAll()" value="Отправить" style="background:CCFFFF; font-size: 12px;">
<input type="reset" value="Очистить" style="background:CCFFFF; font-size: 12px;"></td>
</tr>
<tr>
<td align="center" colspan="2"><br>Поля, помеченные *, являются обязательными для заполнения</td>
</tr>
<tr>
<td colspan=2><br>
<input type=hidden name="email" value="mymail@narod.ru">
<input type=hidden name="title" value="Отправка e-mail сообщения">
<input type=hidden name="login" value="mysite">
<input type=hidden name="backlink" value="http://elovkov78.narod.ru.ru">
<input type=hidden name="backtext" value="На главную страницу сайта Elovkov78">
<input type=hidden name="mess" value="Спасибо, Ваше письмо было отправлено">
<input type=hidden name="yourans" value="Ваши ответы:">
<input type=hidden name="vari" value="4">
<input type=hidden name="forceforward" value="Да"></td>
</tr>
</table>
</form>
</body>
</html>

Пояснения:

- Код Javascript - это проверка заполнения полей.
- Алерты - сообщения пользователю, что графы не заполнены, как полагается. Меняйте текст на свой, по желанию

- На последние несколько строк в скрипте нужно особо обратить внимание.
Вот они:

if (!isValidName(form.elements[0].value)) {form.elements[0].focus(); return false;}
if (!isValidEmailAddress(form.elements[1].value)) {form.elements[1].focus(); return false;}
if (!isValidURL(form.elements[2].value)) {form.elements[2].focus(); return false;}
if (!isValidTema(form.elements[3].value)) {form.elements[3].focus(); return false;}
if (!isValidNotes(form.elements[4].value)) {form.elements[4].focus(); return false;}

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

Это у нас проверка имени:

if (!isValidName(form.elements[0].value)) {form.elements[0].focus(); return false;}

Проверка e-mail:.

if (!isValidEmailAddress(form.elements[1].value)) {form.elements[1].focus(); return false;}

Проверка URL:

if (!isValidURL(form.elements[2].value)) {form.elements[2].focus(); return false;}

Проверка темы сообщения:

if (!isValidTema(form.elements[3].value)) {form.elements[3].focus(); return false;}

Проверка заполнения текста сообщения:

if (!isValidNotes(form.elements[4].value)) {form.elements[4].focus(); return false;}

Причем очередность строк имеет значение: именно в таком порядке расположены поля в форме!

- Сейчас все поля помечены * . Это означает, что они обязательны для заполнения. Убираем, если не нужно.

- Эту строчку ни в коем случае не изменяйте. В противном случае форма работать не будет:

- Ваше имя, Ваш e-mail, Ваш URL, Тема сообщения - это названия полей в форме.

- "a[Ваше имя]", "a[Ваш e-mail]" и т.д. - это текстовое поле ввода самого сообщения. Менять можно только выделенное цветом.

- Добавляем строчку, чтобы, собственно, работал скрипт:

onClick="return checkAll()

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

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

- Поле, указывающее имя вашего сайта на Narod.ru или Ваш логин. Например, сайт называется http://tvoyweb.narod.ru/, значит вместо mysite надо подставить tvoyweb:

- Скрытое поле, указывающее адрес, куда посетитель попадет после успешной отправки:

- Скрытое поле с текстом ссылки. Если вы не установили автоматическое перенаправление, то после отправки пользователь попадет на страницу, где сможет увидеть весь текст, который он ввел. На этой же странице будет и эта ссылка:

- Этот текст отобразится после успешной отправки сообщения . Если, конечно, вы не выберите автоперенаправление:

- Этот заголовок будет подставлен перед текстом введенным пользователем, после успешной отправки сообщения:

- Поле, указывающее, какой шаблон используется. Так как шаблонов анкет всего три плюс четвертый - собственный, то оставляем это поле без изменения. Число "4" означает, что Вы используете шаблон со своим дизайном:

- Здесь вы определяете, использовать автоперенаправление или нет. value="Да" - использовать, value="" - не использовать:

- И последнее. Если хотите, можно добавить в форму и возможность отправки пользователем файла. После строчки:

Вставьте:

<tr> <td align="left">Отправить файл:</td> <td align="right"><input type=file name="attach" size="6"></td> </tr>

Теперь нужно опубликовать эту форму, то есть создать на сайте такую страницу. Для этого зайдите в свою «Мастерскую» на сайте, в раздел «Анкеты». Выберите любой шаблон анкеты и пропишите имя файла страницы с формой. Раз это будет страница отправки e-mail сообщения, то назовите ее, например, sendmail.html.

Заполните одно из полей вопросов анкеты: напишите все что угодно - это не имеет значения. Главное, чтобы хотя бы одно поле было заполнено. Так же обязательно заполните поле - «Адрес E-mail, куда будет отправлен ответ на анкету». Здесь обязательно указываете свой почтовый адрес, на который будут приходить ответы. Сохраните то, что получилось.

Чтобы анкета заработала нужно пройти все этапы создания шаблона до конца. Пока вам не предложат «перейти к созданию других страниц» или «перейти в раздел Управление файлами».

Откройте в браузере получившуюся шаблонную страницу и протестируйте отправку. Это нужно, чтобы на указанный вами адрес пришло сообщение, в котором будет ссылка для подтверждения и активизации e-mail адреса. Вы обязательно должны пройти по этой ссылке.

Далее заходите в раздел «Управление файлами» в «Мастерской». Найдите ваш файл sendmail.html, жмите кнопку «свойства» справа от названия файла. В открывшемся окне выберите «Текстовый редактор».

Там удаляйте весь HTML код и вставляйте код вашей готовой страницы с формой (то, что мы рассматривали выше). Сохраните изменения. Ваша страница с формой отправки e-mail сообщений готова.