You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
My favorite spot to catch up with writers and artists is from the comfort of my own email inbox. Social media algorithms are fickle and too bite-sized to be sustaining. But sitting down for a couple of minutes to read an email long form is a delight!
14
14
15
-
I was curious about implementing the infrastructure for this very site. I don't plan on going full-on email marketer! I am interested, though, in a once or twice a year short note on what's going on in my corner of the internet.
15
+
I was curious about implementing the infrastructure for this very site. I don't plan on going full-on email marketer! I am interested, though, in a once or twice a year short note on what's going on in my corner of the internet.
16
16
17
17
And, the fun part — It means getting to write some node code to set up an email subscription flow!
18
18
@@ -42,13 +42,13 @@ export default function Subscribe() {
<button type="submit" disabled={submitting}>{submitting ? 'Submitting...' : 'Sign Me Up!'}</button>
79
79
{error && (
80
80
<p>Oops! Something went wrong... try refreshing. If all else fails, <Link href={`/contact`}>
@@ -89,7 +89,6 @@ return (
89
89
90
90
Next I'll handle radio elements for emailing frequency. Most input fields are simple enough with one element. Radio elements, however, require special logic to work. Here, I'm setting the value to true only if our state matches the current element. The `onChange` is then responsible for updating the state to its value.
91
91
92
-
93
92
```HTML
94
93
<fieldset value={frequency}>
95
94
<legend>How often would you like to receive emails?</legend>
@@ -105,10 +104,8 @@ Next I'll handle radio elements for emailing frequency. Most input fields are si
105
104
106
105
```
107
106
108
-
Now for submitting the form! My submit handler will set the submitting state so the input button won't accidentally be double-clicked.
107
+
Now for submitting the form! My submit handler will set the submitting state so the input button won't accidentally be double-clicked.
109
108
110
-
Then, I'll gather the values from state. From there, the `fetch` API is used to send the request. And upon successful submission, the user is then redirected to `/subscribed?n={firstName}`. The query param is added to customize the message when they land.
109
+
Then, I'll gather the values from state. From there, the `fetch` API is used to send the request. And upon successful submission, the user is then redirected to `/subscribed?n={firstName}`. The query param is added to customize the message when they land.
111
110
112
111
That's all there is to it! There's more work involved with handling updating subscription status and using the templates. If your curious, I'd recommend digging into Pete Houston's [Simple Newsletter repo](https://github.com/petehouston/simple-newsletter) and playing with it yourself!
113
-
114
-
Oh, _by the way!_ You can see the [working page here](/subscribe)!
0 commit comments