# Démarrage rapide Remix

Ajoutez un formulaire de contact fonctionnel à votre application Remix. Vous écrivez le formulaire, et Formerie le vérifie, le conserve et vous l’envoie par courriel.

## Installer

npm:

```sh
npm install @formerie/remix
```

pnpm:

```sh
pnpm add @formerie/remix
```

Yarn:

```sh
yarn add @formerie/remix
```

Bun:

```sh
bun add @formerie/remix
```

Les paquets Formerie sont en alpha, donc leurs API peuvent encore changer d’une version à l’autre.

## Ajouter le formulaire

Utilisez ce fichier comme composant de route, par exemple `app/routes/contact-form.tsx`. Le crochet fonctionne comme celui du [démarrage rapide React](/fr/guides/quickstart-react/).

```tsx
import { useFormerieSubmit } from "@formerie/remix";

export default function ContactForm() {
  const { submit, state } = useFormerieSubmit({ workspace: "acme", form: "contact" });

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        submit({ fields: Object.fromEntries(new FormData(event.currentTarget)) });
      }}
    >
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button disabled={state.status === "submitting"}>Send</button>
      {state.result?.ok === true && <p>Thanks!</p>}
      {state.result?.ok === false && <p>{state.result.error.message}</p>}
    </form>
  );
}
```

Le `name` de chaque champ de saisie correspond au champ qu’il remplit dans Formerie.

## Configurer le formulaire dans l’application

1. Ouvrez [app.formerie.com](https://app.formerie.com) et créez un formulaire nommé **Contact**. Il vient avec les
   champs de nom, de courriel et de message que ce code envoie.
2. Dans l’onglet **Livraison**, ajoutez votre adresse courriel, puis choisissez **Enregistrer la livraison**. Confirmez le
   courriel que Formerie vous envoie.
3. Dans l’onglet **Publication**, choisissez **API seulement** et ajoutez l’adresse qu’affiche votre serveur de développement, comme
   `http://localhost:5173`, sous **Adresses de vos sites**. `localhost` et `127.0.0.1` comptent comme deux adresses différentes.
   Ajoutez l’adresse de votre site en ligne de la même façon au moment de le déployer.
4. Choisissez **Publier le formulaire**.
5. Dans le code ci-dessus, remplacez `acme` par l’identifiant d’espace de travail affiché dans l’onglet **Publication**.

## Vérifier que c’est arrivé

Lancez votre application, remplissez le formulaire et envoyez-le. « Thanks! » s’affiche dans la page, un texte que vous
pouvez changer. Dans l’application Formerie, votre réponse apparaît sous **Soumissions**, et son courriel sous **Livraisons**.

Vous voyez une erreur CORS ou `NETWORK_ERROR`? L’adresse de votre site n’est pas encore dans l’onglet **Publication**, ou vous n’avez pas republié
depuis que vous l’avez ajoutée. Consultez [Dépannage](/fr/guides/troubleshooting/).

## Aller plus loin

### À partir de votre serveur

Une action de route peut renvoyer la réponse de Formerie en JSON. Comme la fonction de Next.js, elle ne fonctionne pas encore avec un
formulaire qui demande une vérification humaine. Lisez [ce que l’approche par le serveur implique](/fr/guides/framework-entry-points/#à-partir-de-votre-serveur) avant de la choisir.

```ts
import { createFormerieRemixAction } from "@formerie/remix";

export const action = createFormerieRemixAction({ workspace: "acme", form: "contact" });
```

## À lire ensuite

- [Recettes](/fr/guides/recipes/) : demandes de soumission, sondages et acheminement par sujet
- [Afficher les erreurs de champ et plus encore](/fr/guides/framework-entry-points/#aller-plus-loin)
- [SDK JavaScript](/fr/guides/javascript-sdk/) et [API](/fr/guides/api-reference/) : la référence complète