L'attribut action des formulaires HTML, expliqué

L'attribut action est l'URL à laquelle un formulaire envoie ses données. Une valeur relative est résolue par rapport à l'adresse de la page, une valeur vide ou absente désigne la page elle-même, et le formaction d'un bouton d'envoi la remplace pour ce bouton. Sur un site statique, définissez-la sur l'URL complète d'un backend de formulaires comme https://ikiform.com/f/<formId>, car votre propre hébergeur ne peut pas recevoir le POST.

La plupart des formulaires cassés sur les sites statiques le sont à cause de ce seul attribut. Le balisage semble correct, le bouton fonctionne, et le navigateur affiche un 405 ou une page blanche, parce que les données sont parties vers un endroit qui ne peut pas les recevoir. Cette page montre exactement où une action donnée envoie les données, puis utilise formaction pour diriger un même formulaire vers deux boîtes de réception.

Ce qui change ici

action est une URL comme n'importe quel href, à une nuance près : un formulaire sans action ne reste pas inactif, il envoie à la page sur laquelle il se trouve. Sur un site rendu côté serveur, cette page peut traiter l'envoi. Sur un hébergeur statique, elle ne le peut pas, donc une action absente ou relative n'échoue qu'après le déploiement.

Où chaque valeur envoie les données

Prenons une page à https://example.com/company/contact.html et cinq formulaires dessus :

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
<form action="/api/contact" method="post">
<form action="send" method="post">
<form action="" method="post">
<form method="post">

Vérifier ce que le navigateur utilisera

Dans la console du navigateur, l'attribut et la propriété diffèrent. getAttribute renvoie ce que vous avez écrit ; la propriété action renvoie l'URL résolue vers laquelle le navigateur enverra réellement :

const form = document.querySelector("form");
form.getAttribute("action");
form.action;

Si form.action affiche votre propre domaine, c'est là que vont les données. Les créateurs de sites comme Webflow et Framer définissent souvent action depuis leur propre panneau de paramètres, donc vérifiez la page publiée, pas votre source. Les guides des créateurs de sites indiquent où chacun la conserve.

Un formulaire, deux boîtes de réception

Le formaction d'un bouton d'envoi remplace l'action du formulaire pour ce bouton uniquement. Ici, un même ensemble de champs va vers deux formulaires Ikiform. Ask support envoie au formulaire du support, Talk to sales au formulaire commercial, et chaque formulaire Ikiform envoie un e-mail à ses propres destinataires :

<form action="https://ikiform.com/f/frm_supportxxxxxxxxx" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="message">How can we help?</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Ask support</button>
  <button formaction="https://ikiform.com/f/frm_salesxxxxxxxxxxx">Talk to sales</button>
</form>

• Chaque formulaire Ikiform a ses propres destinataires de notifications, paramètres anti-spam et webhooks, donc le support et l'équipe commerciale ne voient jamais le courrier de l'autre.
• Les deux formulaires ont besoin de la même définition de champs, ou d'aucune. Avec des champs définis, un champ qu'un formulaire ne connaît pas est refusé avec 422.
• Les autres attributs form* fonctionnent de la même façon : formmethod, formenctype, formnovalidate et formtarget. Un bouton Save draft avec formnovalidate ignore les vérifications du navigateur.
• formaction ne fonctionne que sur les boutons d'envoi : <button>, <input type="submit"> et <input type="image">.

L'alternative est un seul formulaire Ikiform avec un champ topic, et un tri par sujet dans un webhook ou dans les filtres de votre boîte de réception. Cela garde une seule liste et un seul export. Deux formulaires sont plus simples quand les deux équipes ne doivent pas du tout partager de destinataires.

action avec des paramètres d'URL

Avec method="get", le navigateur remplace les paramètres d'URL de l'action par les champs du formulaire. Le lang=de du premier formulaire ci-dessous disparaît silencieusement ; le second le garde sous forme d'input masqué :

<form action="/search?lang=de" method="get">
  <input name="q" />
</form>

<form action="/search" method="get">
  <input name="q" />
  <input type="hidden" name="lang" value="de" />
</form>

Avec method="post", les paramètres d'URL sont conservés, car les champs vont dans le corps. Cela ne change rien pour Ikiform : les paramètres de requête de l'URL de l'endpoint ne sont pas stockés, donc utilisez des inputs masqués pour les valeurs que vous voulez conserver.

Inputs en dehors du formulaire

Les mises en page ont parfois besoin d'un input qui n'est pas dans l'élément <form>, comme une inscription en pied de page à côté d'autres contenus. L'attribut form d'un input ou d'un bouton le rattache à un formulaire par son id, et il envoie à l'action de ce formulaire :

<form id="newsletter" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post"></form>

<footer>
  <input form="newsletter" name="email" type="email" required />
  <button form="newsletter">Subscribe</button>
</footer>

Actions mailto: et javascript:

action="mailto:you@example.com" demande à l'application de messagerie du visiteur d'ouvrir un message avec les champs. Rien n'est envoyé s'il n'a pas d'application de messagerie configurée et n'appuie pas sur envoyer, et vous ne savez jamais qu'il a essayé. action="javascript:..." exécute du code au lieu d'envoyer et est bloqué par la plupart des politiques de sécurité du contenu. Les deux méritent d'être remplacés par un vrai endpoint.

Vérifiez que tout fonctionne

1. Dans Allowed domains du formulaire, ajoutez le domaine de votre site, plus localhost pendant le développement. Laissez vide pour accepter les envois de partout.
2. Ouvrez la page publiée, pas votre source, et exécutez document.querySelector("form").action dans la console. Elle affiche votre URL Ikiform complète.
3. Envoyez le formulaire. Le panneau Réseau montre un POST vers ikiform.com qui a reçu 303, pas un POST vers votre propre domaine.
4. Dans le formulaire à deux boîtes de réception, envoyez une fois avec chaque bouton. Chaque soumission apparaît sous son propre formulaire dans le tableau de bord.
5. Vérifiez la boîte de réception de chaque destinataire des notifications. Chacun reçoit un e-mail avec les champs, et Reply répond à l'expéditeur quand le formulaire a un champ email.

Pièges

Pour le déroulement complet d'un envoi, du clic à la redirection, consultez la vue d'ensemble. Tout ce que l'endpoint accepte se trouve dans Formulaires HTML.

Questions