JS Animated. How to add contact form to any page

This tutorial will show you how to add contact form to any page in your JS Animated template:

Perform the following steps:

1. Locate the page which displays contact form.

2. Use your FTP to locate index.html file of that page on your server.

3. Download index.html file with contact form and download .html file of page into which you want to add contact form.

4. Open files in any Text Editor.

5. Locate Contact Form section code. Example of code:

   <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. Copy and paste the code into the page index file to add contact form.

7. Open index file of the page where contact form was originally located and copy the following line of code. It will link styles of your contact form to your new page:

   <link rel="stylesheet" href="css/mailform.css">
   

8. Save and re-upload the file to your server. Select replace option.

9. Refresh and check your site.

Feel free to check the detailed video tutorial below: