Möchten Sie bei der Übermittlung eines Formulars einen neuen Link öffnen, wenn Sie AJAX aktiviert haben? Mit einem kleinen Codeschnipsel zeigen wir Ihnen, wie Sie Ihre Bestätigungsnachricht anzeigen, aber auch einen neuen Link öffnen können, wenn das Formular abgeschickt wird.
Standardmäßig gibt WPForms Ihnen die Möglichkeit, eine Bestätigungsnachricht anzuzeigen, zu einer Seite auf Ihrer Website weiterzuleiten oder eine benutzerdefinierte URL bereitzustellen, wenn das Formular übermittelt wird. Aber was wäre, wenn Sie eine Kombination dieser Optionen verwenden wollten? In diesem Tutorial werden wir ein Formular erstellen, das eine Bestätigungsnachricht anzeigt, wenn das Formular abgeschickt wird, aber auch eine neue Registerkarte öffnet und eine Seite lädt, die auch einen PDF-Download anzeigt.
Erstellen des Formulars
Zunächst müssen wir unser Formular erstellen. Unser Formular ist ein einfaches Anmeldeformular für den Newsletter, aber wir wollen ihnen auch die Möglichkeit geben, Kommentare abzugeben, also werden wir die Formularfelder Name, E-Mail und Absatztext in unserem Formular haben.
Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, lesen Sie bitte diese Dokumentation.
Bevor Sie den Formularersteller verlassen, müssen Sie auf der Registerkarte Allgemein die Option AJAX-Formularübermittlung aktivieren aktivieren.
Da wir den Link innerhalb des Codeschnipsels definieren werden, können Sie die Registerkarte Bestätigungen Bestätigungstyp so belassen, dass nur Ihre Bestätigungsmeldung angezeigt wird.
Öffnen eines neuen Links beim Absenden des Formulars
Jetzt ist es an der Zeit, das Snippet hinzuzufügen, das einen neuen Link bei der Übermittlung von Formularen öffnen wird.
Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, lesen Sie bitte diesen Leitfaden.
Dieses spezielle Snippet funktioniert nur, wenn AJAX für die 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 nur daran, die #wpforms-form-780 um Ihre eigene Formular-ID zu finden. Wenn Sie Hilfe bei der Suche nach Ihrer Formular-ID benötigen, Bitte 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 abgeschickt wird, öffnet sich nun eine neue Registerkarte mit Ihrem Link, während Ihre Bestätigungsnachricht weiterhin in einem separaten Fenster angezeigt wird.
Und das war's! Möchten Sie verhindern, dass Benutzer Links in Ihre Formularfelder eingeben? Werfen Sie einen Blick auf unser Tutorial über das Blockieren von URLs in Formularfeldern.
Aktion Referenz
FAQ
F: Wie kann ich das ohne AJAX machen?
A: Wenn Sie es vorziehen, AJAX nicht zu verwenden, haben wir eine Anleitung, wie Sie dies erreichen, wenn Sie AJAX nicht verwenden. Bitte schauen Sie sich dieses Tutorial hier an.
F: Was ist, wenn ich dies für mehrere Formulare tun möchte?
A: Um dieses Snippet für mehrere Formulare mit verschiedenen Links einzurichten, fügen Sie einfach zusätzliche Formular-IDs hinzu, indem Sie diesen Abschnitt des Codes kopieren, ihn unter dem Original einfügen und die Formular-ID ändern.
Lesen Sie einfach die Kommentare in dem Ausschnitt, um die einzelnen Codeblöcke 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 );