diff options
| -rw-r--r-- | README.md | 15 | ||||
| -rw-r--r-- | exampleSite/config.toml | 17 | ||||
| -rw-r--r-- | layouts/partials/contact.html | 6 | ||||
| -rw-r--r-- | layouts/partials/map.html | 2 | ||||
| -rw-r--r-- | layouts/partials/scripts.html | 9 |
5 files changed, 37 insertions, 12 deletions
@@ -137,11 +137,11 @@ You can enable or disable the Google Maps widget on the contact page by setting Example configuration: -```yaml +```toml [params] ... enableGoogleMaps = true - googleMapsApiKey = "AIzaSyCFhtWLJcE30xOAjcbSFi-0fnoVmQZPb1Y" + googleMapsApiKey = "site_key_for_google_maps" latitude = "-12.043333" longitude = "-77.028333" @@ -150,12 +150,15 @@ Example configuration: Since Hugo sites are static, the contact form uses [Formspree](https://formspree.io/) as a proxy. The form makes a POST request to their servers to send the actual email. Visitors can send up to a 1000 emails each month for free. -To enable the form in the contact page, just type your Formspree email in the `config.toml` file, and specify whether to use ajax(paid) to send request or plain HTTP POST(free). +To enable the form in the contact page, just type your Formspree email in the `config.toml` file, and specify whether to use ajax(paid) to send request or plain HTTP POST(free). Also there is the possibility to enable a captcha using recaptcha. -```yaml +```toml [params] -email = "your@email.com" -contact_form_ajax = false + email = "your@email.com" + contact_form_ajax = false + + enableRecaptchaInContactForm = true + googleRecaptchaKey = "site_key_for_google_recaptcha" ``` ### Menu diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 66b7e3c..1bd36b2 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -414,6 +414,23 @@ paginate = 10 formspree_action = "https://formspree.io/sample/of/endpoint" contact_form_ajax = false + # Formspree form supports Google reCAPTCHA Key (type v2). + # If you use this feature, you should enable reCAPTCHA feature in the Formspree dashboard. + # + # By default, Formspree use a redirect page for recaptcha widget. + # If you use a recaptcha widget in your contact page, you should do next steps. + # (if you don't want, skip these steps) + # + # 1. register your site on Google recaptcha admin page: https://www.google.com/recaptcha/admin + # 2. select reCAPTCHA v2 and checkbox widget type. + # 3. remember site key and secret key. + # 4. enter secret key into "Custom reCAPTCHA Key" field in your Formspree form setting page. + # 5. change `enableRecaptchaInContactForm` is to true + # 6. enter site key into `googleRecaptchaKey` to enable a recaptcha widget in your page. + # + enableRecaptchaInContactForm = false + googleRecaptchaKey = "site_key_for_google_recaptcha" + about_us = "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>" copyright = "Copyright (c) 2015 - 2016, YourCompany; all rights reserved." diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html index 82304f6..557539c 100644 --- a/layouts/partials/contact.html +++ b/layouts/partials/contact.html @@ -35,6 +35,12 @@ <textarea id="message" class="form-control" name="message" required></textarea> </div> </div> + {{ if and .Site.Params.enableRecaptchaInContactForm .Site.Params.googleRecaptchaKey }} + <div class="col-sm-12"> + <div class="g-recaptcha" data-sitekey="{{ .Site.Params.googleRecaptchaKey }}"></div> + <br/> + </div> + {{ end }} <div class="col-sm-12 text-center"> <button type="submit" class="btn btn-template-main"><i class="far fa-envelope"></i>{{ i18n "contactSend" }}</button> diff --git a/layouts/partials/map.html b/layouts/partials/map.html index 540546c..6220f54 100644 --- a/layouts/partials/map.html +++ b/layouts/partials/map.html @@ -1,4 +1,4 @@ -{{ if .Site.Params.enableGoogleMaps }} +{{ if and .Site.Params.enableGoogleMaps .Site.Params.googleMapsApiKey }} {{ if isset .Site.Params "latitude" }} {{ if isset .Site.Params "longitude" }} <div class="hidden"> diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index 2b8ca63..266c542 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -6,15 +6,14 @@ <script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0/jquery.counterup.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-parallax/1.1.3/jquery-parallax.js"></script> -{{ if .Site.Params.enableGoogleMaps }} -{{ if .Site.Params.googleMapsApiKey }} +{{ if and .Site.Params.enableGoogleMaps .Site.Params.googleMapsApiKey }} <script src="//maps.googleapis.com/maps/api/js?key={{.Site.Params.googleMapsApiKey}}&v=3.exp"></script> -{{ else }} -<script src="//maps.googleapis.com/maps/api/js?v=3.exp"></script> -{{ end }} <script src="{{ "js/hpneo.gmaps.js" | relURL }}"></script> <script src="{{ "js/gmaps.init.js" | relURL }}"></script> {{ end }} +{{ if and .Site.Params.enableRecaptchaInContactForm .Site.Params.googleRecaptchaKey }} +<script src="//www.google.com/recaptcha/api.js" async defer></script> +{{ end }} <script src="{{ "js/front.js" | relURL }}"></script> <!-- owl carousel --> |