WordPress

Plugins de formulário processam os envios dentro do WordPress: os formulários enviam de volta para o seu próprio site, e o plugin armazena e envia o resultado por e-mail. Um formulário HTML simples apontado para o Ikiform dispensa o plugin, o banco de dados e a configuração de e-mail, e continua funcionando em páginas com cache porque não carrega nenhum nonce do WordPress.

Quem pode colar um formulário

O WordPress filtra o HTML de posts e páginas. Para quem não tem a capability unfiltered_html, ele remove <form> e <input> quando o conteúdo é salvo.

Bloco HTML personalizado

1. Adicione o bloco

   No editor de blocos, digite /html e escolha HTML personalizado (Custom HTML). Para colocar o formulário em todas as páginas, adicione o bloco a uma parte do template, como o rodapé, no Editor do site.

2. Cole o formulário

   <form class="ikiform" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
     <p><label>Name <input name="name" autocomplete="name" required></label></p>
     <p><label>Email <input name="email" type="email" autocomplete="email" required></label></p>
     <p><label>Message <textarea name="message" rows="5"></textarea></label></p>
     <input type="hidden" name="_redirect" value="https://example.com/thank-you/">
     <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
     <p><button type="submit" class="wp-element-button">Send</button></p>
   </form>

   wp-element-button dá ao botão o estilo de botão do seu tema em temas de blocos. O formulário herda as fontes e os estilos de input do seu tema, então normalmente não precisa de CSS.

3. Visualize e depois atualize

   Use a aba de visualização do bloco e depois salve. Recarregue o editor e abra o bloco de novo: se as tags <form> e <input> sumiram, sua conta não pode salvá-las. Use o shortcode abaixo.

_redirect só funciona quando o formulário tem domínios permitidos que incluem o seu site; caso contrário, os visitantes veem a página de agradecimento do Ikiform. Você também pode definir Redirect after submit nas configurações do formulário e remover o input oculto.

Um shortcode

Um shortcode mantém o HTML no PHP, onde o filtro de conteúdo não mexe, então autores e colaboradores também podem colocar o formulário. Salve isto como um must-use plugin, que o WordPress carrega automaticamente:

<?php

add_shortcode('ikiform', function ($atts) {
    $atts = shortcode_atts([
        'id' => 'frm_xxxxxxxxxxxxxxxx',
        'subject' => '',
        'redirect' => '',
        'button' => 'Send',
    ], $atts, 'ikiform');

    ob_start();
    ?>
    <form class="ikiform" action="<?php echo esc_url('https://ikiform.com/f/' . rawurlencode($atts['id'])); ?>" method="post">
      <p><label>Email <input name="email" type="email" autocomplete="email" required></label></p>
      <p><label>Message <textarea name="message" rows="5"></textarea></label></p>
      <?php if ($atts['subject']) : ?>
        <input type="hidden" name="_subject" value="<?php echo esc_attr($atts['subject']); ?>">
      <?php endif; ?>
      <?php if ($atts['redirect']) : ?>
        <input type="hidden" name="_redirect" value="<?php echo esc_url($atts['redirect']); ?>">
      <?php endif; ?>
      <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
      <p><button type="submit" class="wp-element-button"><?php echo esc_html($atts['button']); ?></button></p>
    </form>
    <?php
    return ob_get_clean();
});

Depois, adicione um bloco Shortcode, ou digite o shortcode em qualquer conteúdo:

[ikiform subject="New enquiry" redirect="https://example.com/thank-you/"]

• Passe id para usar outro formulário: [ikiform id="frm_..."].
• Mude os campos no PHP para corresponder ao seu formulário. Todo input com um name é armazenado.
• No editor clássico, cole HTML bruto só na aba Texto. O editor visual adiciona tags <p> e <br> dentro do formulário. O shortcode evita isso.

Domínios permitidos

Liste cada endereço em que o site responde. Sites WordPress costumam ter vários enquanto você constrói.

• Nunca adicione wordpress.com ou wpcomstaging.com sozinhos. Todo site naquele host corresponderia, inclusive os de outras pessoas.

Checklist de teste

1. Saia da conta, ou abra uma janela anônima. Admins logados pulam alguns caches e veem uma página um pouco diferente.
2. Envie o formulário e confirme o envio no Ikiform, como recebido e não como spam.
3. Confira se você chega à sua página de agradecimento. Se você vir a página do Ikiform, o site não está nos domínios permitidos ou a URL de _redirect não é https:.
4. Edite a página como um usuário que não é admin e confirme que o formulário sobrevive ao salvar, ou use o shortcode.

Solução de problemas

Relacionados

• Formulários HTMLRedirecionamentos, campos reservados e o honeypot.
• Criadores de sitesO embed que funciona em qualquer criador.
• Proteção contra spamHoneypot, pontuação e a verificação humana.
• Solução de problemasCORS, origens divergentes e erros 429.