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

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

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

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. Обновите и проверьте страницу вашего сайта.

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