Cómo añadir una lista de espera a un sitio de Carrd

En Carrd Pro Plus, añade un Custom form que envíe a tu endpoint de Ikiform con el método AJAX, activa la recogida de UTM y define esos campos en Ikiform. En Pro Standard, pega en su lugar un pequeño formulario HTML en un elemento Embed; envía de la forma clásica, conserva un honeypot y devuelve a la gente a una sección de agradecimiento en la misma página.

Carrd es la forma más rápida de poner online una presentación de una sola página, lo que lo convierte en el sitio natural para una lista de espera. El formulario que puedes usar depende más de tu plan de Carrd que de cualquier cosa que construyas, así que empieza por ahí.

Qué cambia en Carrd

• El plan decide el formulario. Pro Plus tiene Custom forms que envían a cualquier URL. Pro Standard tiene formularios de contacto y de registro que van a los destinos propios de Carrd, además del elemento Embed. Pro Lite no tiene formularios ni embeds.
• Send to URL no puede ocultar un honeypot. El Hidden field de Carrd siempre contiene el valor que preestableces, así que no puede atrapar bots. La puntuación de spam se sigue aplicando a cada envío.
• Los envíos AJAX no pueden pasar la verificación humana. Carrd interpreta cualquier 2xx como éxito y cualquier otra cosa como fallo, y no puede mostrar la página de verificación de Ikiform. Deja desactivada la verificación antispam en esta vía.
• Una página significa un solo sitio para dar las gracias. No hay una segunda página a la que redirigir salvo que la construyas. El mensaje On Success de Carrd, o una sección en la misma página, cumple esa función.

Si solo quieres la dirección en tu herramienta de email, el formulario de registro integrado de Carrd puede bastar. Ikiform se gana su sitio cuando quieres una copia guardada de cada registro, filtro de spam, un email por registro y webhooks firmados que puedes enviar a donde quieras.

Pro Plus: un Custom form

1. Haz clic en Add Element › Form. Pon Type en Custom y luego Send to URL.
2. Pon la URL https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx, Method en AJAX y Format en Default. No elijas XML: Ikiform lo rechaza con 415.
3. Añade un campo Email y pon email en su Submitted ID. Carrd genera los ID a partir de las etiquetas, así que si lo dejas vacío envía email_address o algo parecido.
4. Marca Collect UTM parameters. Carrd añade utm_source, utm_medium, utm_campaign, utm_term y utm_content cuando están en el enlace.
5. Pon en On Success un mensaje como You're on the list. We'll email you at launch. y en On Failure una línea general. Carrd muestra ahí tu propio texto salvo que actives Export variables y Return endpoint responses.

Luego añade la definición de campos en la pestaña Fields de Ikiform, con los campos UTM incluidos:

{
  "version": 1,
  "title": "Waitlist",
  "fields": [
    { "id": "email", "type": "email", "label": "Email", "required": true },
    { "id": "utm_source", "type": "text", "label": "UTM source", "validation": { "max_length": 100 } },
    { "id": "utm_medium", "type": "text", "label": "UTM medium", "validation": { "max_length": 100 } },
    { "id": "utm_campaign", "type": "text", "label": "UTM campaign", "validation": { "max_length": 100 } },
    { "id": "utm_term", "type": "text", "label": "UTM term", "validation": { "max_length": 100 } },
    { "id": "utm_content", "type": "text", "label": "UTM content", "validation": { "max_length": 100 } }
  ]
}

• Sin los cinco campos UTM, cualquier registro que llegue desde un enlace etiquetado se rechaza con un error Unknown field, y Carrd muestra On Failure. Solo se envían cuando el enlace los tiene, así que aquí son opcionales.
• No añadas un campo File. Ikiform rechaza los archivos con 422 files_not_supported.
• Los ajustes de Events de Carrd pueden ejecutar tu propio script al tener éxito, como una llamada de analítica. Son independientes del mensaje.

Pro Standard: un formulario incrustado

Haz clic en Add Element › Embed, pon Type en Code y Style en Inline, y pega el formulario. Los embeds no se renderizan en el editor, así que publica para verlo.

<form class="iki-waitlist" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post" target="_top">
  <input name="email" type="email" placeholder="you@company.com" aria-label="Email" autocomplete="email" required>
  <input type="hidden" name="_redirect" value="https://example.com/#joined">
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">Join the waitlist</button>
</form>

<style>
  .iki-waitlist { display: flex; flex-wrap: wrap; gap: 8px; max-width: 440px; margin: 0 auto; }
  .iki-waitlist input[type="email"] { flex: 1 1 220px; font: inherit; padding: 12px 14px; border: 1px solid #d4d4d4; border-radius: 8px; }
  .iki-waitlist button { font: inherit; padding: 12px 18px; border: 0; border-radius: 8px; background: #111; color: #fff; cursor: pointer; }
</style>

• Añade un Section Break llamado joined y pon una línea de agradecimiento después. Carrd abre una sección cuando su nombre aparece en el enlace después de #, así que _redirect lleva a la gente allí.
• Sustituye https://example.com por tu dirección de Carrd. _redirect solo funciona con una URL https: en uno de los Allowed domains del formulario, así que añade también ahí el dominio.
• target="_top" hace que el envío salga de cualquier frame en el que Carrd envuelva el embed, para que la redirección cargue en la ventana.
• Es un envío normal, así que la verificación humana funciona si la activas. Sin cambios en el HTML.

Dominios permitidos

Nunca añadas carrd.co o crd.co solos; coincidirían con todos los sitios de Carrd. La guía de Carrd de la documentación tiene la versión de formulario de contacto, y la guía principal explica los registros repetidos.

Comprueba que funciona

1. Publica el sitio. Los formularios y los embeds solo funcionan en la página publicada.
2. En Allowed domains del formulario, añade el dominio de tu sitio, y localhost mientras desarrollas. Déjalo vacío para aceptar envíos desde cualquier sitio.
3. En Pro Plus, abre la página con ?utm_source=test y regístrate. Carrd muestra On Success, y el envío en Ikiform tiene utm_source en test.
4. En Pro Standard, regístrate a través del embed. Llegas a la sección #joined de tu página.
5. Revisa la bandeja de entrada de cada destinatario de las notificaciones. Cada uno recibe un email con los campos, y Reply responde a quien envió el formulario cuando este tiene un campo email.
6. ¿No llegó nada? Cambia el filtro de estado del panel a Spam. El spam recibe la misma respuesta de éxito que un envío real.

Problemas habituales

Preguntas