docs(www): add Build a Contact Form reference guide (#14564) #14768
Conversation
Adds a reference guide for building contact forms in Gatsby! Has sections regarding: - Adding a Contact Form - Creating an Accessible Form - Sending Form Data - with Netlify - with Formspree - Running Your Own Server - Other Resources (a cool Scott Tolinski tutorial)
Has sections regarding: - Adding a Contact Form - Creating an Accessible Form - Sending Form Data - with Netlify - with Formspree - Running Your Own Server - Other Resources (a cool Scott Tolinski tutorial) This time, actually includes reference guide! ✨
gillkyle
changed the title
docs/docs/building-a-contact-form.md
Outdated
|
|
||
| ## Adding a Contact Form | ||
|
|
||
| Gatsby is built on top of React. So anything that is possible with a React form is possible in Gatsby. Additional details about how to add forms to gatsby can be found in the [Adding Forms](https://www.gatsbyjs.org/docs/adding-forms/) section. |
There was a problem hiding this comment.
| Gatsby is built on top of React. So anything that is possible with a React form is possible in Gatsby. Additional details about how to add forms to gatsby can be found in the [Adding Forms](https://www.gatsbyjs.org/docs/adding-forms/) section. | |
| Gatsby is built on top of React. So anything that is possible with a React form is possible in Gatsby. Additional details about how to add forms to Gatsby can be found in the [Adding Forms](/docs/adding-forms/) section. |
docs/docs/building-a-contact-form.md
Outdated
|
|
||
| This guide covers how to create a contact form in a Gatsby site, along with an overview of some strategies for handling form data that has been submitted. | ||
|
|
||
| ## Adding a Contact Form |
There was a problem hiding this comment.
| ## Adding a Contact Form |
I think this would be fine to be removed since the paragraph below it is mostly just more overview information and the title says pretty close to the same thing.
docs/docs/building-a-contact-form.md
Outdated
|
|
||
| Once you've made the changes you can submit your own form for the first time and register using the email Formspree will send you, and all subsequent form submissions will be sent to your email address. You can find more information on the registration process or setup [on their website](https://formspree.io/). | ||
|
|
||
| ### Run Your Own Server |
There was a problem hiding this comment.
| ### Run Your Own Server | |
| ### Run your own server |
This is just a style guide thing 🙂 https://www.gatsbyjs.org/contributing/gatsby-style-guide/#format-titles-and-headers
docs/docs/building-a-contact-form.md
Outdated
|
|
||
| If you're hosting your site with Netlify, you gain access to their excellent form handling feature. Setting this up only invloves adding a few form attributes: | ||
|
|
||
| ```jsx:title=src/pages/contact.js |
There was a problem hiding this comment.
This could be a good place to use a diff file type to show what lines have changed from the example above and new code here.
I also had trouble trying to make this work, I put the default starter on Netlify with this code and I don't actually get submissions to go through: https://amazing-roentgen-d0c1a6.netlify.com/netlify/ I also looked at Netlify's example that worked okay, but it uses plenty of JavaScript even though their docs say you just need to add a few html attributes like this.
Do you have an example where you got this working by chance?
There was a problem hiding this comment.
I have it working on my site: https://github.com/marcysutton/gatsby-site/blob/master/src/pages/contact.js
docs/docs/building-a-contact-form.md
Outdated
|
|
||
| ### Netlify | ||
|
|
||
| If you're hosting your site with Netlify, you gain access to their excellent form handling feature. Setting this up only invloves adding a few form attributes: |
There was a problem hiding this comment.
| If you're hosting your site with Netlify, you gain access to their excellent form handling feature. Setting this up only invloves adding a few form attributes: | |
| If you're hosting your site with Netlify, you gain access to their excellent [form handling feature](https://www.netlify.com/docs/form-handling/). Setting this up only involves adding a few form attributes: |
docs/docs/building-a-contact-form.md
Outdated
|
|
||
| If you're hosting your site with Netlify, you gain access to their excellent form handling feature. Setting this up only invloves adding a few form attributes: | ||
|
|
||
| ```jsx:title=src/pages/contact.js |
There was a problem hiding this comment.
I have it working on my site: https://github.com/marcysutton/gatsby-site/blob/master/src/pages/contact.js
|
|
||
| Now, all subsequent form submissions will be sent to your email address! | ||
|
|
||
| For an in-depth guide on running your own mail server, you can refer to [this awesome guide by DataFire](https://medium.com/datafire-io/simple-backends-four-ways-to-implement-a-contact-us-form-on-a-static-website-10fc430984a4). |
There was a problem hiding this comment.
Are there any security/spam implications we should mention here?
There was a problem hiding this comment.
I found an article that goes into some of the detail of complexity and spam implications, though it isn't messaged from the perspective of a static site: https://www.digitalocean.com/community/tutorials/why-you-may-not-want-to-run-your-own-mail-server
- Removes `Adding a Contact Form` Heading - Fixes link to `Adding Forms` - Fixes `Run your own server` case - diffs netlify code example, as requested - adds link to netlify form-handling doc - adds reference to formspree honeypot for spam prevention (good catch @marcysutton!)
|
Hey @marcysutton @gillkyle, thank you for all of your input & patience! I've made a commit addressing the proposed changes, can't wait to see what you think ✨ |
Adds subheading to indicate transition between conceptual form example and practical how-to's
There was a problem hiding this comment.
approving this so we can merge–thanks so much to you, @dyyyl, for your contribution! 🌮
…atsbyjs#14768) * Docs: add Build a Contact Form reference guide (gatsbyjs#14564) Adds a reference guide for building contact forms in Gatsby! Has sections regarding: - Adding a Contact Form - Creating an Accessible Form - Sending Form Data - with Netlify - with Formspree - Running Your Own Server - Other Resources (a cool Scott Tolinski tutorial) * Adds a reference guide for building contact forms in Gatsby! Has sections regarding: - Adding a Contact Form - Creating an Accessible Form - Sending Form Data - with Netlify - with Formspree - Running Your Own Server - Other Resources (a cool Scott Tolinski tutorial) This time, actually includes reference guide! ✨ * Adds fixes for all aforementioned proposed changes, including: - Removes `Adding a Contact Form` Heading - Fixes link to `Adding Forms` - Fixes `Run your own server` case - diffs netlify code example, as requested - adds link to netlify form-handling doc - adds reference to formspree honeypot for spam prevention (good catch @marcysutton!) * Adds subheading to gracefully transition between sections Adds subheading to indicate transition between conceptual form example and practical how-to's
Description
Adds a reference guide for building contact forms in Gatsby!
Has sections regarding:
- Adding a Contact Form
- Creating an Accessible Form
- Sending Form Data
- with Netlify
- with Formspree
- Running Your Own Server
- Other Resources (a cool Scott Tolinski tutorial)
Related Issues
Addresses #14564 🚀