If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

JS Animated. How to add contact form to any page

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:

JS_Animated_How_to_add_contact_form_to_any_page_img1

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:

JS Animated. How to add contact form to any page