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

Этот туториал покажет, как добавить дополнительное поле в контактную форму для шаблонов JS Animated со скриптом TMForms.

1. Откройте .html файл, который содержит код вашей контактной формы программой Dreamweaver или другим редактором HTML кода. Активируйте режим Split view. В этом туториале мы добавим 2 дополнительных поля “Факс” (“Fax”) и “Организация” (“Organization”) на основе стандартного кода контактной формы.

2. Для того, чтобы добавить поле “Факс” (“Fax”), выберите поле “Телефон” (“Phone”), так как оно имеет похожий код, и в окне кода выделиться необходимая для редактирования часть.

   

   Ниже приведен пример кода поля “Телефон” (“Phone”):

   <label class="phone">
       <input type="text" placeholder="Phone:" data-constraints="@Required @JustNumbers"/>
       <span class="empty-message">*This field is required.</span>
       <span class="error-message">*This is not a valid phone.</span>
   </label>
   

   Скопируйте этот код и вставьте его после закрывающегося тега </label>, чтобы поле “Факс” (“Fax”) находилось под полем “Телефон” (“Phone”).

   Замените слово “phone” на слово “fax” во всех строчках нового кода:

   <label class="fax">
       <input type="text" placeholder="Fax:" data-constraints="@Required @JustNumbers"/>
       <span class="empty-message">*This field is required.</span>
       <span class="error-message">*This is not a valid fax number.</span>
   </label>
   

3. Чтобы добавить еще одно поле “Организация” (“Organization”), выделите код для поля “Имя“ (“Name“), который может выглядеть следующим образом:

   <label class="name">
       <input type="text" placeholder="Name:" data-constraints="@Required @JustLetters" />
       <span class="empty-message">*This field is required.</span>
       <span class="error-message">*This is not a valid name.</span>
   </label>
   

   Скопируйте этот код и вставьте его после закрывающегося тега </label>, чтобы поле “Организация” (“Organization”) находилось под полем “Имя“ (“Name“).

   Замените слово “name“ на слово “organization” во всех строчках нового кода:

   <label class="organization">
       <input type="text" placeholder=" Organization:" data-constraints="@Required @JustLetters" />
       <span class="empty-message">*This field is required.</span>
       <span class="error-message">*This is not a valid organization.</span>
   </label> 
   

   Сохраните изменения в файле .html.

4. Откройте файл TMForm.js из папки ‘js’ и найдите строчку 121-125, которая содержит приведенный ниже скрипт:

   name:getValue($('label.name input'))
   ,email:getValue($('label.email input'))
   ,phone:getValue($('label.phone input'))
   ,fax:getValue($('label.fax input'))
   ,state:getValue($('label.state input'))
   

   Хотя в этом скрипте уже есть необходимые строчки для полей “факс” (“fax”) и “штат” (“state”), они обычно не используются в стандартной контактной форме. Нам необходимо добавить еще одну подобную строчку для поля “организация” (“оrganization”).

   Скопируйте одну из строчек данного скрипта, например, для поля “email”:

   , email:getValue($('label.email input'))
   

   Вставьте новую строчку под скопированной и замените ‘email’ на “оrganization”, чтобы в результате получить скрипт:

       
       name:getValue($('label.name input'))
       ,email:getValue($('label.email input'))
       ,phone:getValue($('label.phone input'))
       ,fax:getValue($('label.fax input'))
       ,organization:getValue($('label.organization input'))
       ,state:getValue($('label.state input'))
       ,message:getValue($('label.message textarea'))
     

   Прокрутите вниз и замените символ # на ваш email адрес в следующем скрипте:

    
   $(window).load(function(){
       $('#form').TMForm({
       ownerEmail:'#' 
       })
   })
   

   Сохраните изменения.

5. Откройте MailHandler.php из папки ‘bat’. В этом файле тоже есть необходимые строчки для полей “факс” (“fax”) и “штат” (“state”). Для поля “организация” (“оrganization”) скопируйте и вставьте код поля “имя“ (“name“):

    
   if($_POST['name']!='false'){
       $messageBody .= '<p>Visitor: ' . $_POST["name"] . '</p>' . "\n";
       $messageBody .= '<br>' . "\n";
   }
   

   И замените “name“ на “оrganization”, чтобы результат получился следующим:

    
   if($_POST['organization']!='false'){
       $messageBody .= '<p>Organization: ' . $_POST["organization"] . '</p>' . "\n";
       $messageBody .= '<br>' . "\n";
   }
   

   Сохраните изменения.

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

   

Вы также можете воспользоваться детальным видео туториалом: