# WordPress

> Añade un formulario de Ikiform a WordPress con el bloque HTML personalizado, o registra un shortcode para que cualquier autor pueda colocar el mismo formulario en cualquier parte.

Los plugins de formularios gestionan los envíos dentro de WordPress: sus formularios envían de vuelta a tu propio sitio y el plugin guarda el resultado y lo manda por email. Un formulario HTML apuntado a Ikiform se salta el plugin, la base de datos y la configuración del correo, y sigue funcionando en páginas en caché porque no lleva nonce de WordPress.

## Quién puede pegar un formulario

WordPress filtra el HTML de las entradas y páginas. Para quien no tenga la capacidad `unfiltered_html`, elimina `<form>` y `<input>` al guardar el contenido.

| Sitio | Quién puede guardar un formulario en un bloque HTML personalizado |
| --- | --- |
| Autoalojado, un solo sitio | Administradores y editores |
| Multisitio autoalojado | Solo superadministradores |
| `DISALLOW_UNFILTERED_HTML` con el valor `true` en `wp-config.php` | Nadie. Usa el [shortcode](#shortcode). |
| WordPress.com | Cualquiera que pueda editar, pero solo con un plan de pago con las funciones de hosting activadas. Las funciones de hosting se activan al instalar un plugin. En otros planes se eliminan las etiquetas. |

## Bloque HTML personalizado

### Paso 1: Añade el bloque

En el editor de bloques, escribe `/html` y elige **HTML personalizado** (Custom HTML). Para poner el formulario en todas las páginas, añade el bloque a una parte de plantilla, como el pie, en el editor del sitio.

### Paso 2: Pega el formulario

`Custom HTML`:

```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` le da al botón el estilo de botón de tu tema en los temas de bloques. El formulario hereda las fuentes y los estilos de inputs de tu tema, así que normalmente no necesita CSS.

### Paso 3: Previsualiza y actualiza

Usa la pestaña **Vista previa** del bloque y luego guarda. Recarga el editor y vuelve a abrir el bloque: si las etiquetas `<form>` e `<input>` desaparecieron, tu cuenta no puede guardarlas. Usa el shortcode de abajo.

`_redirect` solo funciona cuando el formulario tiene dominios permitidos que incluyen tu sitio; si no, los visitantes ven la página de agradecimiento de Ikiform. También puedes configurar **Redirect after submit** en los ajustes del formulario y quitar el input oculto.

## Un shortcode

Un shortcode mantiene el HTML en PHP, donde el filtro de contenido no lo toca, así que los autores y colaboradores también pueden colocar el formulario. Guárdalo como un plugin must-use, que WordPress carga automáticamente:

`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();
});
```

Después añade un bloque **Shortcode**, o escribe el shortcode en cualquier contenido:

`Shortcode block`:

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

- Pasa `id` para usar otro formulario: `[ikiform id="frm_..."]`.
- Cambia los campos en el PHP para que coincidan con tu formulario. Se guarda cada input con un `name`.
- En el editor clásico, pega el HTML solo en la pestaña **Texto**. El editor visual añade etiquetas `<p>` y `<br>` dentro del formulario. El shortcode evita este problema.

## Dominios permitidos

Incluye cada dirección en la que responde el sitio. Los sitios de WordPress suelen tener varias mientras los construyes.

| Dónde funciona el formulario | Añadir a Allowed domains |
| --- | --- |
| Tu dominio en producción | `example.com`, que también cubre `www.example.com` |
| Dirección de WordPress.com | `your-site.wordpress.com`, o `your-site.wpcomstaging.com` para sitios de staging |
| El sitio de staging de tu hosting | El host de staging que aparece en el panel de tu hosting |
| Desarrollo local | `localhost`, o el nombre de host local que te dé tu herramienta, como `my-site.local` |

- Nunca añadas `wordpress.com` ni `wpcomstaging.com` solos. Coincidiría cualquier sitio de ese host, incluidos los de otras personas.

## Lista de pruebas

1. Cierra sesión o abre una ventana privada. Los administradores con sesión iniciada se saltan algunas cachés y ven una página ligeramente distinta.
2. Envía el formulario y confirma el envío en Ikiform, como recibido y no como spam.
3. Comprueba que llegas a tu página de agradecimiento. Si ves la página de Ikiform, falta el sitio en los dominios permitidos o la URL de `_redirect` no es `https:`.
4. Edita la página con un usuario que no sea administrador y confirma que el formulario sobrevive al guardado, o usa el shortcode.

## Solución de problemas

| Qué ves | Por qué | Solución |
| --- | --- | --- |
| Los campos del formulario desaparecen al guardar y solo quedan las etiquetas | Tu cuenta no tiene `unfiltered_html`, o el plan de WordPress.com filtra `form` e `input` | Usa el shortcode, o pide a un administrador que pegue el bloque. |
| Etiquetas `<p>` y `<br>` sueltas rompen el diseño | El modo visual del editor clásico reformateó el HTML | Usa un bloque HTML personalizado o el shortcode. |
| La consola del navegador dice que se rechazaron los datos del formulario por la directiva `form-action` | Un plugin de seguridad o tu hosting envía una cabecera `Content-Security-Policy` | Añade `https://ikiform.com` a `form-action`, y a `connect-src` si envías con `fetch`. |
| Los envíos llegan al filtro de spam con `origin_mismatch` | La página que envió no está entre los dominios permitidos del formulario | Añade el host de la tabla de arriba. Si eliges **Reject**, esos mismos envíos reciben `403 origin_not_allowed`. |
| `422 validation_failed` con un campo desconocido | El formulario tiene campos definidos y el nombre de un input no es ninguno de ellos | Cambia el nombre del input por el id del campo, o haz que empiece con `_` si solo es una marca para ti. |

## Relacionado

- [Formularios HTML](https://ikiform.com/es/docs/html.md): Redirecciones, campos reservados y el honeypot.
- [Creadores de sitios](https://ikiform.com/es/docs/guides/site-builders.md): El embed que funciona en cualquier creador.
- [Protección antispam](https://ikiform.com/es/docs/spam.md): Honeypot, puntuación y verificación humana.
- [Solución de problemas](https://ikiform.com/es/docs/troubleshooting.md): CORS, orígenes que no coinciden y errores 429.