Souhaitez-vous afficher le message de confirmation du formulaire en même temps que le formulaire lui-même après sa 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 allons vous guider à travers le processus d'accomplissement des deux en utilisant un simple extrait de code.
Création du formulaire
Tout d'abord, vous devez créer un nouveau formulaire. Pour les besoins de ce tutoriel, nous avons déjà réalisé cette étape. Cependant, si vous avez besoin d'aide pour créer un formulaire avec WPForms, veuillez consulter cette documentation.
Pour notre formulaire, nous n'avons ajouté que les champs Nom, Email et Texte du paragraphe.
Désactiver AJAX sur le formulaire
Ensuite, vous devez vous assurer que l'option Enable AJAX form submission est désactivée sur le formulaire. Pour vérifier ce paramètre, cliquez sur l'onglet Paramètres dans le générateur de formulaires, puis sur Général.
Affichage de la confirmation et du formulaire
Ensuite, vous devez ajouter à votre site un petit extrait de code qui permettra au formulaire de s'afficher à nouveau avant le message de confirmation.
Si vous avez besoin d'aide pour ajouter des snippets à 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 );
Puisque nous voulons que ce snippet ne s'exécute que sur un formulaire particulier, nous utilisons l'option if ( absint( $form_data[ 'id' ] ) !== 235 ). Cela signifie que cet extrait seulement s'exécute si l'ID du formulaire correspond 235.
Si vous avez besoin d'aide pour identifier le numéro d'identification de votre formulaire, veuillez consulter ce tutoriel.
Si vous souhaitez conserver les valeurs à l'intérieur des champs du formulaire après l'envoi de celui-ci, il vous suffit de commenter l'élément unset( $_POST[ 'wpforms' ][ 'fields' ] );. Vous pouvez le faire en ajoutant deux barres obliques (//) devant le code des champs non paramétrés.
Exemple :
// unset( $_POST[ 'wpforms' ][ 'fields' ] );
Maintenant vous verrez que lorsque le formulaire est soumis, vos visiteurs verront la confirmation et le formulaire sur la même page après que le formulaire ait été soumis !
Et c'est tout ! Souhaitez-vous définir une date par défaut pour votre sélecteur de date ? Jetez un œil à notre tutoriel sur Comment définir une date par défaut pour votre champ de formulaire de sélection de date.
Référence 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, modifiez la priorité de cette fonction.
Pour expliquer ce qu'est la priorité d'une fonction, examinons l'extrait ci-dessus, et plus particulièrement la dernière ligne.
add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 10, 3 ) ;
Dans ce cas, le nom du crochet 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 la priorité par défaut est fixée à 10.
Comme 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 ensuite. Pour ce faire, nous allons augmenter la priorité à 1000.
La plupart des fonctions utilisent 10 comme numéro de priorité par défaut. Ainsi, si vous souhaitez que la fonction s'exécute avant, la priorité doit être inférieure à 10; si vous souhaitez que la fonction s'exécute après, la priorité doit être supérieure à 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 l'extrait ne fonctionne-t-il pas pour moi ?
R : Si le snippet ne fonctionne pas, assurez-vous que vous avez modifié le 235 pour qu'il corresponde à l'ID de votre propre formulaire sur votre site. Consultez ce tutoriel pour vous aider à trouver l'identifiant de votre formulaire.
Q : Pourquoi une page blanche s'affiche-t-elle après le deuxième envoi ?
R : Si vous voyez une page blanche ou une erreur AJAX dans le journal de la console, assurez-vous que vous avez désactivé AJAX comme indiqué dans les étapes ci-dessus. Ce snippet ne fonctionnera que si AJAX est désactivé sur le formulaire.