feat: add ConvertKit mailing list signup form

[meganesu]

Closes #91

Note: Need to test in deploy preview. ConvertKit won't send confirmation emails when using localhost. This is no longer the case now that I'm calling the ConvertKit API and not using the ConvertKit auto-generated HTML embed code.

To Do

• [x] Call ConvertKit API when form is submitted
• [x] Update form UI based on whether form was submitted successfully or unsuccessfully
• [x] Responsive styling (looks good on mobile and desktop)
• [x] Add client-side validation
  • [x] If no email is entered (using the required attribute to the HTML input handles this)
  • [x] If email doesn't match email pattern validation (using the required attribute to the HTML input handles this)
• [x] Add server-side validation
  • [x] If no email included
  • [x] If ConvertKit responds with an error
• [x] Add environment variables to Netlify
  • [x] CONVERTKIT_API_KEY
  • [x] CONVERTKIT_FORM_ID (use dev ID for deploy previews, local dev; use prod for production)
• [x] Add staging form URL for deploy previews (to avoid polluting production mailing list)
• [x] Add automated tests
• [x] Check accessibility of success message and error message
• [x] Replace ConvertKit default confirmation email copy (incentive emails for dev & prod forms)
• Replace ConvertKit confirmation email redirect link (extracted into #104)
• [x] Swap out ConvertKit "send from" email address for a non-Gmail address

Future improvements:

• Animate height change in mailing list component when form is submitted (and replaced with success message) (extracted into #105)

Open Questions

• [x] How do I make the form success/error messages accessible?
  • See: https://www.w3.org/WAI/tutorials/forms/notifications/
  • Use a combination of live regions (for error message) and moving focus (for replacing form with success message)

Resources

• https://www.codewithlinda.com/blog/email-newsletter-subscription-for-gatsby-using-convertkit/
• https://conermurphy.com/blog/custom-email-signup-form-conertkit-gatsbyjs
• https://www.youtube.com/watch?v=fWM5iisumTM

[netlify[bot]]

✅ Deploy Preview for meganesulli ready!

Name	Link
🔨 Latest commit	54c1f585207d579ff00d0fa2ae3065bedfde4917
🔍 Latest deploy log	https://app.netlify.com/sites/meganesulli/deploys/63df3b43ebb10c0009a75b1b
😎 Deploy Preview	https://deploy-preview-92--meganesulli.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[meganesu]

Status update:

• ConvertKit template works. Confirmation email received, and confirming subscription showed one new subscriber in the ConvertKit UI.
• Custom form shows a message saying form was submitted successfully, but confirmation email is never sent.

[meganesu]

Check out the official ConvertKit React component.

Looks like I might need to load their script for it to work? Not sure how closely that script is tied to the DOM structure in the form templates. Might need to do some testing.

[meganesu]

Update: Using the ConvertKit API works. (Sending a POST request in Postman does send me the email confirmation form.)