From 6dd8127e8d032e85376b8637d29eb2bf31b89e4d Mon Sep 17 00:00:00 2001 From: Charlie Gerard Date: Tue, 22 Feb 2022 14:00:07 -0800 Subject: [PATCH 1/7] update fields in package.json --- package.json | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/package.json b/package.json index 1dc1ac7..9527a0d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,16 @@ { "name": "nuxt-toolbox", "version": "1.0.0", + "author": "Netlify Inc", + "contributors": [ + "Tara Manicsic", + "Prince Wilson", + "Charlie Gerard" + ], + "homepage": "https://github.com/netlify-templates/nuxt-toolbox", + "bugs": { + "url": "https://github.com/netlify-templates/nuxt-toolbox/issues" + }, "private": true, "scripts": { "dev": "nuxt", From 7531888f980b4e447181c38a5d0a19e88bd28307 Mon Sep 17 00:00:00 2001 From: Prince Wilson Date: Tue, 22 Feb 2022 17:28:36 -0500 Subject: [PATCH 2/7] chore: Add Netlify Forms documentation --- README.md | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/README.md b/README.md index 3f0a4e1..fc5d82c 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,49 @@ You can use `netlify dev` from the command line to access project information li - [Netlify Dev Overview](https://www.youtube.com/watch?v=RL_gtVZ_79Q&t=812s) - [Netlify Edge, CDN deployment](https://www.netlify.com/products/edge/) +## Forms +--- + +Netlify Forms are a way to wire up your native HTML into being able to seamlessly handle submissions. To get a form working, we need to add two extra things: + +1. An extra attribute on the `form` tag, `netlify` + +Adding this attribute to our `form` tag will let Netlify know when it loads the page, that it needs to be aware of submissions made through it. + +2. A hidden input in the form, `` + +Adding this extra input allows our form to be given a name that Netlify can store submissions to. It is a hidden input so your users won't see it but it will pass along the name of our form to Netlify when we submit. In our Netlify Admins site under Forms, we will see our Active Form named `feedback` and all submissions will go there. + +With both of those we're ready for folks to give us feedback! + +### Adding a custom submission page + +While Netlify provides a default submission page for folks, we can customize it as well! With the `action` attribute on the `form` tag we will be able to direct our users to our own page. + +In [`components/feedbackForm.vue`](./components/feedbackForm.vue) you'll see the form has the attribute `action="/testpage"` this will take our user to the custom route `/testpage` which we created under [`pages/TestPage.vue`](./pages/TestPage.vue). As long as the page exists, you can direct folks to it! + +### Blocking bot spam with a honeypot field + +Many bots scan through webpages and try to see what pages and forms they can get access to. Instead of letting our website receive spam submissions, we can filter out unrelated submissions with a visually-hidden input field. + +``` + +``` + +Since screenreader users will still have this announced, it is important for us to +communicate that this is a field not meant to be filled in. + +### Forms Resources + +- [Netlify Forms Setup](https://docs.netlify.com/forms/setup/) +- [Netlify Forms](https://www.netlify.com/products/forms/#main) +- [Netlify Forms - Form Triggered Functions](https://docs.netlify.com/functions/trigger-on-events/) +- [Netlify Forms - Using reCAPTCHA 2](https://docs.netlify.com/forms/spam-filters/#recaptcha-2-challenge) + ## Redirects --- In the [`netlify.toml`](./netlify.toml) configuration file there is an example of how to implement redirects. Redirects can be used to do many things from redirecting Single Page Apps more predictably, redirecting based on country/language to leveraging On-Demand Builders for [Distributed Persistant Rendering](https://www.netlify.com/blog/2021/04/14/distributed-persistent-rendering-a-new-jamstack-approach-for-faster-builds/). From e948fd386594497681e0d23057996c08ca909d33 Mon Sep 17 00:00:00 2001 From: Prince Wilson Date: Tue, 22 Feb 2022 17:30:56 -0500 Subject: [PATCH 3/7] fix: Add visually-hidden bot-field input --- components/feedbackForm.vue | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/components/feedbackForm.vue b/components/feedbackForm.vue index 70deda8..da36c1a 100644 --- a/components/feedbackForm.vue +++ b/components/feedbackForm.vue @@ -7,6 +7,11 @@ name="feedback" data-netlify-honeypot="bot-field" > + @@ -39,4 +44,14 @@ button { color: white; width: 50%; } + +.hidden { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} From 4dbdcadc0d7ef9ae7891b5996d3b5fdf80422bca Mon Sep 17 00:00:00 2001 From: Prince Wilson Date: Tue, 22 Feb 2022 17:31:24 -0500 Subject: [PATCH 4/7] fix: remove form name since hidden input field --- components/feedbackForm.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/components/feedbackForm.vue b/components/feedbackForm.vue index da36c1a..301dcbe 100644 --- a/components/feedbackForm.vue +++ b/components/feedbackForm.vue @@ -4,7 +4,6 @@ netlify action="/testpage" method="post" - name="feedback" data-netlify-honeypot="bot-field" >