# WordPress

> Ajoutez un formulaire Ikiform à WordPress avec le bloc HTML personnalisé, ou enregistrez un code court pour que n'importe quel auteur puisse placer le même formulaire partout.

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.

| Site | Qui peut enregistrer un formulaire dans un bloc HTML personnalisé |
| --- | --- |
| Auto-hébergé, site unique | Administrateurs et éditeurs |
| Multisite auto-hébergé | Super admins uniquement |
| `DISALLOW_UNFILTERED_HTML` réglé sur `true` dans `wp-config.php` | Personne. Utilisez le [code court](#shortcode). |
| WordPress.com | Toute personne pouvant modifier, mais seulement avec un plan payant dont les fonctionnalités d'hébergement sont activées. Elles s'activent quand vous installez une extension. Sur les autres plans, les balises sont supprimées. |

## Bloc HTML personnalisé

### Étape 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.

### Étape 2 : Collez le formulaire

`HTML personnalisé`:

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

### Étape 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 :

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

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

`Bloc Code court`:

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

| Où tourne le formulaire | À ajouter aux domaines autorisés |
| --- | --- |
| Votre domaine en ligne | `example.com`, qui couvre aussi `www.example.com` |
| Adresse WordPress.com | `your-site.wordpress.com`, ou `your-site.wpcomstaging.com` pour les sites de staging |
| Le site de staging de votre hébergeur | L'hôte de staging indiqué dans le tableau de bord de votre hébergeur |
| Développement local | `localhost`, ou le nom d'hôte local fourni par votre outil, comme `my-site.local` |

- 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

| Ce que vous voyez | Pourquoi | Solution |
| --- | --- | --- |
| Les champs du formulaire disparaissent à l'enregistrement, seuls les libellés restent | Votre compte n'a pas `unfiltered_html`, ou le plan WordPress.com filtre `form` et `input` | Utilisez le code court, ou demandez à un administrateur de coller le bloc. |
| Des balises `<p>` et `<br>` parasites cassent la mise en page | Le mode visuel de l'éditeur classique a reformaté le HTML | Utilisez un bloc HTML personnalisé ou le code court. |
| La console du navigateur indique que les données du formulaire ont été refusées à cause de la directive `form-action` | Une extension de sécurité ou votre hébergeur envoie un en-tête `Content-Security-Policy` | Ajoutez `https://ikiform.com` à `form-action`, et à `connect-src` si vous envoyez avec `fetch`. |
| Les soumissions arrivent dans le filtre spam avec `origin_mismatch` | La page qui a envoyé ne fait pas partie des domaines autorisés du formulaire | Ajoutez l'hôte du tableau ci-dessus. Avec **Reject**, les mêmes envois reçoivent plutôt `403 origin_not_allowed`. |
| `422 validation_failed` signalant un champ inconnu | Le formulaire a des champs définis et le nom d'un input n'en fait pas partie | Renommez l'input avec l'id du champ, ou faites-le commencer par `_` s'il ne sert que de marqueur pour vous. |

## Voir aussi

- [Formulaires HTML](https://ikiform.com/fr/docs/html.md): Redirections, champs réservés et honeypot.
- [Créateurs de sites](https://ikiform.com/fr/docs/guides/site-builders.md): L'intégration qui fonctionne dans n'importe quel créateur de sites.
- [Protection anti-spam](https://ikiform.com/fr/docs/spam.md): Honeypot, score et vérification humaine.
- [Dépannage](https://ikiform.com/fr/docs/troubleshooting.md): CORS, origines non conformes et erreurs 429.