Anzeigen eines Bildes nach Ihrem Formular

Möchten Sie ein Bild nach Ihrem Formular anzeigen? Mit einem kleinen PHP-Snippet können Sie ganz einfach Ihr Bild, ein Video oder eine Nachricht direkt unter der Schaltfläche "Senden" hinzufügen.

In diesem Tutorial führen wir Sie durch die Schritte, wie Sie dies erreichen können.

Erstellung des Formulars

Zuerst müssen Sie ein neues Formular erstellen oder ein bestehendes bearbeiten, um auf den Formular-Builder zuzugreifen. Gehen Sie im Formular-Builder die Felder durch, die Sie zum Formular hinzufügen müssen.

Hinzufügen des Snippets

Dieser Code-Schnipsel kann verwendet werden, um alles unterhalb Ihres Formulars hinzuzufügen. Sie können ein Bild, ein Video oder nur Text hinzufügen. Um unser Bild nach der Schaltfläche "Senden" hinzuzufügen, müssen Sie diesen Schnipsel kopieren und auf Ihrer Website einfügen.

Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.

In unserem Beispiel beschränken wir diesen Schnipsel auf die Formular-ID 999. Sie müssen diese ID durch die ID des Formulars ersetzen, das Sie ansprechen möchten. Wenn Sie nicht sicher sind, wie Ihre Formular-ID lautet und Hilfe bei der Suche benötigen, sehen Sie sich dieses Tutorial an.

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

Der obige Code src="'.get_template_directory_uri().'/images/ sucht nach einem Verzeichnis (einem Ordner) auf Ihrem Server namens images in Ihrem Theme-Verzeichnis. Das Bild muss sich also im Bilder-Ordner auf Ihrem Server befinden.

Alternativ können Sie einfach ein Bild in Ihre Medienbibliothek hochladen und den Wert nach src= mit der Bild-URL aktualisieren. So sieht der aktualisierte Schnipsel aus, wenn Sie ein Bild aus der WordPress-Medienbibliothek verwenden.

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

Häufig gestellte Fragen

Dies sind Antworten auf einige der häufigsten Fragen, die wir zum Hinzufügen von Bildern nach der Schaltfläche "Senden" in WPForms erhalten.

F: Wie kann ich Text mit einem Link nach dem Formular anzeigen?

A: Wenn Sie nur Text mit einem Link anzeigen möchten, können Sie diesen Schnipsel verwenden.

In diesem Beispiel zeigen wir eine "Powered by Stripe"-Nachricht mit einem Link an, der ein neues Fenster zu Stripe öffnet.

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

Das war's! Sie haben erfolgreich ein Bild nach Ihrem Formular hinzugefügt.

Möchten Sie als Nächstes das Ladebild ändern, das angezeigt wird, wenn Sie auf "Senden" klicken? Sehen Sie sich unseren Artikel über das Ändern des Preloader-Icons beim Senden an.

Verwandt

Aktionsreferenz: wpforms_frontend_output_after