diff --git a/README.md b/README.md index 39e7f5d..27fddff 100644 --- a/README.md +++ b/README.md @@ -19,8 +19,6 @@ $ npm run generate ## Deploy to Netlify ---- - Want to deploy immediately? Click this button [![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/nuxt-toolbox) @@ -56,9 +54,64 @@ 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. + +```html + +``` + +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. + +For this to work we also need to add a `netlify-honeypot` attribute to the form element. + +```html +
+``` +[See it here in the template code.](https://github.com/netlify-templates/nuxt-toolbox/blob/abb24c52738d79bcd11ff8a1bc70e0d2d250e7f1/components/feedbackForm.vue#L3) + +### 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/). + 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/). diff --git a/components/feedbackForm.vue b/components/feedbackForm.vue index 16bcdb7..2d540f0 100644 --- a/components/feedbackForm.vue +++ b/components/feedbackForm.vue @@ -2,11 +2,14 @@
+ @@ -39,4 +42,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; +} 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",