KI-Zusammenfassung
Möchten Sie beim Aktivieren von AJAX bei Formularübermittlungen einen neuen Link öffnen? Mit einem kleinen Code-Snippet zeigen wir Ihnen, wie Sie Ihre Bestätigungsnachricht anzeigen und gleichzeitig einen neuen Link öffnen können, wenn das Formular übermittelt wird.
Standardmäßig bietet Ihnen WPForms die Möglichkeit, eine Bestätigungsnachricht anzuzeigen, zu einer Seite auf Ihrer Website weiterzuleiten oder eine benutzerdefinierte URL anzugeben, wenn das Formular übermittelt wird. Aber was, wenn Sie eine Kombination dieser Optionen wünschen? Für dieses Tutorial erstellen wir ein Formular, das beim Übermitteln des Formulars eine Bestätigungsnachricht anzeigt, aber auch einen neuen Tab öffnet und eine Seite lädt, auf der ein PDF-Download angezeigt wird.
Erstellung des Formulars
Zuerst müssen wir unser Formular erstellen. Unser Formular ist ein einfaches Anmeldeformular für den Newsletter, aber wir möchten es ihnen auch ermöglichen, Feedback-Kommentare abzugeben. Daher werden wir die Formularfelder Name, E-Mail und Absatztext in unserem Formular haben.
Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, sehen Sie sich diese Dokumentation an.
Stellen Sie sicher, dass Sie im Tab Allgemein die Option AJAX-Formularübermittlung aktivieren auswählen, bevor Sie den Formular-Builder verlassen.
Da wir den Link im Code-Snippet definieren werden, können Sie den Bestätigungstyp im Tab Bestätigungen auf die Anzeige Ihrer Bestätigungsnachricht belassen.
Öffnen eines neuen Links bei Formularübermittlung
Jetzt ist es an der Zeit, den Snippet hinzuzufügen, der bei Formularübermittlungen einen neuen Link öffnet.
Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.
Dieser spezielle Snippet funktioniert nur, wenn AJAX bei der Formularübermittlung aktiviert ist.
/**
* Open new link on form submission with AJAX
*
* @link https://wpforms.com/developers/how-to-open-a-new-link-on-form-submission
*/
function wpf_dev_event_after_submit() {
?>
<script type="text/javascript">
( function() {
jQuery( window ).on( 'load', function() {
// Change your form ID or replace it to the .wpforms-form container.
jQuery( '#wpforms-form-780' ).on( 'wpformsAjaxSubmitSuccess', function( e, response ) {
// replace the URL here
window.open( 'https://google.com', '_blank' );
} );
} )
}() );
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_event_after_submit', 10 );
Denken Sie daran, #wpforms-form-780 zu ändern, damit es Ihrer eigenen Formular-ID entspricht. Wenn Sie Hilfe beim Finden Ihrer Formular-ID benötigen, sehen Sie sich dieses Tutorial an. Sie müssen auch die URL (https://google.com) durch die URL ersetzen, die Sie für Ihr Formular benötigen.
Wenn Ihr Formular nun übermittelt wird, öffnet sich ein neuer Tab mit Ihrem Link, während Ihre Bestätigungsnachricht weiterhin in einem separaten Fenster angezeigt wird.
Das ist alles! Möchten Sie Benutzer daran hindern, Links in Ihre Formularfelder einzugeben? Sehen Sie sich unser Tutorial an: So blockieren Sie URLs in den Formularfeldern.
Aktionsreferenz
FAQ
F: Wie kann ich das ohne AJAX machen?
A: Wenn Sie AJAX nicht verwenden möchten, haben wir ein Tutorial, wie Sie dies erreichen, wenn Sie kein AJAX verwenden. Bitte sehen Sie sich dieses Tutorial hier an.
F: Was ist, wenn ich das für mehrere Formulare tun möchte?
A: Um diesen 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 new link on form submission with AJAX
*
* @link https://wpforms.com/developers/how-to-open-a-new-link-on-form-submission
*/
function wpf_dev_event_after_submit() {
?>
<script type="text/javascript">
( function() {
jQuery( window ).on( 'load', function() {
//1st form
// Change your form ID or replace it to the .wpforms-form container.
jQuery( '#wpforms-form-521' ).on( 'wpformsAjaxSubmitSuccess', function( e, response ) {
window.open( 'https://myexamplesite.com/read-me', '_blank' ); //replace URL
} );
// 2nd form
// Change your form ID or replace it to the .wpforms-form container.
jQuery( '#wpforms-form-2349' ).on( 'wpformsAjaxSubmitSuccess', function( e, response ) {
window.open( 'https://mypartnersite.com/read-me', '_blank' ); //replace URL
} );
// 3rd form
// Change your form ID or replace it to the .wpforms-form container.
jQuery( '#wpforms-form-983' ).on( 'wpformsAjaxSubmitSuccess', function( e, response ) {
window.open( 'https://myexamplesite.com/read-me/privacy.pdf', '_blank' ); //replace URL
} );
// 4th form
// Change your form ID or replace it to the .wpforms-form container.
jQuery( '#wpforms-form-367' ).on( 'wpformsAjaxSubmitSuccess', function( e, response ) {
window.open( 'https://mypartnersite.com/read-me/privacy.pdf', '_blank' ); //replace URL
} );
} )
}() );
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_event_after_submit', 10 );