How to Open Redirect in a New Window with WPForms

Markdownを表示

フォームの転送を新しいウィンドウまたはタブで開きますか？ WPFormsを使用すると、フォームの送信が成功したときに新しいページにリダイレクトできます。簡単なJavaScriptコードスニペットを使用すると、このリダイレクトを新しいウィンドウまたはタブで開くことができます。このチュートリアルでは、この小さなスニペットをサイトに追加して、新しいウィンドウでリダイレクトを開く方法を説明します。

リダイレクトを新しいウィンドウで開く

フォームを作成する前に、このスニペットをサイトに追加することから始めます。

スニペットをサイトに追加する場所や方法がわからない場合は、このチュートリアルを確認してください。

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

このスニペットは、フォームID 909にのみ適用されます。このスニペットの部分を、ご自身のフォームIDに合わせて更新する必要があります。

フォームIDの検索でお困りの場合は、このチュートリアルを確認してください。

フォームの作成

次に、フォームを作成し、必要なフィールドを追加する必要があります。

フィールドの設定が完了したら、設定 » 確認に移動し、確認タイプドロップダウンで「URLに移動」を選択し、ユーザーをリダイレクトしたいURLを入力します。

注意： 確認タイプの詳細については、このチュートリアルを確認してください。

AJAXフォーム送信の無効化

このチュートリアルの目的上、フォームでAJAXを無効にする必要があります。これを行うには、設定 » 一般に移動し、AJAXフォーム送信を有効にするが無効になっていることを確認してください。

リダイレクトを新しいウィンドウで開くために、フォーム送信でAJAXを無効にすることを忘れないでください

これで完了です！リダイレクトを新しいウィンドウで開くスニペットを正常に追加しました。ブラウザウィンドウのタブ内に表示されるタイトルを変更しますか？AJAXが有効なフォームでこれを達成したいですか？AJAXでフォーム送信時に新しいリンクを開く方法の記事をご覧ください。

参照アクション

wpforms_wp_footer_end

よくある質問

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

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

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

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

ユーザーがすべてのフィールドに入力した場合にのみリロードするようにカスタマイズできますか？

はい、フォーム送信が成功した場合にのみページをリロードするようにスクリプトを変更できます。これを実現するスニペットは次のとおりです。

/**
 * 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() {
?>
&lt;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);
            }
        });
    }); 
&lt;/script>
&lt;?php
}

add_action('wpforms_wp_footer_end', 'wpf_dev_open_redirect_new', 30);

909を実際のフォームIDに置き換えることを忘れないでください。

リダイレクトを新しいウィンドウで開く方法

AI要約