Искусство оформления сайта. Практическое пособие
Шрифт:
‹form name=“mailer” method=“post”
enctype=“text/plain” onSubmit=“(document.mailer.action += mailtoandSubject)”›
Введите ваше имя:‹br›
‹input type=“text” name=“Name” size=“ 24”
onChange=“msg(this.form)”›‹br›
Укажите тему сообщения (Заказ/Дозаказ):‹br›
‹input type=“text” name=“Subject” size=“ 24”
onChange=“msg(this.form)”›‹br›
Сюда впишите наименование товара и ваши контактные данные:‹br›
‹textarea name=“Message” cols=“ 40” rows=“ 6”
onChange=“msg(this.form)”›‹textarea›‹br›
‹input type=“submit” value=“Отправить”
onClick=“return checkIt”›
‹input type=“reset” value=“Очистить”›‹/form›
‹p›Благодарим
Заметим, что приведенный здесь пример неудачен. Вместо слова «Очистить», которое поставлено намеренно, нужно написать «Сброс» или «Очистить форму». Дело в том, что два одинаковых по длине слова на букву «О» (отправить и очистить), расположенные на двух соседствующих кнопочках послужат причиной множества досадных ошибок, отчего ваш сайт невзлюбят посетители. Примите сказанное к сведению и запишите код в вашем редакторе, после чего проверьте через опцию просмотра. Форма готова, но она пока непригодна для отправки сообщений. Для этой цели нам нужно написать команду-скрипт, которая целиком помещается в заголовке документа. Напомню, что скрипты разумнее всего писать не промеж мета-имен, а непосредственно перед закрывающим тэгом ‹/head›:
‹script language=“JavaScript”›
function checkIt {
//____________________
if (document.forms.mailer.Name.value!= “”) {
} else {
alert (“\nОбласть \ “Имя\” в форме. \n\nБудьте добры ввести свое имя.”);
document.forms.mailer.Name.focus;
return false;
}
//____________________
if (document.forms.mailer.Subject.value!= “”) {
} else {
alert (“\nОбласть \ “Тема\” в форме. \n\nБудьте добры указать тему.”);
document.forms.mailer.Subject.focus;
return false;
}
//____________________
if (document.forms.mailer.Message.value!= “”) {
} else {
alert (“\nОбласть \ “Сообщение\” в форме. \n\nБудьте добры назвать товар и контактные сведения.”);
document.forms.mailer.Message.focus;
return false;
}
//____________________
}
function msg {
document.mailer.action = “mailto: здесь ваш почтовый адрес”
mailtoandSubject = ((`?Subject=` +
document.mailer.Subject.value) + ` amp;Body=` +
document.mailer.Message.value);
}
‹/script›
Совершенно очевидно, что три «присказки», которыми открывается скрипт и которые начинаются со слов «если документ…», – это функции проверки. Стоит покупателю забыть заполнить какую-нибудь ячейку формы, как компьютер немедленно оповестит его об этом. Но поскольку у нас диалоговых окошек только три, то, наверное, использовать данные функции будет чистой воды издевательством над собой. Выбрасываем их из скрипта, оставляя только функцию отправки, помещенную последней. Однако вы еще вернетесь к этой страничке, когда вам потребуется сверстать более сложную форму. Обратим внимание и на значок //____________________. Это обозначение разделителя функций, совершенно ненужное для компьютера, так что можете и от него отказаться. Но в больших формах все же стоит пользоваться подобным разделителем, чтобы не запутаться в собственных письменах.
Но пока рассмотрим еще один способ эффективной отправки сообщений, а именно – активный e-mail. Напишите на веб-страничке свой или любой другой адрес электронной почты, после чего откройте код документа и внесите в этот адрес следующие изменения. Во-первых, выделите его как ссылку ‹a href=“mailto: ваш адрес”›Пишите, чтобы оформить заказ!‹/a›. Готово – адрес активен, хотя сейчас им неудобно пользоваться. Поэтому введем
Когда менеджер использует несколько почтовых ящиков, то неплохо направить письмо сразу на все или, по меньшей мере, некоторые из них. Для этого вносим в код дополнительные адреса: ‹a href=“mailto: ваш адрес?subject=Заказ amp;Body=Здравствуйте! Заказываю… (впишите наименование товара) под номером… (впишите №) по цене… (впишите цену) руб. в количестве… (укашите количество). Мой e-mail:… (если есть); телефон:… (если есть). amp;cc=ваш второй адрес (будет записан как копия)”›Пишите, чтобы оформить заказ!‹/a›.
Центр послепродажного обслуживания скорее всего будет расположен на том же сайте, что и собственно магазин – ведь размещать их особняком было бы в высшей степени нелепо. И тем не менее здесь обособлено два ресурса. Дело в том, что некоторые магазины не обрабатывают интернет-заказы, зато активно принимают жалобы, вопросы и пожелания через Сеть. Так что на сайте такой организации может и не вестись электронная торговля, зато здесь будет размещен центр послепродажного обслуживания, что служит проявлением особой внимательности и уважения к клиентам. Напомню, что являюсь противником форумов и гостевых книг на деловых ресурсах. Зато никто не имеет ничего против форм, которые можно быстренько заполнить и отправить куда следует, если, конечно, формы не заменяют собой адрес электронной почты, поскольку в этом случае они вредны. Кодировка такой формы в принципе сходна с кодировкой формы для формирования заказа, но присутствуют и некоторые различия. Рассмотрим их внимательно:
‹p›Доброго времени суток, уважаемый посетитель нашего магазина! Что вы думаете о нашем веб-узле, товарах, организации? Что вы считаете нужным сказать нам? Мы будем признательны за предоставленные сведения.‹/p›
‹form name=“mailer” method=“post”
enctype=“text/plain” onSubmit=“(document.mailer.action += mailtoandSubject)”›
‹p›‹strong›Тип отправляемого сообщения:‹/strong›‹/p›
‹dl›‹dd›‹input type=“radio” name=“MessageType” value=“Praise”›Благодарность ‹input type=“radio” name=“MessageType” value=“Problem”›Вопрос ‹input type=“radio” name=“MessageType” value=“Suggestion”›Предложение ‹input type=“radio” name=“MessageType” value=“Complaint”›Жалоба ‹/dd›‹/dl›
‹p›‹strong›К какой области относится ваше сообщение?‹/strong›‹/p›
‹dl›‹dd›‹select name=“Subject” size=“1”›
‹option selected›Веб-узел‹/option›
‹option›Фирма‹/option›
‹option›Товары‹/option›
‹option›Офис‹/option›
‹option›Персонал‹/option›
‹option›(Другое)‹/option›‹/select›
Другое:‹input type=“text” size=“ 26” maxlength=“ 256” name=“SubjectOther”›‹/dd›‹/dl›
‹p›‹strong›Введите текст сообщения в следующее поле:‹/strong›‹/p›
‹dl›‹dd›‹textarea name=“Comments” rows=“ 5” cols=“42”›‹/textarea›‹/dd›‹/dl›