Categories

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

JS Animated. Как добавить контактную форму на любую страницу

Vicki Hayes Февраль 4, 2016
Rating: 5.0. From 2 votes.
Please wait...
JS Animated. Как добавить контактную форму на любую страницу

Из этого туториала Вы узнаете, как добавить контактную форму на любую страницу в вашем JS-анимированном шаблоне:

JS_Animated_How_to_add_contact_form_to_any_page_img1

Следуйте таким инструкциям:

  1. Найдите страницу, которая отображает контактную форму.

  2. Используя FTP, найдите на сервере файл index.html страницы, в которую Вы хотите внести изменения.

  3. Скачайте файл index.html с контактной формой и файл .html страницы, на которую Вы хотите добавить контактную форму.

  4. Откройте файлы в любом редакторе кода.

  5. Найдите код контактной формы. Например:

    <section class="well1 well1__ins">
                <div class="container">
                    <h4 class="h4_line">contact us <span class="line"></span></h4>
    
                    <h2>contact information</h2>
    
                    <div class="row off3 ">
                        <form class='mailform' method="post" action="bat/rd-mailform.php">
                            <input type="hidden" name="form-type" value="contact"/>
                            <fieldset>
                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <label data-add-placeholder="">
                                        <input type="text"
                                               name="name"
                                               placeholder="Your Name"
                                               data-constraints="@LettersOnly @NotEmpty"/>
                                    </label>
                                </div>
                                <div class="col-md-6 col-sm-12 col-xs-12">
                                    <label data-add-placeholder="">
                                        <input type="text"
                                               name="email"
                                               placeholder="Your Email"
                                               data-constraints="@Email @NotEmpty"/>
                                    </label>
                                </div>
                                <div class="col-md-6 col-sm-12 col-xs-12">
                                    <label data-add-placeholder="">
                                        <input type="text"
                                               name="phone"
                                               placeholder="Your Phone Number"
                                               data-constraints="@Phone"/>
                                    </label>
                                </div>
    
                                <div class="col-md-12 col-sm-12 col-xs-12 off">
                                    <label class="textarea" data-add-placeholder="">
                                        <textarea name="message" placeholder="Your Message"
                                                  data-constraints="@NotEmpty"></textarea>
                                    </label>
                                </div>
    
                                <div class="col-md-12 col-sm-12 col-xs-12 off2">
                                    <div class="mfControls">
                                        <button class="btn btn-sm" type="submit">Send</button>
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </section>
    </code>
    
  6. Скопируйте и вставьте этот код в index-файл страницы, для того чтобы добавить на неё контактную форму.

  7. Откройте index-файл страницы, где изначально отображалась контактная форма, и скопируйте следующую строку кода. Эта строка добавит стили для контактной формы на новой странице:

    <link rel="stylesheet" href="css/mailform.css">
    
  8. Сохраните и загрузите файл на сервер. Замените существующий файл.

  9. Обновите и проверьте страницу вашего сайта.

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

JS Animated. Как добавить контактную форму на любую страницу
Эта запись была размещена в JS Animated туториалы и помечена как contact, form, HTML, page. Добавьте в закладки постоянную ссылку.

Submit a ticket

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

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