Afficher une image après votre formulaire

Souhaitez-vous afficher une image après votre formulaire ? Avec un petit extrait de code PHP, vous pouvez facilement ajouter votre image, une vidéo ou un message juste sous le bouton Envoyer.

Dans ce tutoriel, nous allons vous guider à travers les étapes pour y parvenir.

Création du formulaire

Tout d'abord, vous devrez créer un nouveau formulaire ou en modifier un 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. Afin d'ajouter notre image après le bouton Envoyer, vous devrez copier et coller cet extrait sur votre site.

Si vous avez besoin d'aide pour ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.

Dans notre exemple, nous limitons cet extrait de code à l'ID de formulaire 999 uniquement. Vous devrez remplacer cet ID par l'ID du formulaire que vous souhaitez cibler. Si vous n'êtes pas sûr de votre ID de formulaire et 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 à l'intérieur de votre répertoire de thème. L'image doit donc se trouver dans le dossier images sur votre serveur.

Alternativement, vous pouvez simplement téléverser une image dans votre médiathèque et mettre à jour la valeur après src= avec l'URL de l'image. Voici à quoi ressemblera l'extrait de code mis à jour si vous utilisez une image de la médiathèque 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 à certaines des questions les plus fréquentes concernant l'ajout d'images après le bouton d'envoi dans WPForms.

Q : Comment puis-je afficher du texte avec un lien après le formulaire ?

R : Si vous souhaitez simplement afficher du texte avec un lien, vous pouvez utiliser cet extrait de code.

Dans cet exemple, nous afficherons un message « Propulsé par 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 );

C'est tout ! Vous avez ajouté avec succès une image après votre formulaire.

Ensuite, souhaitez-vous modifier l'image de préchargement qui s'affiche lorsque vous cliquez sur Envoyer ? Consultez notre article sur la façon de modifier l'icône de préchargement lors de l'envoi.

Articles associés

Référence d'action : wpforms_frontend_output_after