В одной из прошлых статей я рассказывала как работать с модулем Почтовые формы на uCoz. Сегодня я хочу подробнее коснуться вопроса редактирования шаблона формы обратной связи в модуле Почтовые формы на uCoz. Именно с помощью более “глубокого” редактирования через шаблон HTML, вы можете создавать свой дизайн формы, а также интегрировать сторонние скрипты.
Digital агентство Батурина Андрея поможет вам воплотить самые смелые идеи и создать сайт любой сложности. На сайте webevolution.ru вы найдете перечень всех услуг по созданию и продвижению сайта.
Структура шаблона Формы обратной связи
Все формы модуля Почтовые формы на сайтах uCoz имеют по своей структуре являются таблицами. В этой таблице две колонки, а количество строк соответствует количеству полей формы. Если рассматривать пример моей прошлой статьи – Модуль Почтовые формы на uCoz – визуально форма выглядит так:
Что касается HTML кода, то структурно шаблон имеет следующий вид:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <table border="0" width="100%" id="table1" cellspacing="1" cellpadding="2"> <tr> <td width="35%">E-mail отправителя <font color="red">*</font>:</td> <td><input ENGINE="text" name="f1" size="30" style="width:95%;" maxlength="70"> </td> </tr> <tr> <td>Тема письма:</td> <td><input type="text" name="f2" size="30" style="width:95%;" maxlength="70"> </td> </tr> <tr> <td>Текст сообщения <font color="red">*</font>:</td> <td><textarea rows="7" name="f3" cols="30" style="width:95%;"></textarea> </td> </tr> <tr> <td>Как Ваши дела? <font color="red">*</font>:</td> <td><input type="text" name="f4" size="30" style="width:95%;" maxlength="70"> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="Отправить сообщение"></td> </tr> </table> |
Каждое поле (строка формы)состоит из двух ячеек:
1 2 3 4 5 6 | <tr> <td>Название поля:</td> <td><!--непосредственно само поле для ввода данных--><input type="text" name="f2" size="30" style="width:95%;" maxlength="70"> </td> </tr> |
При знании HTML вы можете редактировать каждое поле и всю форму как угодно, добавлять стили, даже поместить ячейки в дивы, а не в таблицу.
Как отредактировать шаблон формы обратной связи на uCoz
Прежде, чем приступить к редактированию шаблона формы, важно учитывать следующее:
- Всем полям обратной связи система uCoz самостоятельно присваивает имя.1<input type="text" name="f2" size="30" style="width:95%;" maxlength="70">
В этой строке имя – f2. Записано как name=”f2″. Вот эти имена должны остаться обязательно! Иначе форма будет работать некорректно, или не будет работать вообще.
- В любой форме обратной связи модуля Почтовые формы по умолчанию присутствуют уже два поля, которые нельзя удалить. Это e-mail (name=”f1″) и Тема письма (name=”f2″). Для этих двух полей прописаны специальные скрипты: для e-mail – скрипт проверки правильности написания электронной почты; “тема письма” всегда будет отображаться в теме письме, которое придет вам, как ответ о заполнении формы Пользователем.
Как лучше отредактировать шаблон формы обратной связи
- Создать Форму обратной связи со всеми необходимыми полями стандартным способом.
- Скопировать шаблон формы в сторонний html-редактор
- С сохранением всех присвоенных имен (name) полей внести необходимые изменения: стили, структуру, скрипты.
- Скопировать новый шаблон в поле шаблона формы и нажать “Сохранить”
Например, я могу перевести всю Форму в дивы и удалить таблицу. Получится у меня следующее:
1 2 3 4 5 6 7 8 9 10 | <div><div style="width:30%; float:left"> E-mail отправителя <font color="red">*</font>:</div><input type="text" name="f1" size="30" style="width:65%;" maxlength="70"></div> <div><div style="width:30%; float:left">Тема письма:</div><input type="text" name="f2" size="30" style="width:65%;" maxlength="70"> </div> <div><div style="width:30%; float:left">Текст сообщения <font color="red">*</font>:</div><textarea rows="7" name="f3" cols="30" style="width:65%;"></textarea> </div> <div><div style="width:30%; float:left">Как Ваши дела? <font color="red">*</font>:</div><input type="text" name="f4" size="30" style="width:65%;" maxlength="70"> </div> <div><center><input type="submit" value="Отправить сообщение"></center></div> |
К стати, лично мне форму в дивах редактировать намного проще.
Эта статья написана для того, чтобы было в дальнейшем легче объяснить, как в Форму обратной связи на uCoz добавлять скрипты. Добавлять можно любые javascript, но при этом обязательно нужно учитывать особенности строения Формы обратной связи на сайтах uCoz.