Categories

Новые шаблоны

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

Norman Fisher Апрель 25, 2014
Rating: 5.0. From 1 vote.
Please wait...

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

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

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

    jsanimated_new_field_to_tmform_adding_1

    Ниже приведен пример кода поля “Телефон” (“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. Теперь вы можете протестировать ваш сайт на удаленном сервере, чтобы проверить, как работают новые поля контактной формы.

    jsanimated_new_field_to_tmform_adding_2

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

JS Animated. How to add contact form field (based on TMForm)
Эта запись была размещена в JS Animated туториалы и помечена как add, contact, field, form, new, TMForm. Добавьте в закладки постоянную ссылку.

Submit a ticket

Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов

Чат
We help you to choose the right product.