Creare un modulo ConvertKit con React

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

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. Tieni presente che i tags che fornisci devono già esistere nel tuo account ConvertKit.

{
  "forms": {
    "optInForm": {
      "name": "Opt-In Form",
      "actions": [{ 
        "app": "convertkit", 
        "type": "applyTags",
        "tags": ["Newsletter"]
      }]
    }
  }
}

Poi, distribuisci le tue modifiche su StaticKit:

formspree deploy -k <your-deploy-key>

Riceverai le istruzioni su come salvare il tuo API secret di ConvertKit.
Scopri di più sulle azioni di ConvertKit →

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 →