### [Comment afficher à nouveau la confirmation et le formulaire après la soumission](https://wpforms.com/developers/how-to-display-the-confirmation-and-the-form-again-after-submission/) **Publié :** 10 mars 2021 **Auteur :** Équipe éditoriale **Extrait :** Dans ce tutoriel, nous vous montrerons comment afficher le message de confirmation et réinitialiser le formulaire sur la même page à l'aide d'un petit extrait de code PHP. **Contenu :** Souhaitez-vous afficher le message de confirmation du formulaire ainsi que le formulaire lui-même après la soumission ? Généralement, lorsqu'un formulaire est soumis, vous avez la possibilité d'afficher un message de confirmation ou de rediriger vers une autre page web. Cependant, dans ce tutoriel, nous vous guiderons à travers le processus d'accomplissement des deux à l'aide d'un simple extrait de code. ## Création du formulaire Tout d'abord, vous devrez créer un nouveau formulaire. Aux fins de ce tutoriel, nous avons déjà terminé cette étape. Cependant, si vous avez besoin d'aide pour créer un formulaire avec WPForms, [veuillez consulter cette documentation](https://wpforms.com/docs/creating-first-form/ "Créer votre premier formulaire"). Pour notre formulaire, nous avons ajouté uniquement les champs de formulaire **Nom**, **E-mail** et **Texte de paragraphe**.  ## Désactivation de l'AJAX sur le formulaire Ensuite, vous devrez vous assurer que la **Soumission du formulaire AJAX activée** est désactivée sur le formulaire. Pour vérifier ce paramètre, cliquez sur l'onglet **Paramètres** dans le constructeur de formulaire, puis cliquez sur **Général**.  ## Affichage de la confirmation et du formulaire Ensuite, vous devrez ajouter un petit extrait de code à votre site qui permettra au formulaire de s'afficher à nouveau avant le message de confirmation. Si vous avez besoin d'aide pour ajouter des extraits à votre site, [veuillez consulter ce tutoriel](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Comment ajouter du PHP ou du JavaScript personnalisé pour WPForms"). ``` /* * Affiche le message de confirmation et le formulaire après une soumission réussie. * * @link https://wpforms.com/developers/how-to-display-the-confirmation-and-the-form-again-after-submission/ */ function wpf_dev_frontend_output_success( $form_data, $fields, $entry_id ) { // Facultatif, vous pouvez le limiter à des formulaires spécifiques. Ci-dessous, nous limitons la sortie au formulaire n° 235. if ( absint( $form_data[ 'id' ] ) !== 235 ) { return; } // Réinitialise les champs à vide unset( $_GET[ 'wpforms_return' ], $_POST[ 'wpforms' ][ 'id' ] ); // Commentez cette ligne si vous souhaitez effacer les valeurs des champs du formulaire après la soumission unset( $_POST[ 'wpforms' ][ 'fields' ] ); // Rend effectivement le formulaire. wpforms()->frontend->output( $form_data[ 'id' ] ); } add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 10, 3 ); ``` Étant donné que nous voulons que cet extrait ne s'exécute que sur un formulaire particulier, nous utilisons `if ( absint( $form_data[ 'id' ] ) !== 235 )`. Cela signifie que cet extrait ne s'exécutera **que** si l'ID du formulaire correspond à **235**. Si vous avez besoin d'aide pour identifier le numéro d'ID de votre formulaire, [veuillez consulter ce tutoriel](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Comment localiser l'ID du formulaire et l'ID du champ"). Si vous souhaitez conserver les valeurs dans les champs du formulaire après la soumission du formulaire, commentez simplement `unset( $_POST[ 'wpforms' ][ 'fields' ] );`. Vous pouvez le faire en ajoutant **deux barres obliques (//)** devant le code des champs non définis. Exemple : `// unset( $_POST[ 'wpforms' ][ 'fields' ] );` Vous verrez maintenant que lorsque le formulaire est soumis, vos visiteurs verront la confirmation et le formulaire sur la même page après la soumission du formulaire !  Et c'est tout ! Souhaitez-vous définir une date par défaut sur votre sélecteur de date ? Consultez notre tutoriel sur [Comment définir une date par défaut pour votre champ de formulaire de sélection de date](https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/ "Comment définir une date par défaut pour votre champ de formulaire de sélection de date"). ## Action de référence [wpforms\_frontend\_output\_success](https://wpforms.com/developers/wpforms_frontend_output_success/ "Utilisation de l'action wpforms_frontend_output_success") ## FAQ #### Q : Pourquoi mon message de confirmation apparaît-il sous le formulaire ? **R :** Si votre message de confirmation apparaît au-dessus de votre formulaire et que vous souhaitez qu'il apparaisse en dessous, veuillez modifier la priorité de cette fonction. Pour expliquer ce qu'est la priorité d'une fonction, examinons l'extrait ci-dessus, en particulier la dernière ligne. ``` add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 10, 3 ); ``` Dans ce cas, le nom du hook d'action (tel que défini par WPForms) est **wpforms\_frontend\_output\_success**, le nom de notre fonction est **wpf\_dev\_frontend\_output\_success**. Dans cette fonction, nous passons **3** arguments (**$form\_data, $fields, $entry\_id**), et nous avons la priorité par défaut définie sur **10**. Étant donné que nous voulons que la fonctionnalité par défaut du formulaire apparaisse en premier, dans ce cas, le message de confirmation, nous devons modifier la priorité afin que le message apparaisse en premier et que la fonction s'exécute après. Pour ce faire, nous allons augmenter la priorité à **1000**. La plupart des fonctions utilisent **10** comme nombre de priorité par défaut, donc si vous voulez que quelque chose s'exécute avant, vous donneriez une priorité inférieure à **10**, si vous voulez que la fonction s'exécute après, augmentez la priorité à quelque chose de supérieur à **10**. ``` /* * Affiche le message de confirmation et le formulaire après une soumission réussie. * * @link https://wpforms.com/developers/how-to-display-the-confirmation-and-the-form-again-after-submission/ */ function wpf_dev_frontend_output_success( $form_data, $fields, $entry_id ) { // Facultatif, vous pouvez le limiter à des formulaires spécifiques. Ci-dessous, nous limitons la sortie au formulaire n° 235. if ( absint( $form_data[ 'id' ] ) !== 235 ) { return; } // Réinitialise les champs à vide unset( $_GET[ 'wpforms_return' ], $_POST[ 'wpforms' ][ 'id' ] ); // Commentez cette ligne si vous souhaitez effacer les valeurs des champs du formulaire après la soumission unset( $_POST[ 'wpforms' ][ 'fields' ] ); // Rend effectivement le formulaire. wpforms()->frontend->output( $form_data[ 'id' ] ); } add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 1000, 3 ); ``` #### Q : Pourquoi le snippet ne fonctionne-t-il pas pour moi ? **R :** Si le snippet ne fonctionne pas, assurez-vous d'avoir remplacé **235** par l'ID de votre propre formulaire sur votre site. [Veuillez consulter ce tutoriel pour vous aider à trouver l'ID de votre formulaire](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Comment localiser l'ID du formulaire et l'ID du champ"). #### Q : Pourquoi vois-je une page blanche après la deuxième soumission ? **R :** Si vous voyez une page blanche ou une erreur AJAX dans le journal de la console, assurez-vous d'avoir désactivé AJAX comme mentionné dans les étapes ci-dessus. Ce snippet ne fonctionnera que si AJAX est désactivé sur le formulaire.  **Catégories :** Extension **Tags :** PHP ---