contact-form

• htmxを用いたコンタクトフォームの実験
• 問い合わせ内容をGoogleスプレッドシートに記録します。
• Google Sheets APIを使用。
• APIはExpressで実装。
• Vercelにサーバーレスファンクションを用いてデプロイ。
  • Using Express.js with Vercel

必要な作業

1. server\inquiryProcessor.jsのSPREADSHEET_IDにGoogleスプレッドシートのIDを設定する。これは、https://docs.google.com/spreadsheets/d/スプレッドシートID/editのスプレッドシートの部分です。
2. Googleスプレッドシートの共有設定で、.envファイルにあるclient_emailのメールアドレスを編集者として設定する。
3. 以下のような内容の.envファイルが必要です。

GOOGLE_SERVICE_ACCOUNT_CREDENTIALS='
{
  "type": "service_account",
  "project_id": "contact-form-******",
  "private_key_id": "d00be****\n-----END PRIVATE KEY-----\n",
  "client_email": "contact-form-api@contact-form-******.iam.gserviceaccount.com",
  "client_id": "********",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/contact-form-api%40contact-form-******.iam.gserviceaccount.com",
  "universe_domain": "googleapis.com"
}'
SPREADSHEET_ID = 'xxxxx';