WordPress

Les extensions de formulaire traitent les soumissions dans WordPress : leurs formulaires renvoient vers votre propre site, et l'extension stocke le résultat et l'envoie par e-mail. Un simple formulaire HTML pointé vers Ikiform se passe de l'extension, de la base de données et de la configuration e-mail, et continue de fonctionner sur les pages en cache car il ne contient aucun nonce WordPress.

Qui peut coller un formulaire

WordPress filtre le HTML des articles et des pages. Pour toute personne sans la capacité unfiltered_html, il supprime <form> et <input> à l'enregistrement du contenu.

Bloc HTML personnalisé

1. Ajoutez le bloc

   Dans l'éditeur de blocs, tapez /html et choisissez HTML personnalisé (Custom HTML). Pour placer le formulaire sur chaque page, ajoutez plutôt le bloc à une partie de modèle, comme le pied de page, dans l'éditeur du site.

2. Collez le formulaire

   <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 donne au bouton le style de bouton de votre thème dans les thèmes de blocs. Le formulaire hérite des polices et des styles d'input de votre thème, donc il n'a généralement besoin d'aucun CSS.

3. Prévisualisez, puis mettez à jour

   Utilisez l'onglet Aperçu (Preview) du bloc, puis enregistrez. Rechargez l'éditeur et rouvrez le bloc : si les balises <form> et <input> ont disparu, votre compte ne peut pas les enregistrer. Utilisez le code court ci-dessous.

_redirect ne fonctionne que si le formulaire a des domaines autorisés qui incluent votre site ; sinon, les visiteurs voient la page de remerciement d'Ikiform. Vous pouvez aussi définir Redirect after submit dans les paramètres du formulaire et retirer l'input masqué.

Un code court

Un code court garde le HTML dans du PHP, que le filtre de contenu ne touche pas : les auteurs et contributeurs peuvent donc aussi placer le formulaire. Enregistrez ceci comme extension must-use, que WordPress charge automatiquement :

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

Ajoutez ensuite un bloc Code court (Shortcode), ou tapez le code court dans n'importe quel contenu :

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

• Passez id pour utiliser un autre formulaire : [ikiform id="frm_..."].
• Modifiez les champs dans le PHP pour qu'ils correspondent à votre formulaire. Chaque input doté d'un name est stocké.
• Dans l'éditeur classique, collez le HTML brut uniquement dans l'onglet Texte (Text). L'éditeur visuel ajoute des balises <p> et <br> dans le formulaire. Le code court évite ce problème.

Domaines autorisés

Listez chaque adresse sur laquelle le site répond. Les sites WordPress en ont souvent plusieurs pendant la construction.

• N'ajoutez jamais wordpress.com ou wpcomstaging.com seul. Tous les sites de cet hébergeur correspondraient, y compris ceux des autres.

Checklist de test

1. Déconnectez-vous, ou ouvrez une fenêtre de navigation privée. Les admins connectés contournent certains caches et voient une page légèrement différente.
2. Envoyez le formulaire et vérifiez la soumission dans Ikiform, parmi les reçues plutôt que dans le spam.
3. Vérifiez que vous arrivez sur votre page de remerciement. Si vous voyez celle d'Ikiform, le site manque dans les domaines autorisés ou l'URL _redirect n'est pas en https:.
4. Modifiez la page avec un compte non administrateur et vérifiez que le formulaire résiste à l'enregistrement, ou utilisez le code court.

Dépannage

Voir aussi

• Formulaires HTMLRedirections, champs réservés et honeypot.
• Créateurs de sitesL'intégration qui fonctionne dans n'importe quel créateur de sites.
• Protection anti-spamHoneypot, score et vérification humaine.
• DépannageCORS, origines non conformes et erreurs 429.