フォームのリダイレクトを新しいウィンドウまたはタブで開きたいですか？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 );
このスニペットはフォームID909にのみ適用されます。自分のフォームIDに合わせて、この部分を更新する必要があります。
フォームIDを見つけるのに必要なサポートについては、このチュートリアルを参照してください。
フォームの作成
次に、フォームを作成し、必要なフィールドを追加する必要があります。
フィールドを設定したら、"設定" " 確認" をクリックし、"確認の種類" ドロップダウンで、"URLに移動" を選択し、ユーザーにリダイレクトさせたいURLを入力します。
注： 確認タイプの詳細については、こちらのチュートリアルをご覧ください。
AJAXフォーム送信を無効にする
このチュートリアルでは、フォームのAJAXを無効にする必要があります。これを行うには、設定 " 一般に行き、AJAXフォーム送信を有効にするが無効になっていることを確認してください。
これで完了です！新しいウィンドウでリダイレクトを開くスニペットの追加に成功しました。ブラウザウィンドウのタブ内に表示されるタイトルを変更したいですか？AJAXが有効なフォームでこれを実現したいですか？AJAX を使ってフォーム送信時に新しいリンクを開く方法」の記事をご覧ください。
参考アクション
よくあるご質問
これを複数のフォームに適用したい場合は？
このスニペットを様々な異なるリンクを持つ複数のフォーム用に設定するには、コードのこの部分をコピーして元のコードの下に貼り付け、フォーム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() {
?>
<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);
909を 実際のフォームIDに置き換えてください。