-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs(www): add Build a Contact Form reference guide (#14564) #14768
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! ✨
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is looking really great!! Thanks @dyyyl!
I made a couple of suggestions on small things that could be updated.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
## 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
### 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have it working on my site: https://github.com/marcysutton/gatsby-site/blob/master/src/pages/contact.js
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is awesome! I added one typo fix and a comment or two. But it's looking good!
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are there any security/spam implications we should mention here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 🚀