Menambahkan formulir kontak ke website statis Amazon S3

Endpoint website S3 menjawab POST formulir dengan 405 MethodNotAllowed, jadi arahkan action formulir ke endpoint Ikiform Anda. Karena endpoint-nya http: biasa, _redirect kembali ke sana tidak pernah diikuti; atur Redirect after submit di pengaturan formulir, atau pasang CloudFront di depannya untuk https:. Dengan CloudFront di depan REST endpoint bucket, redirect ke nama file lengkap seperti thanks.html, karena default root object hanya berlaku untuk root.

Apa yang berbeda di S3

Bucket yang dikonfigurasi untuk static website hosting mendapat website endpoint sendiri, seperti http://www.example.com.s3-website-us-east-1.amazonaws.com. AWS mendokumentasikan bahwa endpoint ini hanya mendukung request GET dan HEAD pada objek. Kiriman formulir mendapat halaman error 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>

Tiga ciri S3 lainnya memengaruhi formulir kontak:

Untuk situs https:, AWS merekomendasikan Amplify Hosting, yang berjalan di CloudFront, atau CloudFront di depan bucket. Formulir berfungsi dengan keduanya. Yang berubah adalah ke mana pengunjung berakhir setelah mengirim.

CloudFront origin yang mana

CloudFront bisa membaca dari bucket dengan dua cara, dan pilihannya menentukan bentuk URL terima kasih Anda:

Nama file lengkap berfungsi dengan keduanya, itulah sebabnya contoh-contohnya memakai itu. Jika Anda tidak ingin mengelola CloudFront sendiri, Amplify Hosting bisa deploy dari bucket dengan https: dan CDN terkelola; formulir juga tidak perlu diubah di sana.

Formulirnya

Situs S3 sering kali situs perusahaan, jadi formulir ini meminta email kantor dan nama perusahaan. Upload sebagai contact.html di samping 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>

• _redirect mengarah ke domain CloudFront, dengan nama file. Redirect hanya diikuti jika www.example.com atau example.com ada di Allowed domains.
• Di endpoint http: polos, hapus input _redirect dan atur Redirect after submit ke halaman terima kasih sebagai gantinya. Pengaturan itu menerima URL http:, karena hanya tim Anda yang bisa mengubahnya.
• Pertahankan email sebagai nama field. Email notifikasi memakainya sebagai alamat reply-to.

Di situs perusahaan, biasanya lebih dari satu orang membaca inbox kontak. Tambahkan hingga 10 penerima notifikasi terkonfirmasi ke formulir; masing-masing menerima pesan, dan siapa pun yang menekan Reply langsung menjawab pengirim. Jika pesan juga perlu sampai ke channel bersama atau antrean tiket, tambahkan webhook bertanda tangan dan arahkan lewat Zapier atau kode Anda sendiri. Field company datang sebagai teks biasa, jadi siap difilter di kedua tempat.

Sebelum upload, uji halaman dari server lokal dengan localhost di Allowed domains. Kiriman dari localhost dihitung sebagai uji, jadi Anda bisa menyempurnakan formulir sebelum bucket menyajikannya.

Sinkronkan folder ke bucket, lalu invalidate halaman di CloudFront agar formulir baru langsung disajikan:

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

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

Domain yang diizinkan di host AWS

Jangan pernah menambahkan amazonaws.com, sufiks regional s3-website, atau cloudfront.net begitu saja. Setiap bucket atau distribusi di dunia akan cocok. AWS mendaftarkan domain website endpoint S3 di Public Suffix List untuk alasan yang sama: setiap bucket adalah situs terpisah.

Header lewat CloudFront

Metadata objek S3 tidak bisa mengatur Content-Security-Policy, jadi atur di response headers policy CloudFront dan pasang ke default cache behavior distribusi. Nilai header dibatasi 1.783 karakter:

{
  "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

Pastikan berfungsi

1. Tambahkan domain dari tabel di atas, ditambah localhost selama pengujian.
2. Kirim dari domain CloudFront Anda. Anda seharusnya mendarat di thanks.html di domain Anda sendiri.
3. Jika website endpoint polos juga tetap publik, kirim dari sana dan pastikan Anda sampai di halaman yang diatur di Redirect after submit.
4. Buka Submissions di dashboard. Kiriman baru ada di sana dengan setiap field yang Anda kirim.
5. Cek inbox setiap penerima notifikasi. Masing-masing mendapat email berisi field, dan Reply terkirim ke pengirim formulir jika formulir punya field email.
6. Tidak ada yang masuk? Ubah filter status di dashboard ke Spam. Spam mendapat jawaban sukses yang sama dengan kiriman asli.

Hal yang sering menjebak

Pertanyaan