コンタクトフォームからお問い合わせフォームの送信後、特定のページにリダイレクトさせる方法(アップデート) - WordPress 情報パッケージ
인기 WordPress テーマブルフセール 詳細

コンタクトフォームからお問い合わせフォームの送信後、特定のページにリダイレクトさせる方法(アップデート)

Last Updated:2022年2月5日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

前回の記事でContact Form 7と Quformでお問い合わせフォームを送信した後、特定のページ(例えば、監査ページ)に移動させる方法を説明しました。 しかし、Contact Form 7はon_sent_okフックを2017年末までサポートし、現在はサポートが中止されました。

コンタクトフォームの送信後、Thank youページなど特定のページに移動させる場合は、次のような方法を使用することができます。

Quformの場合、以前に説明した方法を利用すればされます。 "Contact Form 7 / Quformでフォームを送信した後、別のページに移動させる「の」Quformでフォームの送信後に移動するページを指定する(アップデート)」を参照してください。

[この記事は2022年2月5日に最終更新されました。 ]

Contact Form 7のカスタムDOMイベントを使用する

Contact Form 7では提示する方法は、次のJavaScriptを使用する方法です。

document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/';
}, false );

http://example.com/은 원하는 페이지 URL로 대체하도록 합니다.

ページテンプレートを作成して適用する

上記のスクリプトをさまざまな方法で適用することができます。 ページテンプレートを作成コンタクトフォームが挿入されているページにのみ適用することができます。 (あるいはスクリプトを enqueueさせる方法も可能です。 特定のページのみのスクリプトをロードするように設定すると、望ましいと思われる。)

ページテンプレートを作成する方法は、次の記事を参照してください。

スクリプトをすぐ上に追加します。 タグは、通常footer.phpファイルにあります。 したがって、footer.phpファイルを一つコピーしてfooter-contact.phpファイルに変えチャイルドテーマのフォルダにアップロードし、新しく作成したページのテンプレート(例えばpage-contact.php)ファイルでget_footer( '')部分をget_footer( 'contact' )に変更、新しいテンプレートでフッターをfooter-contact.phpファイルをロードします。 この場合、スクリプトをfooter-contact.phpファイル内のすぐ上に貼り付けます。

この部分の詳細な説明は、 get_header()の使用方法を参考にしてみてください。 get_footer()も同じ原理が適用されます。 (この部分がよく理解できないましたら下にご紹介したプラグインを使用すると便利です。)

その後、コンタクトフォームが追加されているページで、ページテンプレートをスクリプトが含まれているテンプレートで指定するようにします。

WordPress ページテンプレートを指定する

ページを保存した後、テストをしてみると、指定したページにリダイレクトされることを確認することができるでしょう。 ジョトゥンテストしてみると 送信 ボタンを押すと、「お問い合わせフォームが送信されました」(例えば、THANK YOU FOR YOUR MESSAGE。IT HAS BEEN SENT)はメッセージが非常に短く表示され、指定したページに移動しますね。

テーマ関数ファイルにフックとして追加する

テーマ関数ファイルに次のコードを入れることも可能です。 チャイルドテーマを作成し、チャイルドテーマ(子テーマ)内の関数ファイルに追加します。

add_action( 'wp_footer', 'redirect_cf7' );
 
function redirect_cf7() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
       location = 'https://www.example.com/thank-you/';
}, false );
</script>
<?php
}

複数のフォームを使用している場合は、次のコードを使用できます。

add_action( 'wp_footer', 'redirect_cf7' );
 
function redirect_cf7() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
   if ( '947' == event.detail.contactFormId ) { // 폼 947
    location = 'https://www.example.com/thank-you-1/';
    } else if ( '1070' == event.detail.contactFormId ) { // 폼 1070
        location = 'https://www.example.com/thank-you-2/';
    } else { // 이외의 모든 폼
        location = 'https://www.example.com/thank-you-3/';
    }
}, false );
</script>
<?php
}

プラグインを使用する

ページテンプレートを作成作業するには、FTPに接続する必要があります。 そんな作業が面倒か、楽でない場合 Contact Form 7 Redirection 同じプラグインを使用することができます。

Contact Form 7 リダイレクトプラグイン

可能な場合は、プラグインを最小限に抑えることが良いが、必要な場合は、このプラグインをインストールしてテストしてみてください。 このプラグインは、現在、7万人以上のサイトに設置されて使用されています。

このプラグインをインストールすると、コンタクトフォームの編集ページに「Redirect Settings「タブが追加され、特定のページや外部URLを指定することができます。

Contact Form 7 リダイレクトプラグイン
Contact Form 7 Redirectionのプラグイン。 出典:プラグインのページ。

ページを新しいタブで開くことができる機能など、いくつかの追加機能が提供されます。

メモ:



コメントを残す

コメント

カフェで WordPress 情報を共有できます。

ありがとうございます!