Newsletter Signup on a Static Site Builder

Try to use plugins for this. For example, I use Gatsby, and my steps are:

1. install gatsby-plugin-mailchimp
2. add a mailchimp key to config
3. import a plugin method and use it in ordinary react form, created with form library at your taste(I would recommend react-hook-form)

Using approach from above, styling a form will take a longer than just making it work.

I use Mailchimp for this same purpose, it will work in a static generator since you are posting to their endpoint.

The way I solve this is I have a small backend that does the actual call to the API. I actually use the same backend to do redirection for multiple newsletters.

You're right, using an API key on the client-side is not safe. This is because it can be extracted from your site and used by anyone.

I've just added Zapier (zapier.com) integrations to my product Form Flare (formflare.io). Form Flare would act as the back-end for you client-side app. Forms would be submitted to Form Flare then webhooks would kick off any Zapier integrations you had configured (ie. slack notification, append form data to google spreadsheet, add email to Email Octopus...etc).

Form Flare also has some additional nice features like spam filtering, submission archive...etc, which you might be interested in.

#Apologies for shameless plug.

Normally email marketing providers like mail chimp, mailerlite etc. provide the HTML code that you can use for people to subscribe, and that doesn’t require revealing an api key.