E-postskjema på en enkel side med liste i bakgrunnen

Live side uten liste er fortsatt et skilt. Jeg ble ferdig med «kontakt meg senere» da første påmelding landet i min gruppe, ikke i et skjemaverktøy jeg ikke eide.

Sti-notatet ditt

Du har live URL (eller konkret plan for den). Denne delen legger til: MailerLite-gruppe-id, API-nøkkel som hemmelighet, og ett skjema som viser suksess eller feil ærlig. Testet med din egen e-post.

Mangler live host? Du kan teste lokalt mot samme API-rute (npm run dev + .env). Målet er likevel at knappen på den publiserte siden funker når du er klar.

Historie

Jeg limte inn et innebygd skjema fra e-postverktøyet. Det virket. Til jeg ville endre teksten, stilen og hva som skjedde etterpå. Da satt jeg fast i noen andres boks.

Det som fungerte, var enklere: et lite skjema på min side, én rute på serveren (/api/subscribe), og MailerLite bakom. Nøkkelen bodde som hemmelighet hos hosten, ikke i frontend-koden. Gruppen hadde et id jeg kunne peke på.

Første gang jeg meldte meg på selv og så raden i listen, pustet jeg ut. Da visste jeg at byttet ikke var teater.

Prinsipp

Én integrasjon som lander i listen du eier, slår ti halvferdige widgets.

Du trenger ikke CRM. Du trenger e-post inn, ærlig beskjed ut, og avmelding som finnes. Listen er eiendelen. Skjemaet er døren.

Hvordan

Én sti: skjema på din side → POST /api/subscribe → MailerLite-gruppe. Ikke tre verktøy samtidig.

  1. Gruppe i MailerLite — Subscribers → Groups (eller tilsvarende) → opprett gruppen for dette prosjektet. Åpne gruppen. Gruppe-id er ofte synlig i URL-en eller under gruppeinformasjon (langt tall). Noter den i sti-notatet.
  2. API-nøkkel — MailerLite → Integrations / API → Generate new token (eller tilsvarende). Kopier nøkkelen én gang til et trygt sted.
  3. Hemmeligheter hos hosten, ikke i React — lokalt: .env med MAILERLITE_API_KEY og MAILERLITE_GROUP_ID (se .env.example). På Cloudflare Worker: Settings → Variables and Secrets (samme navn). Aldri commit nøkkelen. Aldri lim den inn i frontend-kode.
  4. Skjema på siden — e-postfelt, knapp, kort bytte ved siden av (hva de får, hvor ofte, avmeld når de vil). Frontend poster JSON med e-postfeltet (nøkkel email) til /api/subscribe.
  5. Rute som snakker med API — Vite-dev kan bruke middleware; produksjon bruker Worker. Begge kaller MailerLite med nøkkelen fra miljøet.
  6. Tilstander — suksess: «Du er på». Ugyldig e-post: rolig 422. Mangler nøkkel / serverfeil: «Noe gikk galt, prøv igjen» (ærlig 500), uten å skylde på brukeren.

Ende-til-ende-test: klikk knappen på din side → meld på med egen adresse → åpne gruppen i MailerLite → se at du ligger der.

Forklar mer Nøkkel, gruppe-id og hygiene

Hvorfor ikke nøkkel i frontend? Alt i nettleserkoden kan kopieres. En API-nøkkel der er en nøkkel på gata. Nettleseren skal bare sende e-post til din rute. Hemmeligheten blir hos serveren.

Gruppe-id er adressen innsiden av MailerLite: hvilken liste påmeldingen skal lande i. Uten den (eller med feil id) blir folk usynlige for deg.

Uten nøkkel i miljøet: gyldige kall skal feile ærlig. Falsk «Du er på» er verre enn en rolig feilmelding.

Se forskjellen i praksis:

Teater-skjema

Knapp som sier «Meld meg på» uten liste bak

Ekte påmelding

Klikk → rad i din MailerLite-gruppe (og gjerne bekreftelse i innboksen)

Vanlig felle

Å samle e-post uten ærlig bytte. «Hold deg oppdatert» er tomt. Skriv hva de får (f.eks. første steg på e-post), omtrent hvor ofte, og at de kan melde seg av. Tillit bygges der, ikke i designet på knappen.

Slik så det ut hos meg

  1. Egen gruppe per prosjekt. Gruppe-id i env.
  2. MAILERLITE_API_KEY som Worker-secret (og i lokal .env til npm run dev).
  3. Én SubscribeForm som poster til /api/subscribe. Samme subscribe-funksjon i Vite-dev og Worker.
  4. Test: egen e-post → rad i gruppen. Uten nøkkel: ærlig «Noe gikk galt».

Resultatet hos meg: påmelding jeg kunne teste ende til ende, med liste jeg faktisk eide.

Med AI

Be om hjelp til å koble, ikke til å skrive salgstekst. Lim inn:

Tekst du kan lime inn i AI

Jeg har en live (eller lokal) Vite/React-side og MailerLite.
Jeg skal ha ÉTT påmeldingsskjema → POST /api/subscribe → MailerLite-gruppe.

Hjelp meg med:
1) hvor i MailerLite jeg henter API-token og gruppe-id (steg, ikke essay)
2) env-variabler: MAILERLITE_API_KEY + MAILERLITE_GROUP_ID (lokal .env + Worker secrets)
3) hva frontend skal sende (JSON med email)
4) suksess- og feilmeldinger på rolig norsk
5) ende-til-ende-sjekkliste (melde meg på selv)

Ikke foreslå flere integrasjoner. Ikke legg API-nøkkel i frontend.
Tone: rolig, ærlig, ingen hype.

Du limer inn hemmeligheter bare der de hører hjemme (host/env), ikke i chatten hvis du kan unngå det.

I dag (under 20 min)

Opprett eller velg gruppen. Sett nøkkel og gruppe-id som secrets/env. Koble skjemaet. Melde deg på med egen e-post. Skriv i sti-notatet: «Påmelding OK» pluss gruppenavn (eller gruppe-id), eller hva som feilet så du vet neste grep.

Har du bare tid til gruppen og bytte-teksten i dag? Gjør det. Koble API i morgen. Det er greit.

Sjekk før du går videre

  • Nå: fungerende påmelding (testet med deg selv)
  • Neste (Del 9): synlighet, så Google og AI kan lese det du allerede har

Listen er i gang. Neste steg er ikke keyword-jakt. Det er å gjøre landing og artikler lesbare for bots: prerender, sitemap, Search Console. Så det du eier, også kan bli funnet.

Neste steg, når du er klar: Del 9 — Synlig for Google og AI →