Vous souhaitez afficher une image après votre formulaire ? Avec un petit snippet PHP, vous pouvez facilement ajouter votre image, une vidéo ou un message juste sous le bouton Submit.
Dans ce tutoriel, nous allons vous expliquer les étapes à suivre pour y parvenir.
Création du formulaire
Tout d'abord, vous devez créer un nouveau formulaire ou modifier un formulaire existant pour accéder au générateur de formulaires. Dans le générateur de formulaires, ajoutez les champs dont vous avez besoin au formulaire.
Ajout de l'extrait
Cet extrait de code peut être utilisé pour ajouter n'importe quoi sous votre formulaire. Vous pouvez ajouter une image, une vidéo ou simplement du texte. Pour ajouter notre image après le bouton Soumettre, vous devez copier et coller cet extrait de code sur votre site.
Si vous avez besoin d'aide pour ajouter des snippets à votre site, veuillez consulter ce tutoriel.
Dans notre exemple, nous limitons ce snippet à l'ID du formulaire 999. Vous devrez remplacer cet ID par l'ID du formulaire que vous souhaitez cibler. Si vous n'êtes pas sûr de l'ID de votre formulaire et que vous avez besoin d'aide pour le trouver, veuillez consulter ce tutoriel.
/**
* Output something after your form(s).
*
* @link https://wpforms.com/developers/how-to-display-an-image-after-your-form/
*/
function wpf_dev_frontend_output_after( $form_data, $form ) {
// Optional, you can limit to specific forms. Below, we restrict output to
// form #999.
if ( absint( $form_data[ 'id' ] ) !== 999 ) {
return;
}
// Run code or see example echo statement below.
echo '<img src="'.get_template_directory_uri().'/images/secured-site.jpg" alt="Verified by Visa" width="80" height="80">';
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after', 10, 2 );
Le code ci-dessus src="'.get_template_directory_uri().'/images/ recherche un répertoire (un dossier) sur votre serveur appelé images dans le répertoire de votre thème. L'image doit donc se trouver dans le dossier images de votre serveur.
Vous pouvez également télécharger une image dans la médiathèque de votre site et mettre à jour la valeur après src= avec l'URL de l'image. Voici à quoi ressemblera l'extrait mis à jour si vous utilisez une image provenant de la bibliothèque multimédia de WordPress.
/**
* Output something after your form(s).
*
* @link https://wpforms.com/developers/how-to-display-an-image-after-your-form/
*/
function wpf_dev_frontend_output_after( $form_data, $form ) {
// Optional, you can limit to specific forms. Below, we restrict output to
// form #999.
if ( absint( $form_data[ 'id' ] ) !== 999 ) {
return;
}
// Run code or see example echo statement below.
echo '<img src="http://myexamplesite.com/wp-content/uploads/2021/01/image-name.jpg " alt="Verified by Visa" width="80" height="80">';
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after', 10, 2 );
Questions fréquemment posées
Voici les réponses aux questions les plus fréquentes sur l'ajout d'images après le bouton d'envoi dans WPForms.
Q : Comment puis-je afficher un texte avec un lien après le formulaire ?
R : Si vous souhaitez simplement afficher un texte avec un lien, vous pouvez utiliser cet extrait.
Dans cet exemple, nous afficherons un message "Powered by Stripe" avec un lien qui ouvrira une nouvelle fenêtre vers Stripe.
/**
* Output Text after your form(s).
*
* @link https://wpforms.com/developers/wpforms_frontend_output_after/
*/
function wpf_dev_frontend_output_after_display_text( $form_data, $form ) {
// Optional, you can limit to specific forms. Below, we restrict output to
// form #999.
if ( absint( $form_data[ 'id' ] ) !== 999 ) {
return;
}
// Run code or see example echo statement below.
echo _e( '<p> Powered by <strong> <a href="https://stripe.com/" target="_blank">Stripe</a> </strong> | <a href="link-to-terms" target="_blank">Terms and Privacy!</a>.', 'plugin-domain' );
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after_display_text', 10, 2 );
Vous avez réussi à ajouter une image après votre formulaire. Vous avez réussi à ajouter une image à votre formulaire.
Ensuite, vous souhaitez modifier l'image de préchargement qui s'affiche lorsque vous cliquez sur soumettre ? Consultez notre article sur la façon de modifier l'icône de préchargement lors de l'envoi.
En rapport
Référence de l'action : wpforms_frontend_output_after