# formspree.json ファイル

> Formspree Docs · CLIの使用方法 · 2023年7月14日

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

## フォーム設定

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

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

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

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

**例** `formspree.json` ファイルの例：

```javascript
{
  "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` |  通知メールを送信します。[詳細を読む](/articles/using-the-cli/send-a-notification-email/) |
|   |  `autoresponse` |  送信者に返信を送ります。[詳細を読む](/articles/using-the-cli/send-a-confirmation-email/) |
|   |  `webhook` |  指定のURLにwebhookを送ります。[詳細を読む](/articles/using-the-cli/send-a-webhook/) |
| `mailchimp` |  `addOrUpdateContact` |  Mailchimpに購読者を作成します。[詳細を読む](/articles/using-the-cli/add-subscribers-to-a-mailchimp-list/) |
| `mailerlite` |  `addSubscriber` |  MailerLiteに購読者を追加します。[詳細を読む](/articles/using-the-cli/add-subscribers-to-mailerlite/) |
| `convertkit` |  `applyTags` |  ConvertKitに購読者を作成してタグを適用します。[詳細を読む](/articles/using-the-cli/add-subscribers-to-convertkit/) |
| `hubspot` |  `createContact` |  Hubspotにコンタクトを作成します。[詳細を読む](/articles/using-the-cli/create-leads-and-contacts-in-hubspot-using-the-formspree-cli/) |
| `freshdesk` |  `createSupportTicket` |  Freshdeskにチケットを作成します。[詳細を読む](/articles/using-the-cli/create-support-tickets-in-freshdesk/) |
| `zendesk` |  `createSupportTicket` |  Zendeskにチケットを作成します。[詳細を読む](/articles/using-the-cli/create-support-tickets-in-zendesk/) |
| `airtable` |  `sendToTable` |  Airtableに行を追加します。[詳細を読む](/articles/using-the-cli/send-submissions-to-airtable/) |
| `trello` |  `createCard` |  Trelloにカードを作成します。[詳細を読む](/articles/using-the-cli/create-cards-in-trello/) |
| `discord` |  `sendMessage` |  Discordにメッセージを送信します。[詳細を読む](/articles/using-the-cli/use-discord-to-receive-messages/) |
| `gorgias` | `createSupportTicket` |  Gorgiasにチケットを作成します。[詳細を読む](/articles/using-the-cli/create-support-tickets-in-gorgias/) |

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

```javascript
{
  "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タイプ](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)の文字列リストである必要があります。このルールを適用するにはtypeキーを `file` に設定する必要があります。 |

**注意：  
**`datetime-local` 型はISO形式を受け付けます。デフォルト形式は `yyyy-mm-dd hh:mm:ss` です。この型は日付のみ（例：`yyyy-mm-dd`）も受け付けます。詳細は[こちら](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local)をご確認ください。

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

**例**

```javascript
{
  "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 */
        }
      }
    }
  }
}
```