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.

Sign up for GitHub

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

Jump to bottom

[docs] new reference guide on contact forms in Gatsby #14564

Closed
marcysutton opened this issue Jun 5, 2019 · 5 comments
Closed

[docs] new reference guide on contact forms in Gatsby #14564

marcysutton opened this issue Jun 5, 2019 · 5 comments
Assignees
@dyyyl
Labels
help wanted Issue with a clear description that the community can help with. type: documentation An issue or pull request for improving or updating Gatsby's documentation

Comments

@marcysutton
Copy link
Contributor

marcysutton commented Jun 5, 2019 •
edited
Loading

Summary

A common question in Gatsby is how to build a functioning contact form (it is also a key workflow). Without a server runtime environment, it isn't exactly intuitive how to hook up a form action to submit data.

The first step to improving that workflow would be to create a reference guide in the docs; reference guides are technical documentation outlining the various ways to build things in Gatsby (as opposed to tutorials, which are step-by-step instructions). Check out the docs templates and [Gatsby Style Guide[(https://www.gatsbyjs.org/contributing/gatsby-style-guide/) for more information.

Here are some of the potential points to include in such a guide:

  • Link to the Adding Forms doc
  • Briefly mention creating accessible forms because it's a common barrier on the web, and we should take every opportunity to educate
  • Use cloud/serverless functions for form action, like Netlify, AWS Lambda or Azure
    • This could also mention Netlify's honeypot feature for spam prevention
  • Stand up your own API server, i.e. with Express or similar
  • Try services like FormSpree (be sure to test to make sure it works for submissions!)

This could be added to the docs sidebar under "Adding Website Functionality", under Adding Forms. The title of this one should differentiate that it is about hooking up the contact form, more than building out the markup; something like "Building a Contact Form" perhaps?

This is up for grabs if anyone wants to take it on!
@marcysutton marcysutton added help wanted Issue with a clear description that the community can help with. type: documentation An issue or pull request for improving or updating Gatsby's documentation labels Jun 5, 2019
@dyyyl
Copy link
Contributor

dyyyl commented Jun 6, 2019

I can try taking this one up!

@dyyyl dyyyl self-assigned this Jun 6, 2019
@marcysutton
Copy link
Contributor Author

@dyyyl awesome. Let us know if you have any questions!

@dyyyl
Copy link
Contributor

dyyyl commented Jun 13, 2019

Hey @marcysutton! I'm getting close to PR time, but I'm struggling to add the new article to the sidenav. Can you please point me in the direction on how that's managed in the repo? Thanks!

@dyyyl dyyyl mentioned this issue Jun 13, 2019
Closed
dyyyl added a commit to dyyyl/gatsby that referenced this issue Jun 13, 2019
@dyyyl
Docs: add Build a Contact Form reference guide (gatsbyjs#14564)
83fcc3c 
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 mentioned this issue Jun 13, 2019
Merged
@dyyyl
Copy link
Contributor

dyyyl commented Jun 13, 2019

Hey @marcysutton! I'm getting close to PR time, but I'm struggling to add the new article to the sidenav. Can you please point me in the direction on how that's managed in the repo? Thanks!

Actually, scratch that! Managed to figure it out, PR is out! Really enjoyed working on this one 😄

marcysutton pushed a commit that referenced this issue Jun 20, 2019
@dyyyl
docs(www): add Build a Contact Form reference guide (#14564) (#14768)
72b918a 
* Docs: add Build a Contact Form reference guide (#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
mxxk pushed a commit to mxxk/gatsby that referenced this issue Jun 21, 2019
@dyyyl @mxxk
docs(www): add Build a Contact Form reference guide (gatsbyjs#14564) (g…
cd5f111 
…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
@gillkyle
Copy link
Contributor

Merged in #14768

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@dyyyl dyyyl

Labels
help wanted Issue with a clear description that the community can help with. type: documentation An issue or pull request for improving or updating Gatsby's documentation
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@marcysutton @marisamorby @dyyyl @gillkyle