Make the contact form working

3 files changed, 20 insertions, 7 deletions

diff --git a/README.md b/README.md
index 44eac5f..2854beb 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,17 @@ After installing the Elate Theme successfully it requires a just a few more step
 
 Take a look inside the [`exampleSite`](//github.com/saey55/hugo-elate-theme/tree/master/exampleSite) folder of this theme. You'll find a file called [`config.toml`](//github.com/saey55/hugo-elate-theme/blob/master/exampleSite/config.toml). To use it, copy the [`config.toml`](//github.com/saey55/hugo-elate-theme/blob/master/exampleSite/config.toml) in the root folder of your Hugo site. Feel free to change the strings in this theme.
 
+### Make the contact form working
+
+Since this page will be static, you can use [formspree.io](//formspree.io/) as proxy to send the actual email. Each month, visitors can send you up to one thousand emails without incurring extra charges. Begin the setup by following the steps below:
+
+1. Enter your email address under 'email' in the [`config.toml`](//github.com/saey55/hugo-elate-theme/blob/master/exampleSite/config.toml)
+2. Enable form by setting `enable` to `true` in contact settings
+3. Upload the generated site to your server
+4. Send a dummy email yourself to confirm your account
+5. Click the confirm link in the email from [formspree.io](//formspree.io/)
+6. You're done. Happy mailing!
+
 ### Nearly finished
 
 In order to see your site in action, run Hugo's built-in local server. 
@@ -44,4 +55,4 @@ This theme is released under The MIT License (MIT). For more information read th
 Thanks to 
 
 - [freehtml5.co](//freehtml5.co) for creating this theme
-- [Steve Francia](//github.com/spf13) for creating Hugo and the awesome community around the project.
\ No newline at end of file
+- [Steve Francia](//github.com/spf13) for creating Hugo and the awesome community around the project.
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 972c803..35071f1 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -9,7 +9,7 @@ theme = "hugo-elate-theme"
   # Meta
   author = ""
   description = ""
-
+  email = ""
   # Navigation
   [params.navigation]
     brand = "Elate"
@@ -274,4 +274,4 @@ theme = "hugo-elate-theme"
   # Footer section
   [params.footer]
     enable = true
-    copyright = '&copy; Elate Free HTML5. All Rights Reserved. <br>Created by <a href="http://freehtml5.co/" target="_blank">FREEHTML5.co</a> Images: <a href="http://pexels.com/" target="_blank">Pexels</a>, <a href="http://plmd.me/" target="_blank">plmd.me</a> <br>Hugo port by: <a href="https://github.com/saey55" target="_blank">saey55</a>'
\ No newline at end of file
+    copyright = '&copy; Elate Free HTML5. All Rights Reserved. <br>Created by <a href="http://freehtml5.co/" target="_blank">FREEHTML5.co</a> Images: <a href="http://pexels.com/" target="_blank">Pexels</a>, <a href="http://plmd.me/" target="_blank">plmd.me</a> <br>Hugo port by: <a href="https://github.com/saey55" target="_blank">saey55</a>'
diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html
index 171e7fc..32fecfb 100755
--- a/layouts/partials/contact.html
+++ b/layouts/partials/contact.html
@@ -22,13 +22,14 @@
 

 				<div class="col-md-6 to-animate">

 					<h3>{{ with .Site.Params.contact.form }}{{ . | markdownify }}{{ end }}</h3>

+					<form method="post" action="//formspree.io/{{ with .Site.Params.email }}{{.}}{{ end }}">

 					<div class="form-group ">

 						<label for="name" class="sr-only">{{ with .Site.Params.contact.name }}{{ . | markdownify }}{{ end }}</label>

-						<input id="name" class="form-control" placeholder="Name" type="text">

+						<input id="name" class="form-control" name="name" placeholder="Name" type="text">

 					</div>

 					<div class="form-group ">

 						<label for="email" class="sr-only">{{ with .Site.Params.contact.email }}{{ . | markdownify }}{{ end }}</label>

-						<input id="email" class="form-control" placeholder="Email" type="email">

+						<input id="email" class="form-control" name="_replyto" placeholder="Email" type="email">

 					</div>

 					<div class="form-group ">

 						<label for="phone" class="sr-only">{{ with .Site.Params.contact.phone }}{{ . | markdownify }}{{ end }}</label>

@@ -36,12 +37,13 @@
 					</div>

 					<div class="form-group ">

 						<label for="message" class="sr-only">{{ with .Site.Params.contact.message }}{{ . | markdownify }}{{ end }}</label>

-						<textarea name="" id="message" cols="30" rows="5" class="form-control" placeholder="Message"></textarea>

+						<textarea name="" id="message" cols="30" rows="5" class="form-control" name="message" placeholder="Message"></textarea>

 					</div>

 					<div class="form-group ">

 						<input class="btn btn-primary btn-lg" value="{{ .Site.Params.contact.button | markdownify }}" type="submit">

 					</div>

 					</div>

+					</form>

 				</div>

 

 			</div>

@@ -49,4 +51,4 @@
 		{{ if .Site.Params.contact.map }}

         	<div id="map" class="to-animate"></div>

 		{{ end }}

-	</section>
\ No newline at end of file
+	</section>