Integrate with FormSpree for submitting 'Contact me' form

To enable the integration, uncomment the section `params.contact.formspree` and set the `formId` value (provided by FormSpree).
It's recommended to change the `btnName` from "Mail me" to "Contact me" as far as visitors won't see your email address.
FormSpree section has preference over `email` if the both are set.

README.md

@@ -24,6 +24,7 @@ A high performance and mobile first hugo template for personal portfolio and blo
   - [Google Analytics](https://gohugo.io/templates/internal/#google-analytics)
 - Comment Support
   - [Disqus](https://gohugo.io/content-management/comments/)
+- Integration with [FormSpree](https://formspree.io/) for submitting "Contact me" form
 
 Technology used: Bootstrap, fontawesome 
 

exampleSite/config.yaml

@@ -339,6 +339,9 @@ params:
     # title: "Custom Name"
     content: My inbox is always open. Whether you have a question or just want to say hi, I’ll try my best to get back to you!
     email: [email protected]
+    # formspree:
+    #   enable: true # `contact.email` value will be ignored
+    #   formId: abcdefgh # Take it from your form's endpoint, like 'https://formspree.io/f/abcdefgh'
     btnName: Mail me
 
   footer:

layouts/partials/sections/contact.html

@@ -8,7 +8,19 @@
                     <div class="text-center">
                         {{ .Site.Params.contact.content | emojify | markdownify }}
                     </div>
-                    {{ if .Site.Params.contact.email }}
+                    {{ if .Site.Params.contact.formspree.enable | default false }}
+                    <form action="https://formspree.io/f/{{ .Site.Params.contact.formspree.formId }}" method="POST">
+                        <div class="text-center pt-3">
+                            <input type="email" name="email" required="true" placeholder="{{ .Site.Params.contact.formspree.emailCaption | emojify | default "Your email" }}">
+                        </div>
+                        <div class="text-center pt-3">
+                            <textarea name="message" required="true" placeholder="{{ .Site.Params.contact.formspree.messageCaption | emojify | default "Your message" }}"></textarea>
+                        </div>
+                    <div class="text-center pt-3">
+                        <button type="submit" class="btn">{{ .Site.Params.contact.btnName | default "Get in Touch" }}</button>
+                    </div>
+                    </form>
+                    {{ else if .Site.Params.contact.email }}
                     <div class="text-center pt-3">
                         <a href="mailto:{{ .Site.Params.contact.email }}" class="btn">
                             {{ .Site.Params.contact.btnName | default "Get in Touch" }}