Formularios en tu web

Un formulario en tu web deja que los visitantes se apunten, hagan una pregunta o reserven. Cada uno que se envía llega a tu lista de personas. Un formulario que funciona necesita cuatro cosas, y todas se comprueban cuando tu IA pone la web en línea: la dirección de formularios, co1-app.json, la comprobación antibots y una página de gracias.

La forma fácil: crea la página a partir de page.json con la habilidad build-a-landing-page. Hace las cuatro cosas por ti. El resto de esta página es para formularios escritos a mano.

Cuando tu IA pone la web en línea, un formulario escrito a mano se rechaza si:

• co1-app.json no pide forms.submit,
• co1-app.json no declara ningún formulario con ese nombre,
• un campo del formulario no es uno de los campos declarados,
• falta la comprobación de que es una persona.

Cada rechazo dice exactamente qué arreglar, así la web nunca sale en línea con un formulario que no puede funcionar.

La dirección de formularios

Un formulario envía a la dirección de formularios de la propia web, como una ruta de la web, nunca como una dirección web completa:

<form method="post" action="/api/v1/forms/join">

Aquí join es el nombre del formulario. Cada formulario que llega a tu lista de personas envía a /api/v1/forms/<form>. En las páginas públicas, el código del formulario puede ir en la página o en un archivo .js, y un formulario de otro servicio (una herramienta de newsletter, por ejemplo) puede enviar a ese servicio. En las páginas de miembros, el código va en archivos .js, y un formulario solo puede enviar a otra web si esa web aparece en co1-app.json en allowedHosts.form (mira "Tu web").

El archivo co1-app.json

Cada web con un formulario tiene un archivo llamado co1-app.json en su raíz. Dice lo que puede hacer la web, y qué formularios y campos tiene. Sin él, se rechaza el formulario de cada visitante, así que la web no se pone en línea hasta que esté.

{
  "v": 1,
  "id": "home",
  "kind": "static",
  "permissions": ["forms.submit"],
  "forms": {
    "join": {
      "thanks": "/thanks/",
      "fields": {
        "name": { "type": "text" },
        "email": { "type": "email", "required": true }
      }
    }
  }
}

• id es el nombre de la web, el mismo que el site de deploy_site.
• permissions tiene que incluir forms.submit para cualquier formulario. Vender añade checkout.create.
• Cuántos formularios puede tener una web, y cuántos campos un formulario, viene con tu plan. Si una web se pasa, la respuesta dice el número de tu plan. ¿Necesitas más? Escribe a hello@companyofone.eu y subimos el límite.
• El nombre de un formulario usa minúsculas, cifras y -.
• Cada formulario tiene al menos 1 campo.

Campos

• Cada campo del formulario tiene que estar declarado en co1-app.json, con el mismo nombre. Los nombres de campo usan minúsculas, cifras y _.
• Cada formulario necesita un campo de tipo email, para poder responder a la persona.
• Tipos de campo: text, long_text, email, phone, number, choice (con sus options), consent y date.
• Un campo puede ser required, y puede fijar su longitud max (hasta 5.000). Si no, text admite hasta 300 caracteres y long_text hasta 2.000.
• También puedes enviar utm_source, utm_medium, utm_campaign, utm_content y source sin declararlos, para ver de dónde viene la gente.

La comprobación antibots

Los formularios, los registros y las reservas comprueban que los ha enviado una persona de verdad: es la comprobación de persona. Un formulario sin la comprobación se rechaza cuando la web se pone en línea. Pon el widget dentro del formulario, con la clave real de tu web en data-sitekey, y carga una vez en la página el script de la comprobación. deploy_site con read: true da la clave como turnstile_site_key, y un rechazo por falta de comprobación también la da:

<form method="post" action="/api/v1/forms/join">
  <input name="name">
  <input name="email" type="email" required>
  <div class="cf-turnstile" data-sitekey="your site's real key"></div>
  <button type="submit">Join</button>
</form>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

Solo si de verdad no quieres la comprobación, pon "turnstile": false en co1-app.json.

La página de gracias

Da a cada formulario una página "thanks" en co1-app.json, como /thanks/, y crea esa página. Después de enviar el formulario, el visitante llega ahí. Si algo sale mal, ve una página sencilla que dice qué ha pasado, con un enlace para volver. Nunca código en bruto.

Campos que una web nunca pide

• Nada de campos de contraseña, tarjeta, banco ni código de un solo uso. Los miembros inician sesión con un código que les llega por correo, y los pagos pasan por el pago seguro.
• Un campo de boletín es una casilla visible, sin marcar, que marca el propio visitante. El código nunca la marca. Después, un sí recibe un correo para confirmarlo, y solo después de ese clic la persona está en la lista.

Probar un formulario, y lo que ves

• En una vista previa no se guarda nada de lo que envía un visitante. La página dice "Preview · nothing you send here is saved". Prueba el formulario cuando la web esté publicada.
• Cada formulario enviado llega a tu lista de personas. Sus respuestas, como una fecha, quedan como nota en la ficha de la persona. Todavía no puedes ordenar a la gente por ellas.
• Todas las personas de tu lista necesitan un correo. El teléfono es opcional.
• People, Needs you muestra quién sigue esperando tu respuesta.