WordPress

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.

Bloque HTML personalizado

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.

2. Pega el formulario

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

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:

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

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

• 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

Relacionado

• Formularios HTMLRedirecciones, campos reservados y el honeypot.
• Creadores de sitiosEl embed que funciona en cualquier creador.
• Protección antispamHoneypot, puntuación y verificación humana.
• Solución de problemasCORS, orígenes que no coinciden y errores 429.