feat(widget): add optional contact form to contact widget

To use, set email form provider in the updated `contact.md`.

Close #713

exampleSite/content/home/contact.md

@@ -13,5 +13,10 @@ weight = 70
 # Automatically link email and phone?
 autolink = true
 
+# Email form provider
+#   0: Disable email form
+#   1: Netlify (requires that the site is hosted by Netlify)
+#   2: formspree.io
+email_form = 2
 +++
 

i18n/en.yaml

@@ -98,6 +98,20 @@
 - id: more_talks
   translation: More Talks
 
+# Contact widget
+
+- id: contact_name
+  translation: Name
+
+- id: contact_email
+  translation: Email
+
+- id: contact_message
+  translation: Message
+
+- id: contact_send
+  translation: Send
+
 # Publication/Talk details
 
 - id: abstract

layouts/partials/widgets/contact.html

@@ -11,13 +11,41 @@
   <div class="col-12 col-lg-8">
     {{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
 
+    {{ if and $.Site.Params.email $page.Params.email_form }}
+
+    {{ $post_action := "" }}
+    {{ if eq $page.Params.email_form 1 }}
+      {{ $post_action = "netlify" }}
+    {{ else }}
+      {{ $post_action = printf "action=\"https://formspree.io/%s\"" $.Site.Params.email }}
+    {{end}}
+
+    <div class="mb-3">
+      <form name="contact" method="POST" {{ $post_action | safeHTMLAttr }}>
+        <div class="form-group form-inline">
+          <label class="sr-only" for="inputName">{{ i18n "contact_name" }}</label>
+          <input type="text" name="name" class="form-control w-100" id="inputName" placeholder="{{ i18n "contact_name" | default "Name" }}" required>
+        </div>
+        <div class="form-group form-inline">
+          <label class="sr-only" for="inputEmail">{{ i18n "contact_email" }}</label>
+          <input type="email" name="email" class="form-control w-100" id="inputEmail" placeholder="{{ i18n "contact_email" | default "Email" }}" required>
+        </div>
+        <div class="form-group">
+          <label class="sr-only" for="inputMessage">{{ i18n "contact_message" }}</label>
+          <textarea name="message" class="form-control" id="inputMessage" rows="5" placeholder="{{ i18n "contact_message" | default "Message" }}" required></textarea>
+        </div>
+        <button type="submit" class="btn btn-outline-primary px-3 py-2">{{ i18n "contact_send" | default "Send" }}</button>
+      </form>
+    </div>
+    {{end}}
+
     <ul class="fa-ul" itemscope>
 
-      {{ with $.Site.Params.email }}
+      {{ if and $.Site.Params.email (not $page.Params.email_form) }}
       <li>
         <i class="fa-li fas fa-envelope fa-2x" aria-hidden="true"></i>
         <span id="person-email" itemprop="email">
-        {{- if $autolink }}<a href="mailto:{{ . }}">{{ . }}</a>{{ else }}{{ . }}{{ end -}}
+        {{- if $autolink }}<a href="mailto:{{ $.Site.Params.email }}">{{ $.Site.Params.email }}</a>{{ else }}{{ $.Site.Params.email }}{{ end -}}
         </span>
       </li>
       {{ end }}