formspree.json ファイル

formspree.json ファイルは、ウェブサイト用のフォームを作成および設定するためのファイルです。たとえば、Mailchimp リストのオプトインフォームや、送信時にメールを送る問い合わせフォームなどを作成できます。formspree.json ファイルは、フォームを Formspree サーバーにデプロイする際に Formspree CLI によって使用されます。

フォーム設定

フォームは以下の設定パラメータを受け付けます：

プロパティ	型	デフォルト	説明
`name`	String		フォームの名前（必須）
`actions`	Array	`[]`	送信後に実行するアクションの配列
`fields`	Object	`{}`	フォームフィールドに関するオプションのメタデータ
`captcha`	Object	`{}`	オプションのcaptcha設定

Captcha オブジェクトは以下の形式に従う必要があります：

"captcha": {
    "type": "recaptcha",                  // Required
    "recaptchaSecret": "my-secret"        // Optional
}

例 formspree.json ファイルの例：

{
  "forms": {
    "contact": {
      "name": "Contact Form",
      "captcha": {
        "type": "recaptcha",
        "recaptchaSecret": "my-secret"
      },
      "fields": {
        "email": { "type": "email", "required": true },
        "message": { "type": "text", "required": true }
      },
      "actions": [
        { "type": "email", "to": "john@example.com" }
      ]
    }
  }
}

送信後のアクション

フォームは送信後に実行するアクションの配列を受け付けます。組み込みアクションがいくつかあり、他のアプリとの連携も増えています：

アプリ	タイプ	説明
	`email`	通知メールを送信します。詳細を読む
	`autoresponse`	送信者に返信を送ります。詳細を読む
	`webhook`	指定のURLにwebhookを送ります。詳細を読む
`mailchimp`	`addOrUpdateContact`	Mailchimpに購読者を作成します。詳細を読む
`mailerlite`	`addSubscriber`	MailerLiteに購読者を追加します。詳細を読む
`convertkit`	`applyTags`	ConvertKitに購読者を作成してタグを適用します。詳細を読む
`hubspot`	`createContact`	Hubspotにコンタクトを作成します。詳細を読む
`freshdesk`	`createSupportTicket`	Freshdeskにチケットを作成します。詳細を読む
`zendesk`	`createSupportTicket`	Zendeskにチケットを作成します。詳細を読む
`airtable`	`sendToTable`	Airtableに行を追加します。詳細を読む
`trello`	`createCard`	Trelloにカードを作成します。詳細を読む
`discord`	`sendMessage`	Discordにメッセージを送信します。詳細を読む
`gorgias`	`createSupportTicket`	Gorgiasにチケットを作成します。詳細を読む

Mailchimp アクションを使用した formspree.json ファイルの例：

{
  "forms": {
    "contact": {
      "name": "Contact Form",
      "actions": [
        {
          "app": "mailchimp",
          "type": "addOrUpdateContact",
          "audience": "8djs8fg8d",
          "apiKey": "$MAILCHIMP_APIKEY"
        }
      ]
    }
  }
}

フィールドルール

許可するフィールド、その型、およびさまざまなバリデーションルールをオプションで設定できます。

注意： デフォルトでは、Formspree はクライアントサイドから渡されたすべてのフィールドを受け入れます。ただし、ここでフィールドを定義することで、バリデーション（フィールドを必須とするなど）を追加したり、人間が読みやすい名前を付けることができます。

フィールドオブジェクトには以下のプロパティを含めることができます：

キー	型	説明
`required`	Boolean	フィールドが必須かどうかを指定します
`type`	String	フィールドの型。`text`、`email`、`numeric`、`datetime-local`、`url`、`file` のいずれか。
`min`	Number または String	最小値を指定します。`numeric`、`datetime-local`、`file` 型で使用できます。このルールを適用するにはフィールドの型を指定する必要があります。
`max`	Number または String	最大値を指定します。`numeric`、`datetime-local`、`file` 型で使用できます。このルールを適用するにはフィールドの型を指定する必要があります。
`minlength`	Number	最小の長さを指定します。`text`、`url`、`email` 型で使用できます。このルールを適用するにはフィールドの型を指定する必要があります。
`maxlength`	Number	最大の長さを指定します。`text`、`url`、`email` 型で使用できます。このルールを適用するにはフィールドの型を指定する必要があります。
`accept`	String list	有効なファイルのコンテンツタイプを指定します。値は有効なMIMEタイプの文字列リストである必要があります。このルールを適用するにはtypeキーを `file` に設定する必要があります。

**注意：
**datetime-local 型はISO形式を受け付けます。デフォルト形式は yyyy-mm-dd hh:mm:ss です。この型は日付のみ（例：yyyy-mm-dd）も受け付けます。詳細はこちらをご確認ください。

file 型の min および max の値は、最小・最大ファイルサイズ（MiB単位）です。

例

{
  "forms": {
    "contact": {
      "name": "Contact Form",
      "fields": {
        "email": {
          "type": "email",
          "required": true
        },
        "birthdate": {
          "type": "datetime",
          "required": true,
          "min": "2002-09-21 13:13:00"        /* also accept dates */
        },
        "document": {
          "type": "file",
          "contentType": ["application/pdf"],  /* please use valid MIME Types */
          "min": 10                            /* MiB */
        }
      }
    }
  }
}