erick/erick.is
1
0
Fork 0
Code Issues Pull requests Activity

Replace Formspree with custom form code

Browse source
This commit is contained in:
Erick Ruiz de Chavez 2021-02-08 07:27:06 -05:00
parent dae7fb01ca
commit 4eceaec44a
4 changed files with 5410 additions and 869 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
_content/contact.njk
View file

@ -1,22 +1,23 @@
---
title: Contact
headscripts:
- https://www.google.com/recaptcha/api.js
---
<h1>{{ title }}</h1>
<script>
function onSubmit(token) {
document.getElementById("contact-form").submit();
}
</script>
<form action="https://palmiers.xyz/contact/contact.php" method="POST" class="flex flex-col" id="contact-form">
<input type="hidden" name="id" value="921ccf38-4b10-4ea2-be56-4910d226155f">
<input type="hidden" name="redirect" value="">
<script> document.querySelector('input[name="redirect"]').value = `${location.protocol}//${location.host}${location.pathname}thanks.html` </script>
<input type="hidden" name="subject" value="ERCH Conact Form">
<form action="https://formspree.io/f/mzbkydal" method="POST" class="flex flex-col" id="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">
<input type="text" required id="name" name="name" class="p-2 dark:bg-gray-700 dark:text-gray-200 valid:border-2 valid:border-green-600">
<label for="email" class="mt-4">Your email:</label>
<input type="email" required="required" id="email" name="email" class="p-2 dark:bg-gray-700 dark:text-gray-200">
<input type="email" required id="email" name="from" class="p-2 dark:bg-gray-700 dark:text-gray-200 valid:border-2 valid:border-green-600">
<label for="website" class="mt-4 hidden">Your website:</label>
<input type="url" id="website" name="website" class="p-2 dark:bg-gray-700 dark:text-gray-200 hidden">
<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 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>
<textarea id="message" required name="message" class="h-48 p-2 dark:bg-gray-700 dark:text-gray-200 valid:border-2 valid:border-green-600"></textarea>
<button class="mt-4 p-2 bg-gray-600 text-gray-200 dark:bg-gray-200 dark:text-gray-600 font-bold rounded-full">Submit</button>
</form>

6
_content/thanks.md Normal file
View file

@ -0,0 +1,6 @@
---
title: Thanks!
permalink: contact/thanks.html
---
Thank you for your email. I'll get back to you as soon as I can.

6230
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

18
tailwind.config.js
View file

@ -1,7 +1,12 @@
const colors = require("tailwindcss/colors");
const plugin = require("tailwindcss/plugin");
// Info about Prose Dark (Light) Mode:
// https://github.com/tailwindlabs/tailwindcss-typography/issues/69#issuecomment-752946920
// tailwind.config.js
// Add custom states (valid:)
// https://github.com/tailwindlabs/tailwindcss/discussions/2465
module.exports = {
purge: ["_includes/**/*.njk", "_content/**/*.njk", "_includes/**/*.css"],
@ -83,6 +88,17 @@ module.exports = {
extend: {
typography: ["dark"],
},
borderColor: ({ after }) => after(["valid"]),
borderWidth: ({ after }) => after(["valid"]),
},
plugins: [require("@tailwindcss/typography")],
plugins: [
require("@tailwindcss/typography"),
plugin(function ({ addVariant, e }) {
addVariant("valid", ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(`valid${separator}${className}`)}:valid`;
});
});
}),
],
};