El archivo formspree.json

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 a ejecutar después del envío
fields	Object	{}	Metadatos opcionales sobre los campos del formulario
captcha	Object	{}	Configuración opcional del captcha.

El objeto Captcha debe seguir este formato:

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

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

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
	autoresponse	Envía una respuesta al remitente. Leer más
	webhook	Envía un webhook a una URL dada. Leer más
mailchimp	addOrUpdateContact	Crea suscriptores en Mailchimp. Leer más
mailerlite	addSubscriber	Agrega suscriptores a MailerLite. Leer más
convertkit	applyTags	Crea suscriptores y aplica etiquetas en ConvertKit. Leer más
hubspot	createContact	Crea contactos en Hubspot. Leer más
freshdesk	createSupportTicket	Crea tickets en Freshdesk. Leer más
zendesk	createSupportTicket	Crea tickets en Zendesk. Leer más
airtable	sendToTable	Agrega filas en Airtable. Leer más
trello	createCard	Crea tarjetas en Trello. Leer más
discord	sendMessage	Envía mensajes a Discord. Leer más
gorgias	createSupportTicket	Crea tickets en Gorgias. Leer más

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

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

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

Ejemplo

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