How To Open a New Link on Form Submission with WPForms

AJAXを有効にしている場合、フォーム送信時に新しいリンクを開きますか？簡単なコードスニペットを使用して、確認メッセージを表示し、フォーム送信時に新しいリンクを開く方法をご紹介します。

デフォルトでは、WPFormsでは、フォーム送信時に確認メッセージを表示する、サイト上のページにリダイレクトする、またはカスタムURLを提供するオプションがあります。しかし、これらのオプションの組み合わせを行いたい場合はどうでしょうか？このチュートリアルでは、フォーム送信時に確認メッセージを表示し、同時に新しいタブを開いてPDFダウンロードを表示するページを読み込むフォームを作成します。

フォームの作成

まず、フォームを作成する必要があります。このフォームはシンプルなニュースレターサインアップフォームですが、フィードバックコメントも提供できるようにします。そのため、フォームには名前、メールアドレス、段落テキストのフォームフィールドが含まれます。

フォームの作成方法については、こちらのドキュメントをご覧ください。

フォームを作成し、フィールドを追加します

フォームビルダーを終了する前に、一般タブのAJAXフォーム送信を有効にするを選択してください。

一般設定タブからAJAXを有効にすることを忘れないでください

リンクはコードスニペット内で定義するため、確認タブの確認タイプは、確認メッセージを表示するだけに設定しておいてください。

リンクはコードスニペット内で定義するため、確認メッセージを表示するだけで確認タイプをそのままにしておくことができます。

フォーム送信時に新しいリンクを開く

次に、フォーム送信時に新しいリンクを開くスニペットを追加します。

サイトにスニペットを追加する方法についてサポートが必要な場合は、こちらのチュートリアルをご覧ください。

この特定のスニペットは、フォーム送信でAJAXが有効になっている場合にのみ機能します。

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

#wpforms-form-780を自分のフォームIDに合わせて変更するのを忘れないでください。フォームIDの見つけ方がわからない場合は、こちらのチュートリアルをご覧ください。また、URL（https://google.com）をフォームに必要なURLに合わせて変更する必要があります。

これで、フォームが送信されると、確認メッセージは別のウィンドウに表示されたまま、リンク先の新しいタブが開きます。

そして、フォーム送信時に新しいリンクを開く方法は次のとおりです

これで完了です！フォームフィールドにリンクを入力することをユーザーにブロックさせたいですか？フォームフィールド内のURLをブロックする方法に関するチュートリアルをご覧ください。

アクション参照

wpforms_wp_footer_end

よくある質問

Q: AJAXなしでこれを実行するにはどうすればよいですか？

A: AJAXを使用しないことを希望される場合は、AJAXを使用しない場合にこれを達成する方法に関するチュートリアルがあります。こちらのチュートリアルをご覧ください。

Q: 複数のフォームでこれを実行したい場合はどうなりますか？

A: このスニペットをさまざまな異なるリンクを持つ複数のフォームに設定するには、このコードセクションをコピーして元のコードの下に貼り付け、フォームIDを変更するだけで、追加のフォームIDを追加できます。

スニペットでは、コメントを読んで各「フォーム」コードブロックを見つけてください。

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

AJAX を使用してフォーム送信時に新しいリンクを開く方法

AI要約