# WordPress

> Adicione um formulário do Ikiform ao WordPress com o bloco HTML personalizado, ou registre um shortcode para que qualquer autor possa colocar o mesmo formulário em qualquer lugar.

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.

| Site | Quem pode salvar um formulário em um bloco HTML personalizado |
| --- | --- |
| Auto-hospedado, site único | Administradores e Editores |
| Multisite auto-hospedado | Só Superadministradores |
| `DISALLOW_UNFILTERED_HTML` definido como `true` no `wp-config.php` | Ninguém. Use o [shortcode](#shortcode). |
| WordPress.com | Qualquer pessoa que possa editar, mas só em um plano pago com os recursos de hospedagem ativados. Os recursos de hospedagem são ativados quando você instala um plugin. Nos outros planos, as tags são removidas. |

## Bloco HTML personalizado

### Passo 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.

### Passo 2: Cole o formulário

`HTML personalizado`:

```html
<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.

### Passo 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:

`wp-content/mu-plugins/ikiform.php`:

```php
<?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:

`Bloco Shortcode`:

```text
[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.

| Onde o formulário roda | Adicione em Allowed domains |
| --- | --- |
| Seu domínio no ar | `example.com`, que também cobre `www.example.com` |
| Endereço do WordPress.com | `your-site.wordpress.com`, ou `your-site.wpcomstaging.com` para sites de staging |
| O site de staging da sua hospedagem | O host de staging que aparece no painel da sua hospedagem |
| Desenvolvimento local | `localhost`, ou o nome de host local que a sua ferramenta fornece, como `my-site.local` |

- 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

| O que você vê | Por quê | Correção |
| --- | --- | --- |
| Os campos do formulário somem depois de salvar, e só os rótulos ficam | Sua conta não tem `unfiltered_html`, ou o plano do WordPress.com filtra `form` e `input` | Use o shortcode, ou peça a um Administrador para colar o bloco. |
| Tags `<p>` e `<br>` soltas quebram o layout | O modo visual do editor clássico reformatou o HTML | Use um bloco HTML personalizado ou o shortcode. |
| O console do navegador diz que os dados do formulário foram recusados por causa da diretiva `form-action` | Um plugin de segurança ou a sua hospedagem envia um header `Content-Security-Policy` | Adicione `https://ikiform.com` a `form-action`, e a `connect-src` se você envia com `fetch`. |
| Os envios chegam no filtro de spam com `origin_mismatch` | A página que enviou não está nos domínios permitidos do formulário | Adicione o host da tabela acima. Com **Reject** escolhido, os mesmos envios recebem `403 origin_not_allowed`. |
| `422 validation_failed` listando um campo desconhecido | O formulário tem campos definidos e o nome de um input não está entre eles | Renomeie o input para o id do campo, ou comece o nome com `_` se ele for só um marcador para você. |

## Relacionados

- [Formulários HTML](https://ikiform.com/pt-br/docs/html.md): Redirecionamentos, campos reservados e o honeypot.
- [Criadores de sites](https://ikiform.com/pt-br/docs/guides/site-builders.md): O embed que funciona em qualquer criador.
- [Proteção contra spam](https://ikiform.com/pt-br/docs/spam.md): Honeypot, pontuação e a verificação humana.
- [Solução de problemas](https://ikiform.com/pt-br/docs/troubleshooting.md): CORS, origens divergentes e erros 429.