Como adicionar uma lista de espera a um site no Carrd

No Carrd Pro Plus, adicione um Custom form que envia ao seu endpoint do Ikiform com o método AJAX, ative a coleta de UTM e defina esses campos no Ikiform. No Pro Standard, cole um pequeno formulário HTML num elemento Embed; ele envia do jeito tradicional, mantém um honeypot e leva as pessoas de volta a uma seção de agradecimento na mesma página.

O Carrd é o jeito mais rápido de colocar no ar uma apresentação de uma página, o que o torna um lar natural para uma lista de espera. O formulário que você pode usar depende mais do seu plano do Carrd do que de qualquer coisa que você construa, então comece por aí.

O que muda no Carrd

• O plano decide o formulário. O Pro Plus tem Custom forms que enviam para qualquer URL. O Pro Standard tem formulários de contato e de inscrição que vão para os destinos do próprio Carrd, mais o elemento Embed. O Pro Lite não tem formulários nem embeds.
• O Send to URL não consegue esconder um honeypot. O Hidden field do Carrd sempre tem o valor que você predefiniu, então não pega bots. A pontuação de spam continua rodando em todo envio.
• Envios AJAX não conseguem rodar a verificação humana. O Carrd lê qualquer 2xx como sucesso e todo o resto como falha, e não consegue mostrar a página de verificação do Ikiform. Deixe a verificação de spam desligada neste caminho.
• Uma página significa um lugar para agradecer. Não existe segunda página para onde redirecionar, a menos que você crie uma. A mensagem On Success do Carrd, ou uma seção na mesma página, faz esse papel.

Se tudo o que você quer é o endereço na sua ferramenta de e-mail, o formulário de inscrição nativo do Carrd pode bastar. O Ikiform vale a pena quando você quer uma cópia armazenada de cada inscrição, filtro de spam, um e-mail por inscrição e webhooks assinados que você pode direcionar para qualquer lugar.

Pro Plus: um Custom form

1. Clique em Add Element › Form. Defina Type como Custom e depois Send to URL.
2. Defina a URL como https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx, Method como AJAX e Format como Default. Não escolha XML: o Ikiform o recusa com 415.
3. Adicione um campo Email e defina o Submitted ID dele como email. O Carrd gera os IDs a partir dos rótulos, então deixá-lo vazio envia email_address ou algo parecido.
4. Marque Collect UTM parameters. O Carrd adiciona utm_source, utm_medium, utm_campaign, utm_term e utm_content quando eles estão no link.
5. Defina On Success com uma mensagem como You're on the list. We'll email you at launch. e On Failure com uma frase genérica. O Carrd mostra ali o seu próprio texto, a menos que você ative Export variables e Return endpoint responses.

Depois adicione a definição de campos na aba Fields do Ikiform, incluindo os campos de UTM:

{
  "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 } }
  ]
}

• Sem os cinco campos de UTM, qualquer inscrição que chegue de um link marcado é recusada com um erro de Unknown field, e o Carrd mostra On Failure. Eles só são enviados quando o link os tem, então aqui são opcionais.
• Não adicione um campo File. O Ikiform recusa arquivos com 422 files_not_supported.
• As configurações de Events do Carrd podem rodar um script seu em caso de sucesso, como uma chamada de analytics. Elas são separadas da mensagem.

Pro Standard: um formulário incorporado

Clique em Add Element › Embed, defina Type como Code e Style como Inline, e cole o formulário. Embeds não aparecem no editor, então publique para ver.

<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>

• Adicione um Section Break chamado joined e coloque uma frase de agradecimento depois dele. O Carrd abre uma seção quando o nome dela está no link depois de #, então o _redirect leva as pessoas até ela.
• Troque https://example.com pelo seu endereço do Carrd. O _redirect só funciona com uma URL https: em um dos Allowed domains do formulário, então adicione o domínio lá também.
• target="_top" faz o envio sair de qualquer frame em que o Carrd envolva o embed, para o redirecionamento carregar na janela.
• Este é um envio simples, então a verificação humana funciona se você ligá-la. Sem mudança no HTML.

Domínios permitidos

Nunca adicione carrd.co ou crd.co sozinhos; todo site do Carrd passaria a corresponder. O guia do Carrd na documentação tem a versão de formulário de contato, e o guia principal explica as inscrições repetidas.

Confira se funciona

1. Publique o site. Formulários e embeds só funcionam na página publicada.
2. Em Allowed domains do formulário, adicione o domínio do seu site, mais localhost enquanto desenvolve. Deixe vazio para aceitar envios de qualquer lugar.
3. No Pro Plus, abra a página com ?utm_source=test e inscreva-se. O Carrd mostra On Success, e o envio no Ikiform tem utm_source definido como test.
4. No Pro Standard, inscreva-se pelo embed. Você cai na seção #joined da sua página.
5. Confira a caixa de entrada de cada destinatário das notificações. Cada um recebe um e-mail com os campos, e Reply vai para quem enviou quando o formulário tem um campo email.
6. Não chegou nada? Mude o filtro de status do painel para Spam. Spam recebe a mesma resposta de sucesso de um envio real.

Pegadinhas

Perguntas