Résumé IA
Souhaitez-vous afficher le message de confirmation du formulaire en même temps que le formulaire lui-même après la soumission ? Généralement, lorsqu'un formulaire est soumis, vous avez la possibilité soit d'afficher un message de confirmation, soit 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.
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 l'option Activer la soumission AJAX du formulaire 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.
/*
* Display confirmation message and form after successful submission.
*
* @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 ) {
// Optional, you can limit it to specific forms. Below, we restrict output to form #235.
if ( absint( $form_data[ 'id' ] ) !== 235 ) {
return;
}
// Reset the fields to blank
unset(
$_GET[ 'wpforms_return' ],
$_POST[ 'wpforms' ][ 'id' ]
);
// Comment this line out if you want to clear the form field values after submission
unset( $_POST[ 'wpforms' ][ 'fields' ] );
// Actually render the form.
wpforms()->frontend->output( $form_data[ 'id' ] );
}
add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 10, 3 );
Comme 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.
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 voilà ! Souhaitez-vous définir une date par défaut pour votre sélecteur de date ? Consultez notre tutoriel sur Comment définir une date par défaut pour votre champ de formulaire sélecteur de date.
Action de référence
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, jetons un coup d'œil à 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. À l'intérieur de 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 numéro 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.
/*
* Display confirmation message and form after successful submission.
*
* @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 ) {
// Optional, you can limit it to specific forms. Below, we restrict output to form #235.
if ( absint( $form_data[ 'id' ] ) !== 235 ) {
return;
}
// Reset the fields to blank
unset(
$_GET[ 'wpforms_return' ],
$_POST[ 'wpforms' ][ 'id' ]
);
// Comment this line out if you want to clear the form field values after submission
unset( $_POST[ 'wpforms' ][ 'fields' ] );
// Actually render the form.
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é le 235 par l’ID de votre propre formulaire sur votre site. Veuillez consulter ce tutoriel pour vous aider à trouver l’ID de votre formulaire.
Q: Pourquoi est-ce que je vois une page blanche après avoir soumis pour la deuxième fois ?
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.