Formularios HTML

Un formulario HTML es toda la integración. Sin script, sin iframe y sin embed: pon en action el endpoint de tu formulario y conserva tu propio markup y CSS. También funciona en los creadores de sitios que permiten pegar HTML personalizado; consulta Creadores de sitios.

Un formulario básico

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label>
    Name
    <input name="name" autocomplete="name" required />
  </label>
  <label>
    Email
    <input name="email" type="email" autocomplete="email" required />
  </label>
  <label>
    Message
    <textarea name="message" rows="5"></textarea>
  </label>
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Send</button>
</form>

• method debe ser post. El navegador envía application/x-www-form-urlencoded, o multipart/form-data si defines enctype. Ambos funcionan.
• Cada control con un name se convierte en un campo. Los controles sin nombre y los desactivados no los envía el navegador.
• Los valores se guardan como texto UTF-8, normalizado a NFC, con los saltos de línea CRLF convertidos en LF y sin caracteres de control.
• La validación del navegador, como required y type="email", ayuda a las personas, pero no es una medida de seguridad. Define campos para que Ikiform aplique las reglas en el servidor.

Después del envío

Un envío correcto desde el navegador recibe una redirección 303. Ikiform elige el destino en este orden:

1. El ajuste Redirect after submit del formulario en el panel. Aquí funciona cualquier URL http: o https:, porque solo los miembros del espacio de trabajo pueden configurarlo.
2. Un campo _redirect (o _next) en el envío, si cumple las reglas de abajo.
3. Si no, la página de agradecimiento alojada de Ikiform en /f/<formId>/thanks. Cuando el formulario tiene dominios permitidos y el envío vino de una página https: de uno de ellos, la página enlaza de vuelta a ella.

Reglas de _redirect

El valor de _redirect viene del navegador del visitante, así que Ikiform solo lo sigue cuando es una URL https: sin usuario, contraseña ni puerto personalizado, en uno de los dominios permitidos del formulario o en un subdominio de uno. Los formularios sin dominios permitidos ignoran _redirect por completo. Con los dominios permitidos configurados como example.com:

Un _redirect que no se sigue cae en la página de agradecimiento alojada; nunca provoca un error. Las peticiones JSON ignoran las redirecciones y reciben 201 con el id del envío.

Cuando se rechaza un envío

Si se rechaza un envío, por ejemplo porque falta un campo obligatorio, el navegador ve una página de error alojada con el estado HTTP del error. Enumera los problemas por etiqueta de campo y enlaza de vuelta al formulario. Consulta Errores para ver todos los códigos.

Nombres de campo y arrays

Los nombres repetidos y los que terminan en [] se convierten en arrays. Usa [] en grupos de checkboxes y en <select multiple> para que una sola opción también se guarde como array.

<fieldset>
  <legend>Topics</legend>
  <label><input type="checkbox" name="topics[]" value="billing" /> Billing</label>
  <label><input type="checkbox" name="topics[]" value="api" /> API</label>
</fieldset>

<select name="plan">
  <option value="starter">Starter</option>
  <option value="team">Team</option>
</select>

<label><input type="checkbox" name="newsletter" /> Send me product news</label>

Marcar ambos temas y la casilla del newsletter guarda:

{
  "topics": ["billing", "api"],
  "plan": "team",
  "newsletter": "on"
}

• Los nombres con corchetes, como address[city], se conservan literalmente; no se convierten en objetos anidados. Envía JSON si quieres valores anidados.
• Una checkbox sin marcar no se envía. Con un campo checkbox definido, una casilla ausente se guarda como false y una marcada como true.
• Un envío puede tener hasta 100 campos, nombres de hasta 128 caracteres y valores de hasta 16 KB. Consulta Límites.

Campos reservados

Los nombres que empiezan con _ son instrucciones para Ikiform. Nunca se guardan como respuestas.

Cualquier otro campo que empiece con _ también se descarta, así que puedes usar nombres como _source para tus propias marcas ocultas sin guardarlas.

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <input name="email" type="email" required />
  <input type="hidden" name="_subject" value="New demo request" />
  <input type="hidden" name="_redirect" value="https://example.com/thanks" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Request a demo</button>
</form>

El honeypot

El nombre predeterminado del honeypot es _gotcha. Puedes cambiarlo por formulario en Honeypot field, en los ajustes del formulario; el nombre que elijas se trata como reservado y nunca se guarda. Un atributo hidden basta para la mayoría de los bots. Si ves que se cuela spam, oculta el input fuera de la pantalla, porque algunos bots se saltan los inputs marcados como hidden:

<div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden">
  <label>
    Leave this empty
    <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" />
  </label>
</div>

Mantén tabindex="-1" y autocomplete="off" para que los usuarios de teclado y los gestores de contraseñas nunca lo rellenen.

Añadir una verificación humana

Los formularios con la verificación antispam en Ikiform no necesitan ningún cambio en tu HTML. Cuando un navegador envía sin token, Ikiform responde con una breve página "Checking you're human" en ikiform.com. Ejecuta Cloudflare Turnstile y vuelve a enviar los campos originales con el token. Tu visitante termina en la misma página de agradecimiento que antes. Consulta Protección antispam para ver el flujo completo.

Con tus propias claves de Turnstile

Si el formulario usa Your own Turnstile keys, renderiza tú el widget. Añade el campo cf-turnstile-response al envío. Los envíos sin un token válido se rechazan con 403 captcha_failed.

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <input name="email" type="email" required />
  <div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>
  <button>Send</button>
</form>