Why isn't my custom contact form functioning properly?

[haseebJoiya]

My contact form is not working. Please check the preview link of site https://3e2so7ca18kt4mlr-73156133209.shopifypreview.com It is not working. 

<section class="row contact" id="contact">
    <!-- ================== GOOGLE MAP (Change data-lat & data-lon values) ====================== -->
    <!-- TIP : To change the map style, Visit /js/plugins/google-map.js -->
    <div id="mapBox" class="row m0" data-lat="37.3818288" data-lon="-122.0636325" data-zoom="15"></div>
    <!-- Flippable Contact Box -->
    <div class="flip-box-container row m0">
        <div class="flip-box row m0 wow fadeIn">
            <!-- Contact Address (front Side) -->
            <div class="row contact-box flip-box-part">
                <h2>{{ section.settings.heading1 }}</h2>
                <ul class="nav">
                    <li>
                        <i class="fa fa-map-marker"></i>523 Sylvan Ave, 5th Floor <br>
                        Mountain View, CA 94041USA
                    </li>
                    <li>
                        <i class="fa fa-phone"></i>+1 (234) 56789 <br>
                        +1 987 654 3210
                    </li>
                    <li><i class="fa fa-envelope"></i>support@watchland.com</li>
                </ul>
                <button class="flip-contact-box btn btn-block">{{ section.settings.button1 }}</button>
            </div>
            <!-- Contact Form (back Side) -->
            <div class="row contact-form flip-box-part">
                <a href="javascript&colon;void(0);" class="js-close-flip">&times;</a>
                <!-- Contact Form Starts here -->

                    <div class="row">
                        <div class="form-group col-sm-6">
                            <input
                    type="text"
                    name="{{ input_name }}"
                    id="{{ input_id }}"
                    placeholder="Name"
                    class="input"
                    value=""
                    {{ required }}
                  >
                        </div>
                        <div class="form-group col-sm-6">

                  <input
                    autocomplete="email"
                    type="email"
                    id="{{ input_id }}"
                    class="input{% if form.errors contains 'email' %} has-errors{% endif %}"
                    name="contact[email]"
                    spellcheck="false"
                    autocapitalize="off"
                    placeholder="Email"
                    value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
                    required
                    {% if form.errors contains 'email' %}
                      aria-invalid="true"
                      aria-describedby="ContactForm-email-error"
                    {% endif %}
                  >
                        </div>
                    </div>
                    <div class="form-group">
                         <input
                    type="text"
                    name="{{ input_name }}"
                    id="{{ input_id }}"
                    placeholder="Subject"
                    class="input"
                    value=""
                    {{ required }}
                  >
                    </div>
                    <div class="form-group">
                                          <textarea
                    rows="5"
                    name="{{ input_name }}"
                    id="{{ input_id }}"
                    class="input"
                    placeholder="Message"
                    {{ required }}
                  ></textarea>
                    </div>
                  <button type="submit" class="contact-form__button btn btn-block ">
                    {{ 'contact.form.submit' | t }}
                  </button>
                    <div
                        id="js-contact-result"
                        data-success-msg="Form submitted successfully."
                        data-error-msg="Oops. Something went wrong."
                    ></div>

                <!-- // End Contact form -->
            </div>
            <!-- // End back Side -->
        </div>
    </div>
    <!-- // End Contact Box -->
</section>
{% schema %}
{
    "name": "contact-box",
    "settings": [
        {
            "type": "text",
            "id": "heading1",
            "label": "Heading 1",
            "default": "get in touch"
        },
        {
            "type": "url",
            "id": "link1",
            "label": "Link 1"
        },
        {
            "type": "text",
            "id": "link1text",
            "label": "Link 1 text",
            "default": "×"
        },
        {
            "type": "text",
            "id": "button1",
            "label": "Button 1",
            "default": "contact us"
        },
        {
            "type": "text",
            "id": "button2",
            "label": "Button 2",
            "default": "Send Message"
        }
    ],
    "presets": [
        {
            "name": "contact-box"
        }
    ]
}
{% endschema %}