_includes/contact.html in jekyll-theme-consulting-0.6.11 vs _includes/contact.html in jekyll-theme-consulting-0.6.12

@@ -1,33 +1,21 @@
+{%- assign form_id="contact-form" -%}
+{%- assign name_input_id="contact-name" -%}
+{%- assign email_input_id="contact-email" -%}
+{%- assign message_input_id="contact-message" -%}
+{%- assign submit_input_id="contact-submit-button" -%}
+{%- assign reset_input_id="contact-reset-button" -%}
+{%- assign recaptcha_widget_id="recaptcha-checkbox" -%}
+{%- assign onsubmit_callback="sendContactMessage" -%}
+{%- assign onreset_callback="resetContactForm" -%}
 <section id="contact" class="inverted" style="{{ include.style | default: nil }}">
     <header class="major">
         <h2>Contact Me</h2>
     </header>
     <div class="row gtr-200">
         <div class="col-6 col-12-medium">
-            <form method="post" action="#">
-                <div class="row gtr-uniform">
-                    <div class="col-6 col-12-xsmall">
-                        <input type="text" name="cta-name" id="cta-name" value="" placeholder="Name" />
-                    </div>
-                    <div class="col-6 col-12-xsmall">
-                        <input type="email" name="cta-email" id="cta-email" value="" placeholder="Email" />
-                    </div>
-                    <!-- Break -->
-                    <div class="col-12">
-                        <textarea name="cta-message" id="cta-message" placeholder="Enter your message" rows="6">Please get back to me!</textarea>
-                    </div>
-                    <!-- Break -->
-                    <div class="col-12">
-                        <ul class="actions">
-                            <li><div id="recaptcha-checkbox" ></div></li>
-                            <li><input type="submit" value="Send Message" class="primary button solid fa-envelope" /></li>
-                            <li><input type="reset" value="Reset" class="icon button fa-undo" /></li>
-                        </ul>
-                    </div>
-                </div>
-            </form>
+            {% include contact_form.html form_id=form_id name_input_id=name_input_id email_input_id=email_input_id message_input_id=message_input_id submit_input_id=submit_input_id reset_input_id=reset_input_id recaptcha_widget_id=recaptcha_widget_id onsubmit_callback=onsubmit_callback onreset_callback=onreset_callback %}
         </div>
         <div class="col-6 col-12-medium">
             <ul class="contact">
                 <li class="icon solid fa-envelope"><a href="#">{{ site.email }}</a></li>
                 <li class="icon solid fa-phone">{{ site.phone }}</li>
@@ -35,14 +23,7 @@
                 {{ site.zip_code }}, {{ site.city }}</li>
             </ul>
         </div>
     </div>
 </section>
-<script type="text/javascript">
-    var onloadCallback = function() {
-        grecaptcha.render('recaptcha-checkbox', {
-            'sitekey' : '{{ site.recaptcha.sitekey }}',
-            'theme' : 'dark'
-        });
-    };
-</script>
-<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
+
+{% include contact_script.html form_id=form_id name_input_id=name_input_id email_input_id=email_input_id message_input_id=message_input_id submit_input_id=submit_input_id reset_input_id=reset_input_id recaptcha_widget_id=recaptcha_widget_id onsubmit_callback=onsubmit_callback onreset_callback=onreset_callback %}