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.
This commit is contained in:
Dmytro Mantula
2023-01-14 15:47:14 +01:00
parent 9c1b16ec3d
commit 001841d6e6
3 changed files with 17 additions and 1 deletions
+1
View File
@@ -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) - [Google Analytics](https://gohugo.io/templates/internal/#google-analytics)
- Comment Support - Comment Support
- [Disqus](https://gohugo.io/content-management/comments/) - [Disqus](https://gohugo.io/content-management/comments/)
- Integration with [FormSpree](https://formspree.io/) for submitting "Contact me" form
Technology used: Bootstrap, fontawesome Technology used: Bootstrap, fontawesome
+3
View File
@@ -339,6 +339,9 @@ params:
# title: "Custom Name" # title: "Custom Name"
content: My inbox is always open. Whether you have a question or just want to say hi, Ill try my best to get back to you! content: My inbox is always open. Whether you have a question or just want to say hi, Ill try my best to get back to you!
email: gurusabarisha@gmail.com email: gurusabarisha@gmail.com
# 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 btnName: Mail me
footer: footer:
+13 -1
View File
@@ -8,7 +8,19 @@
<div class="text-center"> <div class="text-center">
{{ .Site.Params.contact.content | emojify | markdownify }} {{ .Site.Params.contact.content | emojify | markdownify }}
</div> </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"> <div class="text-center pt-3">
<a href="mailto:{{ .Site.Params.contact.email }}" class="btn"> <a href="mailto:{{ .Site.Params.contact.email }}" class="btn">
{{ .Site.Params.contact.btnName | default "Get in Touch" }} {{ .Site.Params.contact.btnName | default "Get in Touch" }}