Ajouter un formulaire de contact à un site statique Amazon S3

Un website endpoint S3 répond à un POST de formulaire par 405 MethodNotAllowed : faites donc pointer l'action du formulaire vers votre endpoint Ikiform. Comme l'endpoint est en http: simple, un _redirect vers lui n'est jamais suivi ; définissez Redirect after submit dans les réglages du formulaire, ou placez CloudFront devant pour avoir du https:. Avec CloudFront devant le REST endpoint du bucket, redirigez vers un nom de fichier complet comme thanks.html, car l'objet racine par défaut ne s'applique qu'à la racine.

Ce qui change sur S3

Un bucket configuré pour l'hébergement de site statique a son propre website endpoint, comme http://www.example.com.s3-website-us-east-1.amazonaws.com. AWS indique qu'il ne prend en charge que les requêtes GET et HEAD sur les objets. Un envoi de formulaire reçoit une page d'erreur HTML :

<html>
<head><title>405 Method Not Allowed</title></head>
<body>
<h1>405 Method Not Allowed</h1>
<ul>
<li>Code: MethodNotAllowed</li>
<li>Message: The specified method is not allowed against this resource.</li>
<li>Method: POST</li>
<li>ResourceType: OBJECT</li>

Trois autres particularités de S3 façonnent le formulaire de contact :

Pour un site en https:, AWS recommande Amplify Hosting, qui repose sur CloudFront, ou CloudFront devant le bucket. Le formulaire fonctionne dans les deux cas. Ce qui change, c'est l'endroit où arrive le visiteur après l'envoi.

Quelle origine CloudFront

CloudFront peut lire le bucket de deux façons, et ce choix détermine la forme de votre URL de remerciement :

Un nom de fichier complet fonctionne dans les deux cas, c'est pourquoi les exemples en utilisent un. Si vous préférez ne pas gérer CloudFront vous-même, Amplify Hosting peut déployer depuis le bucket avec https: et un CDN géré ; le formulaire n'y demande aucune modification non plus.

Le formulaire

Les sites S3 sont souvent des sites d'entreprise : ce formulaire demande donc un e-mail professionnel et le nom de l'entreprise. Téléversez-le sous le nom contact.html à côté de thanks.html :

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name" required />

  <label for="email">Work email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="company">Company</label>
  <input id="company" name="company" autocomplete="organization" />

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

  <input type="hidden" name="_redirect" value="https://www.example.com/thanks.html" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button type="submit">Send</button>
</form>

• Le _redirect pointe vers le domaine CloudFront, avec un nom de fichier. Il n'est suivi que si www.example.com ou example.com figure dans Allowed domains.
• Sur l'endpoint http: nu, retirez l'input _redirect et réglez plutôt Redirect after submit sur la page de remerciement. Ce réglage accepte les URL http:, car seule votre équipe peut le modifier.
• Gardez email comme nom de champ. Les e-mails de notification l'utilisent comme adresse de réponse.

Sur un site d'entreprise, plusieurs personnes lisent généralement la boîte de contact. Ajoutez jusqu'à 10 destinataires de notification confirmés au formulaire ; chacun reçoit le message, et celui qui clique sur Reply répond directement à l'expéditeur. Si les messages doivent aussi arriver dans un canal partagé ou une file de tickets, ajoutez un webhook signé et acheminez-le via Zapier ou votre propre code. Le champ company arrive en texte brut, prêt à être filtré dans l'un ou l'autre.

Avant de téléverser, testez la page depuis un serveur local avec localhost dans Allowed domains. Les envois depuis localhost comptent comme des tests : vous pouvez donc mettre le formulaire au point avant même que le bucket ne le serve.

Synchronisez le dossier avec le bucket, et invalidez les pages dans CloudFront pour que le nouveau formulaire soit servi tout de suite :

aws s3 sync ./site s3://www.example.com --delete

aws cloudfront create-invalidation --distribution-id E1EXAMPLE --paths "/contact.html" "/thanks.html"

Domaines autorisés sur les hôtes AWS

N'ajoutez jamais seuls amazonaws.com, un suffixe régional s3-website ou cloudfront.net. Tous les buckets ou distributions du monde correspondraient. AWS inscrit les domaines des website endpoints S3 dans la Public Suffix List pour la même raison : chaque bucket est un site distinct.

Les en-têtes via CloudFront

Les métadonnées d'objet S3 ne peuvent pas définir de Content-Security-Policy : définissez-la dans une politique d'en-têtes de réponse CloudFront et associez-la au comportement de cache par défaut de la distribution. La valeur de l'en-tête est limitée à 1 783 caractères :

{
  "Name": "site-csp",
  "SecurityHeadersConfig": {
    "ContentSecurityPolicy": {
      "Override": true,
      "ContentSecurityPolicy": "default-src 'self'; form-action 'self' https://ikiform.com; connect-src 'self' https://ikiform.com"
    }
  }
}

aws cloudfront create-response-headers-policy --response-headers-policy-config file://csp-policy.json

Vérifiez que tout fonctionne

1. Ajoutez les domaines du tableau ci-dessus, plus localhost pendant vos tests.
2. Envoyez depuis votre domaine CloudFront. Vous devez arriver sur thanks.html sur votre propre domaine.
3. Si vous gardez aussi le website endpoint nu public, envoyez depuis celui-ci et vérifiez que vous arrivez sur la page définie dans Redirect after submit.
4. Ouvrez Submissions dans le tableau de bord. La nouvelle soumission y est, avec tous les champs envoyés.
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.
6. Rien n'est arrivé ? Passez le filtre de statut du tableau de bord sur Spam. Le spam reçoit la même réponse de succès qu'une vraie soumission.

Pièges

Questions