Creare un modulo Mailchimp con React

Scopri come creare un modulo React per creare iscritti nel tuo account Mailchimp.

1. Prepara il tuo progetto

Installa la libreria helper per React nel tuo progetto:

npm install @formspree/react

Poi aggiungi il FormspreeProvider al componente principale della tua app. Per esempio, se usi Next.js, ecco come potrebbe apparire il tuo file pages/_app.js:

import { FormspreeProvider } from '@formspree/react';
function App({ Component, pageProps }) {
  return (
    <FormspreeProvider project="{your-project-id}">
      <Component {...pageProps} />
    </FormspreeProvider>
  );
}
export default App;

2. Configura il tuo modulo

Nel tuo file formspree.json, aggiungi un modulo di opt-in.

{
  "forms": {
    "optInForm": {
      "name": "Opt-In Form",
      "actions": [{
        "app": "mailchimp",
        "type": "addOrUpdateContact",
        "audience": "8djs8fg8d",
        "apiKey": "$MAILCHIMP_APIKEY"
      }]
    }
  }
}

Poi, distribuisci le tue modifiche su Formspree:

formspree deploy -k <your-deploy-key>

Scopri di più sulle azioni di Mailchimp →

3. Crea il tuo modulo

Collega il componente del tuo modulo usando l’hook useForm:

import React from 'react';
import { useForm, ValidationError } from '@formspree/react';
function OptInForm() {
  const [state, handleSubmit] = useForm("optInForm");
  if (state.succeeded) {
    return <p>Thanks for joining!</p>;
  }
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">
        Email Address
      </label>
      <input
        id="email"
        type="email" 
        name="email"
      />
      <ValidationError 
        prefix="Email" 
        field="email"
        errors={state.errors} 
      />
      <button type="submit" disabled={state.submitting}>
        Sign Up
      </button>
    </form>
  );
}
export default OptInForm;

Scopri di più sulla CLI di Formspree →
Scopri di più su Formspree e React →