JS Animated. Как добавить в контактную форму сайта дополнительные поля

В этом уроке мы покажем, как в JS анимированном шаблоне добавить в контакт форму дополнительные поля.

JS Animated. Как добавить в контактную форму сайта дополнительные поля

Например, контактная форма в Вашем JS анимированном шаблоне выглядит так:

И Вы хотите добавить туда новое поле с названием “Fax” (факс), которое идет прямо после поля “Telephone”(телефон).

1. Прежде всего откройте через Dreamweaver файл .html , где находятся формуляр.
2. Нажмите на Split (Разделение).
3. Чтобы добавить новое поле, скопируйте код одного из существующих полей. Нажмите на поле “Telephone”, чтобы выбрать его код.
4. Скопируйте код. Например

<label class="phone">

<input type="tel" value="Telephone:">

<br class="clear">

<span class="error error-empty">*This is not a valid phone number.</span><span class="empty error-empty">*This field is required.</span> </label>

5. И вставьте его прямо после выбранного куска (т.к. новое поле “Fax” стоит прямо после поля “Telephone”)
6. Сейчас у Вас 2 одинаковых поля “Telephone”, поэтому все, что Вам нужно сделать – это поменять название на fax во втором случае:

<label class="fax">

<input type="fax" value="Fax:">

<br class="clear">

<span class="error error-empty">*This is not a valid Fax number.</span><span class="empty error-empty">*This field is required.</span> </label>

7. Мы не хотим, чтобы поле fax, поэтому меняем его на

<label class="fax">

<input type="fax" value="Fax:">

<br class="clear">

</label>

8. Сохраните изменения в .html файле.
9. Перейдите в папку “js” и откройте файл forms.js в Dreamweaver (или просто кликните на нем в Dreamweaver в панели исходного кода).
10. Убедитесь в наличии таких строк (в противном случае нужно их добавить путем дублирования идентичных строк для полей, которые уже существуют и поменять там название на “fax”) :

(приблизительно строка 25)

    
  ".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},

(приблизительно строка 108)

   
 
  fax:_.getValFromLabel($('.fax',_.form)),
  

11. Чтобы активировать форму поменяйте символ # на Ваш е-мейл адрес.
12. Откройте файл mailhandler.php в папке “bat” и убедитесь, что есть там такие строки (в противном случае нужно их добавить путем дублирования идентичных строк для полей, которые уже существуют и поменять там название на “fax”):

   

if($_POST['fax']!='nope'){ 

    $messageBody .= '<p>Fax Number: ' . $_POST['fax'] . '</p>' . "\n";

    $messageBody .= '<br>' . "\n";

}

(где можно изменить текст Fax Number (номер факса), если хотите получать другой текст в сообщении)

13. Загрузите содержимое папки ‘site’ на FTP.
14. Попытайтесь послать е-мейл, чтобы проверить работает ли второе поле.

Пожалуйста, ознакомьтесь с детальным, обучающим видео ниже:

JS Animated. Как добавить в контактную форму сайта дополнительные поля