KI-Zusammenfassung
Möchten Sie, dass die Weiterleitung Ihres Formulars in einem neuen Fenster oder Tab geöffnet wird? Mit WPForms können Sie Ihr Formular nach erfolgreicher Übermittlung an eine neue Seite weiterleiten. Mit einem kleinen JavaScript-Code-Snippet können Sie diese Weiterleitung so einstellen, dass sie in einem neuen Fenster oder Tab geöffnet wird. Diese Anleitung zeigt Ihnen, wie Sie dieses kleine Snippet zu Ihrer Website hinzufügen, um diese Weiterleitung in einem neuen Fenster zu öffnen.
Weiterleitung in einem neuen Fenster öffnen
Bevor wir das Formular erstellen, fügen wir dieses Snippet zu unserer Website hinzu.
Wenn Sie nicht sicher sind, wo oder wie Sie Snippets zu Ihrer Website hinzufügen können, lesen Sie bitte diese Anleitung.
/**
* Open. redirect in a new window
*
* @link https://wpforms.com/developers/how-to-open-redirect-in-a-new-window/
*/
function wpf_dev_open_redirect_new( ) {
?>
<script type="text/javascript">
jQuery(function($){
$( "form#wpforms-form-909" ).attr( "target", "_blank" );
$( "#wpforms-form-909" ).on( 'submit', function(){
location.reload(true);
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_open_redirect_new', 30 );
Dieses Snippet wird nur für die Formular-ID 909 angewendet. Sie müssen diesen Teil des Snippets aktualisieren, um Ihre eigene Formular-ID anzugeben.
Wenn Sie Hilfe beim Finden Ihrer Formular-ID benötigen, lesen Sie bitte diese Anleitung.
Erstellung des Formulars
Als Nächstes müssen Sie Ihr Formular erstellen und die erforderlichen Felder hinzufügen.
Sobald Sie die Felder eingerichtet haben, klicken Sie auf Einstellungen » Bestätigungen und wählen Sie im Dropdown-Menü Bestätigungstyp die Option Gehe zu URL und geben Sie die URL ein, zu der der Benutzer weitergeleitet werden soll.
Hinweis: Weitere Informationen zu Bestätigungstypen finden Sie in dieser Anleitung.
AJAX-Formularübermittlungen deaktivieren
Für diese Anleitung müssen Sie AJAX im Formular deaktivieren. Gehen Sie dazu zu Einstellungen » Allgemein und stellen Sie sicher, dass AJAX-Formularübermittlung aktivieren deaktiviert ist.
Und das ist alles! Sie haben erfolgreich das Snippet hinzugefügt, das eine Weiterleitung in einem neuen Fenster öffnet. Möchten Sie den Titel ändern, der im Tab des Browserfensters erscheint? Möchten Sie dies bei einem Formular erreichen, bei dem AJAX aktiviert ist? Werfen Sie einen Blick auf unseren Artikel So öffnen Sie einen neuen Link bei Formularübermittlung mit AJAX.
Referenzaktion
FAQ
Was ist, wenn ich dies für mehrere Formulare tun möchte?
Um dieses Snippet für mehrere Formulare mit verschiedenen Links einzurichten, würden Sie einfach zusätzliche Formular-IDs hinzufügen, indem Sie diesen Codeabschnitt kopieren, ihn unter dem Original einfügen und die Formular-ID ändern.
Lesen Sie im Snippet einfach die Kommentare, um jeden „Formulare“-Codeblock zu finden.
/**
* Open redirect in a new window
*
* @link https://wpforms.com/developers/how-to-open-redirect-in-a-new-window/
*/
function wpf_dev_open_redirect_new( ) {
?>
<script type="text/javascript">
// 1st form
jQuery(function($) {
// Update the 521 to match your own form ID
$( "form#wpforms-form-521" ).attr( "target", "_blank" );
$( "#wpforms-form-521" ).on( 'submit', function(){
location.reload(true);
});
});
// 2nd form
jQuery(function($) {
// Update the 2349 to match your own form ID
$( "form#wpforms-form-2349" ).attr( "target", "_blank" );
$( "#wpforms-form-2349" ).on( 'submit', function(){
location.reload(true);
});
});
// 3rd form
jQuery(function($) {
// Update the 398 to match your own form ID
$( "form#wpforms-form-398" ).attr( "target", "_blank" );
$( "#wpforms-form-398" ).on( 'submit', function(){
location.reload(true);
});
});
// 4th form
jQuery(function($) {
// Update the 9283 to match your own form ID
$( "form#wpforms-form-9283" ).attr( "target", "_blank" );
$( "#wpforms-form-9283" ).on( 'submit', function(){
location.reload(true);
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_open_redirect_new', 30 );
Kann ich dies so anpassen, dass es nur neu geladen wird, wenn der Benutzer alle Felder ausgefüllt hat?
Ja, Sie können das Skript so ändern, dass die Seite nur bei erfolgreicher Formularübermittlung neu geladen wird. Hier ist ein Snippet, das dies erreicht:
/**
* Open redirect in a new window and reload page only on successful form submission.
*
* @link https://wpforms.com/developers/how-to-open-redirect-in-a-new-window/
*/
function wpf_dev_open_redirect_new() {
?>
<script type="text/javascript">
jQuery(function($) {
// Open form submission in a new window
$( "form#wpforms-form-909" ).attr( "target", "_blank" );
// Listen to the WPForms custom event for successful submission
$(document).on('wpformsAjaxSubmitSuccess', function(e, data) {
if (data.data.form_id == 909) {
location.reload(true);
}
});
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_open_redirect_new', 30);
Denken Sie daran, 909 durch Ihre tatsächliche Formular-ID zu ersetzen.