From bfaa44e7a1dede22664c9d560cd50167f12c3768 Mon Sep 17 00:00:00 2001
From: Jerome Lachaud <jerome.lachaud@gmail.com>
Date: Tue, 17 Feb 2015 17:03:24 +0100
Subject: [PATCH] Contact form is now powered by formspree, with the option to
 switch back to original PHP form

---
 _config.yml                   |  3 +++
 _includes/contact_static.html | 51 +++++++++++++++++++++++++++++++++++
 _includes/js.html             |  6 ++++-
 _layouts/default.html         |  6 +++++
 js/contact_me_static.js       | 23 ++++++++++++++++
 5 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 _includes/contact_static.html
 create mode 100644 js/contact_me_static.js

diff --git a/_config.yml b/_config.yml
index fcc678d..e3eb165 100644
--- a/_config.yml
+++ b/_config.yml
@@ -4,6 +4,9 @@ email: your-email@domain.com
 url: https://example.github.io
 description: "Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description."
 
+# Contact form: uncomment the line below if you want to stick with the default PHP contact form
+contact: static
+
 # Color settings (hex-codes without the leading hash-tag)
 color:
   primary: 18bc9c #80B3FF
diff --git a/_includes/contact_static.html b/_includes/contact_static.html
new file mode 100644
index 0000000..f8a5bd0
--- /dev/null
+++ b/_includes/contact_static.html
@@ -0,0 +1,51 @@
+<!-- Contact Section -->
+<section id="contact">
+	<div class="container">
+		<div class="row">
+			<div class="col-lg-12 text-center">
+				<h2>Contact Me</h2>
+				<hr class="star-primary">
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-lg-8 col-lg-offset-2">
+				<!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. -->
+				<!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. -->
+				<form  action="//formspree.io/<your-email-here>" method="POST" name="sentMessage" id="contactForm" novalidate>
+					<div class="row control-group">
+						<div class="form-group col-xs-12 floating-label-form-group controls">
+							<label>Name</label>
+							<input type="text" name="name" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
+							<p class="help-block text-danger"></p>
+						</div>
+					</div>
+					<div class="row control-group">
+						<div class="form-group col-xs-12 floating-label-form-group controls">
+							<label>Email Address</label>
+							<input type="email" name="_replyto" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
+							<p class="help-block text-danger"></p>
+						</div>
+					</div>
+					<div>
+						<input type="hidden"  name="_subject" value="New submission!">
+						<input type="text" name="_gotcha" style="display:none" />
+					</div>
+					<div class="row control-group">
+						<div class="form-group col-xs-12 floating-label-form-group controls">
+							<label>Message</label>
+							<textarea rows="5" name="message" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
+							<p class="help-block text-danger"></p>
+						</div>
+					</div>
+					<br>
+					<div id="success"></div>
+					<div class="row">
+						<div class="form-group col-xs-12">
+							<button type="submit" class="btn btn-success btn-lg">Send</button>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
+</section>
\ No newline at end of file
diff --git a/_includes/js.html b/_includes/js.html
index dfb30cf..7d37df5 100644
--- a/_includes/js.html
+++ b/_includes/js.html
@@ -11,7 +11,11 @@
 
     <!-- Contact Form JavaScript -->
     <script src="{{ "/js/jqBootstrapValidation.js" }}"></script>
-    <script src="{{ "/js/contact_me.js" }}"></script>
+    {% if site.contact == "static" %}
+    <script src="{{ "/js/contact_me_static.js" }}"></script>
+    {% else %}
+     <script src="{{ "/js/contact_me.js" }}"></script>
+    {% endif %}
 
     <!-- Custom Theme JavaScript -->
     <script src="{{ "/js/freelancer.js" }}"></script>
diff --git a/_layouts/default.html b/_layouts/default.html
index ca7041d..0482848 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -6,7 +6,13 @@
     {% include header.html %}
     {% include portfolio_grid.html %}
     {% include about.html %}
+
+    {% if site.contact == "static" %}
+    {% include contact_static.html %}
+    {% else %}
     {% include contact.html %}
+    {% endif %}
+
     {% include footer.html %}
     {% include modals.html %}
     {% include js.html %}
diff --git a/js/contact_me_static.js b/js/contact_me_static.js
new file mode 100644
index 0000000..b84b6b5
--- /dev/null
+++ b/js/contact_me_static.js
@@ -0,0 +1,23 @@
+$(function() {
+
+    $("input,textarea").jqBootstrapValidation({
+        preventSubmit: true,
+        submitError: function($form, event, errors) {
+            // additional error messages or events
+        },
+
+        filter: function() {
+            return $(this).is(":visible");
+        },
+    });
+
+    $("a[data-toggle=\"tab\"]").click(function(e) {
+        e.preventDefault();
+        $(this).tab("show");
+    });
+});
+
+/*When clicking on Full hide fail/success boxes */
+$('#name').focus(function() {
+    $('#success').html('');
+});