Visualizza un'immagine dopo il tuo modulo

Vuoi visualizzare un'immagine dopo il tuo modulo? Con un piccolo snippet PHP, puoi facilmente aggiungere la tua immagine, un video o un messaggio subito sotto il pulsante Invia.

In questo tutorial, ti guideremo attraverso i passaggi su come ottenere questo risultato.

Creazione del modulo

Per prima cosa, dovrai creare un nuovo modulo o modificarne uno esistente per accedere al generatore di moduli. Nel generatore di moduli, procedi e aggiungi i campi di cui hai bisogno al modulo.

Aggiunta dello Snippet

Questo snippet di codice può essere utilizzato per aggiungere qualsiasi cosa sotto il tuo modulo. Puoi aggiungere un'immagine, un video o solo testo. Per aggiungere la nostra immagine dopo il pulsante Invia, dovrai copiare e incollare questo snippet sul tuo sito.

Se hai bisogno di aiuto per aggiungere snippet al tuo sito, ti preghiamo di consultare questo tutorial.

Nel nostro esempio, stiamo limitando questo snippet solo all'ID del modulo 999. Dovrai sostituire questo ID con l'ID del modulo che desideri indirizzare. Se non sei sicuro di quale sia l'ID del tuo modulo e hai bisogno di aiuto per trovarlo, dai un'occhiata a questo tutorial.

/**
 * 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 );

Il codice sopra src="'.get_template_directory_uri().'/images/ cerca una directory (una cartella) sul tuo server chiamata images all'interno della directory del tuo tema. Quindi l'immagine deve trovarsi nella cartella images sul tuo server.

In alternativa, puoi semplicemente caricare un'immagine nella libreria multimediale del tuo sito e aggiornare il valore dopo src= con l'URL dell'immagine. Ecco come apparirà lo snippet aggiornato se utilizzi un'immagine dalla libreria multimediale di 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 );

Domande frequenti

Queste sono le risposte ad alcune delle domande più frequenti che vediamo sull'aggiunta di immagini dopo il pulsante di invio in WPForms.

D: Come posso visualizzare testo con un link dopo il modulo?

R: Se vuoi solo visualizzare del testo con un link, puoi usare questo snippet.

In questo esempio, visualizzeremo un messaggio "Powered by Stripe" con un link che aprirà una nuova finestra su 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 );

Fatto! Hai aggiunto con successo un'immagine dopo il tuo modulo.

Successivamente, vorresti cambiare l'immagine di pre-caricamento che appare quando fai clic su invia? Dai un'occhiata al nostro articolo su come cambiare l'icona di pre-caricamento all'invio.

Correlati

Riferimento azione: wpforms_frontend_output_after