Replace honeypot input with recaptcha

This commit is contained in:
Erick Ruiz de Chavez 2021-01-08 08:41:07 -05:00
parent 5cc353ed78
commit 1e9d96ba4e
2 changed files with 15 additions and 4 deletions

View file

@ -1,17 +1,23 @@
---
title: Contact
headscripts:
- https://www.google.com/recaptcha/api.js
---
<h1>{{ title }}</h1>
<form action="https://formspree.io/f/mzbkydal" method="POST" class="flex flex-col">
<input type="text" name="_gotcha" style="display:none" />
<input type="hidden" name="_subject" value="Contact Form" />
<script>
function onSubmit(token) {
document.getElementById("contact-form").submit();
}
</script>
<form action="https://formspree.io/f/mzbkydal" method="POST" class="flex flex-col" id="contact-form">
<input type="hidden" name="_subject" value="Contact Form" />
<label for="name" class="mt-4">Your name:</label>
<input type="text" required="required" id="name" name="name" class="p-2 dark:bg-gray-700 dark:text-gray-200">
<label for="_replyto" class="mt-4">Your email:</label>
<input type="email" required="required" id="_replyto" name="_replyto" class="p-2 dark:bg-gray-700 dark:text-gray-200">
<label for="message" class="mt-4">Your message:</label>
<textarea id="message" required="required" name="message" class="h-48 p-2 dark:bg-gray-700 dark:text-gray-200"></textarea>
<button type="submit" class="mt-4 p-2 bg-gray-600 text-gray-200 dark:bg-gray-200 dark:text-gray-600 font-bold rounded-full">Send</button>
<button class="mt-4 p-2 bg-gray-600 text-gray-200 dark:bg-gray-200 dark:text-gray-600 font-bold rounded-full g-recaptcha" data-sitekey="6LfNwyUaAAAAAH18i_mA70aeQHdbMT4RLzMLaxuc" data-callback='onSubmit'>Submit</button>
</form>

View file

@ -6,6 +6,11 @@
<title>{{ title + " - " if title }}{{ site.name }}</title>
<link rel="stylesheet" href="/styles.css" />
<link rel="alternate" type="application/atom+xml" title="" href="/feed.xml" />
{%- if headscripts %}
{%- for script in headscripts %}
<script src="{{ script }}" async defer></script>
{%- endfor %}
{%- endif %}
</head>
<body class="bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">