Особенности редактирования шаблона Форма обратной связи на сайтах uCoz

В одной из прошлых статей я рассказывала как работать с модулем Почтовые формы на uCoz. Сегодня я хочу подробнее коснуться вопроса редактирования шаблона Форма обратной связи в модуле Почтовые формы на uCoz. Именно с помощью более “глубокого” редактирования через шаблон HTML, вы можете создавать свой дизайн формы, а также интегрировать сторонние скрипты.

Структура шаблона Форма обратной связи на uCoz

Все формы модуля Почтовые формы на сайтах uCoz имеют по своей структуре являются таблицами. В этой таблице две колонки, а количество строк соответствует количеству полей формы. Если рассматривать пример моей прошлой статьи – Модуль Почтовые формы на uCoz – визуально форма выглядит так:

Что касается HTML кода, то структурно шаблон имеет следующий вид:

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

Каждое поле (строка формы)состоит из двух ячеек:

<tr> 
  <td>Название поля:</td> 
   
  <td><!--непосредственно само поле для ввода данных--><input type="text" name="f2" size="30" style="width:95%;" maxlength="70"> 
  </td> 
  </tr>

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

Как отредактировать шаблон формы обратной связи на uCoz

Прежде, чем приступить к редактированию шаблона формы, важно учитывать следующее:

1. Всем полям обратной связи система uCoz самостоятельно присваивает имя.

   <input type="text" name="f2" size="30" style="width:95%;" maxlength="70">

   В этой строке имя – f2. Записано как name=”f2″. Вот эти имена должны остаться обязательно! Иначе форма будет работать некорректно, или не будет работать вообще.

2. В любой форме обратной связи модуля Почтовые формы по умолчанию присутствуют уже два поля, которые нельзя удалить. Это e-mail (name=”f1″) и Тема письма (name=”f2″). Для этих двух полей прописаны специальные скрипты: для e-mail – скрипт проверки правильности написания электронной почты; “тема письма” всегда будет отображаться в теме письме, которое придет вам, как ответ о заполнении формы Пользователем.

Как лучше отредактировать шаблон формы обратной связи

1. Создать Форму обратной связи со всеми необходимыми полями стандартным способом.
2. Скопировать шаблон формы в сторонний html-редактор
3. С сохранением всех присвоенных имен (name) полей внести необходимые изменения: стили, структуру, скрипты.
4. Скопировать новый шаблон в поле шаблона формы и нажать “Сохранить”

Например, я могу перевести всю Форму в дивы и удалить таблицу. Получится у меня следующее:

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