Skip to content
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

Merged

Conversation

dyyyl
Copy link
Contributor

@dyyyl dyyyl commented Jun 13, 2019

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 🚀

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)
@dyyyl dyyyl requested a review from a team as a code owner June 13, 2019 10:46
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! ✨
@dyyyl dyyyl requested a review from a team June 13, 2019 10:51
@gillkyle gillkyle changed the title Docs: add Build a Contact Form reference guide (#14564) docs(www): add Build a Contact Form reference guide (#14564) Jun 13, 2019
Copy link
Contributor

@gillkyle gillkyle left a 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.


## 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.
Copy link
Contributor

@gillkyle gillkyle Jun 13, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.


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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## 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.

www/src/data/sidebars/doc-links.yaml Show resolved Hide resolved

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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### 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


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
Copy link
Contributor

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?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

@marcysutton marcysutton left a 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!


### 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:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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:


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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


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).
Copy link
Contributor

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?

Copy link
Contributor

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

dyyyl added 2 commits June 19, 2019 11:18
	- 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!)
@dyyyl
Copy link
Contributor Author

dyyyl commented Jun 19, 2019

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 ✨

dyyyl added 2 commits June 20, 2019 08:48
Adds subheading to indicate transition between conceptual form example and practical how-to's
Copy link
Contributor

@marcysutton marcysutton left a 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! 🌮

@marcysutton marcysutton merged commit 72b918a into gatsbyjs:master Jun 20, 2019
mxxk pushed a commit to mxxk/gatsby that referenced this pull request Jun 21, 2019
…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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants