# El archivo formspree.json

> Formspree Docs · Usar el CLI · 14 de julio de 2023

El archivo `formspree.json` es donde puedes crear y configurar formularios para un sitio web. Por ejemplo, puedes crear formularios de opt-in para una lista de Mailchimp, o formularios de contacto que te envíen un correo cuando se envíen. El CLI de Formspree usa el archivo `formspree.json` al desplegar tus formularios a los servidores de Formspree.

## Configuración del formulario

Los formularios aceptan los siguientes parámetros de configuración:

| Propiedad | Tipo | Por defecto | Descripción |
| --- | --- | --- | --- |
| `name` |  String |   |  El nombre del formulario (requerido) |
| `actions` |  Array |  `[]` |  Un array de [acciones](#h_01EJPVWA6TJM62HSQ6ED53JYGE) a ejecutar después del envío |
| `fields` |  Object |  `{}` |  Metadatos opcionales sobre los [campos del formulario](#field-rules) |
| `captcha` |  Object |  `{}` |  Configuración opcional del captcha. |

El objeto **Captcha** debe seguir este formato:

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

**Ejemplo** Aquí tienes un ejemplo de archivo `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" }
      ]
    }
  }
}
```

## Acciones posteriores al envío

Los formularios aceptan un array de acciones a ejecutar después del envío. Tenemos algunas acciones integradas y una lista creciente de integraciones con otras aplicaciones:

| App | Type | Descripción |
| --- | --- | --- |
|   |  `email` |  Envía un correo de notificación. [Leer más](/es/articles/using-the-cli/send-a-notification-email/) |
|   |  `autoresponse` |  Envía una respuesta al remitente. [Leer más](/es/articles/using-the-cli/send-a-confirmation-email/) |
|   |  `webhook` |  Envía un webhook a una URL dada. [Leer más](/es/articles/using-the-cli/send-a-webhook/) |
| `mailchimp` |  `addOrUpdateContact` |  Crea suscriptores en Mailchimp. [Leer más](/es/articles/using-the-cli/add-subscribers-to-a-mailchimp-list/) |
| `mailerlite` |  `addSubscriber` |  Agrega suscriptores a MailerLite. [Leer más](/es/articles/using-the-cli/add-subscribers-to-mailerlite/) |
| `convertkit` |  `applyTags` |  Crea suscriptores y aplica etiquetas en ConvertKit. [Leer más](/es/articles/using-the-cli/add-subscribers-to-convertkit/) |
| `hubspot` |  `createContact` |  Crea contactos en Hubspot. [Leer más](/es/articles/using-the-cli/create-leads-and-contacts-in-hubspot-using-the-formspree-cli/) |
| `freshdesk` |  `createSupportTicket` |  Crea tickets en Freshdesk. [Leer más](/es/articles/using-the-cli/create-support-tickets-in-freshdesk/) |
| `zendesk` |  `createSupportTicket` |  Crea tickets en Zendesk. [Leer más](/es/articles/using-the-cli/create-support-tickets-in-zendesk/) |
| `airtable` |  `sendToTable` |  Agrega filas en Airtable. [Leer más](/es/articles/using-the-cli/send-submissions-to-airtable/) |
| `trello` |  `createCard` |  Crea tarjetas en Trello. [Leer más](/es/articles/using-the-cli/create-cards-in-trello/) |
| `discord` |  `sendMessage` |  Envía mensajes a Discord. [Leer más](/es/articles/using-the-cli/use-discord-to-receive-messages/) |
| `gorgias` | `createSupportTicket` |  Crea tickets en Gorgias. [Leer más](/es/articles/using-the-cli/create-support-tickets-in-gorgias/) |

Aquí tienes un ejemplo de archivo `formspree.json` con una acción de Mailchimp:

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

## Reglas de campo

Opcionalmente puedes configurar qué campos se permiten, el tipo que deben tener y varias reglas de validación para ellos.  
  
**Nota:** por defecto, Formspree aceptará cualquier campo que pases desde el lado del cliente. Sin embargo, definir aquí tus campos te permite añadir validaciones (como marcar un campo como requerido) y darles nombres legibles.  
  
Los objetos de campo pueden contener las siguientes propiedades:

| Clave | Tipo | Descripción |
| --- | --- | --- |
| `required` |  Boolean | Especifica si el campo es requerido |
| `type` |  String | El tipo del campo. Uno de `text`, `email`, `numeric`, `datetime-local`, `url` o `file`. |
| `min` |  Number or String | Especifica el valor mínimo. Puede usarse con los tipos `numeric`, `datetime-local` o `file`. Ten en cuenta que debes especificar el tipo de campo, de lo contrario esta regla no se aplicará. |
| `max` |  Number or String | Especifica el valor máximo. Puede usarse con los tipos `numeric`, `datetime-local` o `file`. Ten en cuenta que debes especificar el tipo de campo, de lo contrario esta regla no se aplicará. |
| `minlength` |  Number | Especifica el valor mínimo. Puede usarse con los tipos `text`, `url` o `email`. Ten en cuenta que debes especificar el tipo de campo, de lo contrario esta regla no se aplicará. |
| `maxlength` |  Number | Especifica el valor máximo. Puede usarse con los tipos `text`, `url` o `email`. Ten en cuenta que debes especificar el tipo de campo, de lo contrario esta regla no se aplicará. |
| `accept` |  String list | Especifica los tipos de contenido de archivo válidos. El valor debe ser una lista de strings con [tipos MIME válidos](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types). Ten en cuenta que debes establecer la clave type como `file`, de lo contrario esta regla no se aplicará. |

**Notas:  
**El tipo `datetime-local` acepta formatos ISO. El formato por defecto es `yyyy-mm-dd hh:mm:ss`. Este tipo también acepta solo fechas, por ejemplo `yyyy-mm-dd`. Para más información, consulta [esto](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local).

Los valores `min` y `max` para los tipos `file` son los tamaños mínimo y máximo de archivo en MiB.

**Ejemplo**

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