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

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

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

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

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. Как добавить контактную форму на любую страницу