Skip to content

Commit 0689ef3

Browse files
aarongustafsonaarongustafson
committed
Fixed the form to align with the actual form
1 parent 72fe6ab commit 0689ef3

File tree

1 file changed

+66
-48
lines changed

1 file changed

+66
-48
lines changed

‎docs/NETLIFY_WEBHOOK_SETUP.md‎

Lines changed: 66 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -17,60 +17,78 @@ This document provides step-by-step instructions for configuring your Netlify fo
1717

1818
### Step 1: Create or Update Your Netlify Form
1919

20-
Ensure your Netlify form includes the necessary fields for want processing:
20+
Ensure your Netlify form mirrors the production form used on the site:
2121

2222
```html
23-
<form name="problems" method="POST" data-netlify="true" action="/thanks">
24-
<input type="hidden" name="form-name" value="problems" />
25-
26-
<div>
27-
<label for="name">Your Name (optional):</label>
28-
<input type="text" id="name" name="name" />
29-
</div>
30-
31-
<div>
32-
<label for="email">Email (optional, for follow-up):</label>
33-
<input type="email" id="email" name="email" />
34-
</div>
35-
36-
<div>
37-
<label for="events">Event attendance:</label>
38-
<select id="events" name="events">
39-
<option value="I'm not attending an event, but am open to my submission being shared at one">Not attending, but open to sharing</option>
40-
<option value="I'm attending an event and would like this shared">Attending and want this shared</option>
41-
<option value="I'm not attending and don't want this shared">Not attending, don't share</option>
42-
</select>
43-
</div>
44-
45-
<div>
46-
<label for="privacy">Privacy:</label>
47-
<input type="checkbox" id="privacy" name="privacy" value="I agree to the privacy policy" required />
48-
<label for="privacy">I agree to the privacy policy</label>
49-
</div>
50-
51-
<div>
52-
<label for="title">Want Title:</label>
53-
<input type="text" id="title" name="title" required
54-
placeholder="e.g., Flexbox sizing should factor in the width of wrapped text" />
55-
</div>
56-
57-
<div>
58-
<label for="detail">Describe your want in detail:</label>
59-
<textarea id="detail" name="detail" required rows="8"
60-
placeholder="Explain what you want added to the web platform, why it would be useful, and provide examples or links to demonstrations..."></textarea>
61-
</div>
62-
63-
<button type="submit">Submit Want</button>
23+
<form name="problems" method="POST" data-netlify="true" action="/submitted/" netlify-honeypot="bot-field">
24+
<input type="hidden" name="form-name" value="problems">
25+
26+
<ol class="questions">
27+
<li class="question">
28+
<label class="question__label" for="field-name">What’s your name?</label>
29+
<input class="question__field" type="text" name="name" id="field-name" required
30+
placeholder="Katherine Johnson" autocomplete="name" autocorrect="off" autocapitalize="off">
31+
<div class="question__addendum">
32+
<label class="question--confirm" for="field-privacy">
33+
<input class="question__field question__field--confirm" type="checkbox" name="privacy" id="field-privacy" value="1">
34+
Please keep my full name private
35+
</label>
36+
</div>
37+
</li>
38+
<li class="question">
39+
<label class="question__label" for="field-email">Where can we email you?</label>
40+
<input class="question__field" type="email" name="email" id="field-email" required
41+
placeholder="[email protected]" autocomplete="email"
42+
aria-describedby="description-email">
43+
<em class="question__description" id="description-email">We will only use this information to contact you when your want is published and reach out if we select you to participate in an event. We will not retain your email address beyond that period of time.</em>
44+
</li>
45+
<li class="question">
46+
<label class="question__label" for="field-github">Do you have a GitHub username?</label>
47+
<input class="question__field" type="text" name="github" id="field-github"
48+
placeholder="your_handle" aria-describedby="description-github" autocapitalize="off">
49+
<em class="question__description" id="description-github">We use GitHub for tracking and discussing Wants. A GitHub account isn’t required, but could be helpful if you’re interested in participating there.</em>
50+
</li>
51+
<li class="question">
52+
<label class="question__label" for="field-events">If you are already attending one of the events we’ll be at, would you consider presenting your idea in person?</label>
53+
<select id="field-events" name="events" required aria-describedby="description-events">
54+
<option>I’m not attending an event, but am open to my submission being shared at one</option>
55+
<option>I’m not interested in having my submission shared at an event</option>
56+
<!-- Additional <option> elements are injected for each upcoming event -->
57+
</select>
58+
<em class="question__description" id="description-events">If you are not already planning to attend the event, it is unlikely we will be able to get you a ticket. That said, if you might qualify for an attendee scholarship, contact us and we will try to help you if we can.</em>
59+
</li>
60+
<li class="question">
61+
<label class="question__label" for="field-title">What do you want?</label>
62+
<input class="question__field" type="text" name="title" id="field-title" required
63+
placeholder="I want…" autocapitalize="sentences" spellcheck="true">
64+
</li>
65+
<li class="question">
66+
<label class="question__label" for="field-detail">Now go into a little more detail. How is lack of this impacting your work? How do you currently work around this limitation?</label>
67+
<textarea class="question__field" name="detail" id="field-detail" required rows="8"
68+
autocapitalize="sentences" spellcheck="true" aria-describedby="description-detail"></textarea>
69+
<em class="question__description" id="description-detail">Please note that we may end up rewriting your problem before posting it to this site.</em>
70+
</li>
71+
<li hidden>
72+
<label>Don’t fill this out if you're human: <input name="bot-field"></label>
73+
</li>
74+
</ol>
75+
76+
<button type="submit">Send it in</button>
77+
<p><em>Note: You can ask us to remove your personal information from this site or our form submission database at any time. We can also retroactively remove your full name from any submissions. Just <a href="/contact/">drop us a line</a>.</em></p>
6478
</form>
6579
```
6680

6781
**Important Field Names:**
68-
- `name` - Submitter's name
69-
- `email` - Contact email (optional)
70-
- `events` - Event attendance preference
71-
- `privacy` - Privacy policy agreement
72-
- `title` - Want title/summary
73-
- `detail` - Detailed want description (main content)
82+
- `name` (required) – Submitter’s name
83+
- `privacy` (optional) – Checkbox value `1` when the submitter wants their full name kept private
84+
- `email` (required) – Contact email for follow-up
85+
- `github` (optional) – GitHub username for discussion follow-up
86+
- `events` (required) – Event attendance preference (static options plus any upcoming events)
87+
- `title` (required) – Want title/summary
88+
- `detail` (required) – Detailed want description (main content)
89+
- `bot-field` – Honeypot field used by Netlify to reduce spam (should remain empty)
90+
91+
JavaScript enhances the form to add a `save` checkbox that stores the contact fields locally for future submissions. If the submitter opts in, Netlify will include `save: 1` in the payload; you can ignore this flag within the webhook.
7492

7593
### Step 2: Set Up Netlify Function (Required)
7694

0 commit comments

Comments
 (0)