質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.36%

  • WordPress

    4766questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

[Wordpress]Contact form 7送信後のリダイレクトが動かない

受付中

回答 1

投稿 2017/11/28 17:50

  • 評価
  • クリップ 0
  • VIEW 69

nico_1989

score 8

Wordpressにて問い合わせフォームを実装しているWEBサイトで、
問い合わせ完了後、別のページにリダイレクトさせたいと考えています。

下記のサイトを参考に、
https://contactform7.com/ja/2017/06/07/on-sent-ok-is-deprecated/
functions.phpに以下のソースコードを書き加えたのですが、動作しません。

add_action( 'wp_footer', 'wpcf7_redirect_newsletter' );
function wpcf7_redirect_newsletter() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'https://abc.com/contact_us_comp';
}, false );
</script>
<?php
}

addEventListenerが動いていないのかもしれませんが、
原因がわかりません。

トリガーの wpcf7mailsent を wpcf7submit などに変えても変わりありませんでした。

ちなみに、これまでは'sent_ok'をContact Form 7のAdditional Settingsに書き込んで、
正常に動作していました。

期待結果としては、問い合わせ完了後に別ページにリダイレクトする処理が書ければOKなのですが、
対策や代案をご存知の方いましたら、ご教示いただけますと幸いです。

よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

ひとまず下記を確認してみてください。

投稿 2017/11/28 18:05

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/29 00:01

    kei344様

    ご回答いただきありがとうございます。

    順に回答いたします。

    > Contact Form 7のバージョンが 4.9以降
    4.9.1でした

    > wp_footer() がテンプレート内で実行されているか
    scriptがHTMLのfooterに吐き出されているか、という意味でしたら、実行されていました。
    (chromeの検証ツールから確認)

    > エラーが出ていないかデベロッパーツールで確認 ⇒ http://eng-entrance.com/javascript-display-error
    みてみたところ、JS関連のエラーは出ていませんでした。

    キャンセル

  • 2017/11/29 00:10

    location の前の行に console.log( 'test' ); を入れてデベロッパーツールでイベントを補足出来るか確認してみてください。

    キャンセル

  • 2017/11/29 18:23 編集

    kei344様

    御指南ありがとうございます。

    script部分を下記のように書き換え、フォーム送信してみました。
    Chromeの検証ツールの「console」から確認してみたところ、やはり出力されず、他の変化もなかったです。

    <script type="text/javascript">
    document.addEventListener( 'wpcf7mailsent', function( event ) {
    console.log( 'test' );
    location = 'https://abc.com/contact_us_comp';
    }, false );
    </script>

    キャンセル

  • 2017/11/29 22:32 編集

    下記を試してみてください。

    document.addEventListener( 'wpcf7invalid', function( event ) {console.log('wpcf7invalid');}, false );
    document.addEventListener( 'click', function( event ) {console.log('click');}, false );
    document.addEventListener( 'wpcf7spam', function( event ) {console.log('wpcf7spam');}, false );
    document.addEventListener( 'wpcf7mailsent', function( event ) {console.log('wpcf7mailsent');}, false );
    document.addEventListener( 'wpcf7mailfailed', function( event ) {console.log('wpcf7mailfailed');}, false );
    document.addEventListener( 'wpcf7submit', function( event ) {console.log('wpcf7submit');}, false );
    var wpcf7Elm = document.querySelector( '.wpcf7' );
    wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {console.log( "querySelector!" );}, false );

    キャンセル

  • 2017/11/29 23:55

    kei344様

    ありがとうございます。

    functions.phpに上記コードを加筆し、
    HTML内に出力されたのを確認したのち、フォーム送信を行ってみました。

    が、やはりChromeのconsoleの出力に変化なく。。。

    メールアドレスを送信するタイプのフォームなのですが、
    バックエンド側でのデータも確認できていますし、自動リプライもちゃんと飛んでいます。

    お手数ですがよろしくお願いします。

    キャンセル

  • 2017/11/30 00:12

    'click'が出力されていないという事はそのスクリプトはパース(読み込み)されていません。もしくはdocumentのイベントを消す変なスクリプトが走っている可能性はあります。

    下記コードでも同じく 'test' が出ないなら前者です。
    <script>console.log( 'test' );</script>

    キャンセル

  • 2017/11/30 01:12

    > <script>console.log( 'test' );</script>

    こちらはchromeのconsoleで出力されていました!
    (同じくfunctions.phpから挿入しています)

    キャンセル

  • 2017/11/30 01:20

    <script></script> にさっきのコードを入れても同じですか?

    キャンセル

  • 2017/12/01 01:27

    kei344様

    footerに<script></script>で書いてみましたが、ダメでした。

    キャンセル

  • 2017/12/01 01:39

    consoleの最下部にある「>」に下記を入れてEnterキーを押して、ページのどこでもクリックをしたら'click'がでますか?
    document.addEventListener( 'click', function( event ) {console.log('click');}, false );

    可能であればURLも提示してください。

    キャンセル

  • 2017/12/01 19:21

    kei344様

    すみません、私が混乱していました。

    Clickイベントはconsoleから出力されていました。

    今フッターに吐き出されている<script></script>は下記です。
    > console.log( 'test_1' );
    > document.addEventListener( 'click', function( event ) {console.log('click_test');}, false );
    > document.addEventListener( 'wpcf7invalid', function( event ) {console.log('wpcf7invalid');}, false );
    > document.addEventListener( 'wpcf7spam', function( event ) {console.log('wpcf7spam');}, false );
    > document.addEventListener( 'wpcf7mailsent', function( event ) {console.log('wpcf7mailsent');}, false );
    > document.addEventListener( 'wpcf7mailfailed', function( event ) {console.log('wpcf7mailfailed');}, false );
    > document.addEventListener( 'wpcf7submit', function( event ) {console.log('wpcf7submit');}, false );

    上記のうち、下記は機能しています。
    > console.log( 'test_1' );
    > document.addEventListener( 'click', function( event ) {console.log('click_test');}, false );

    wpcf7系が丸々動いていないという感じになります。


    URLを提示するのは可能なのですが、開発環境のため、Basic認証がかかっております。

    ※本番環境は依然として下記の状態で動いています。
    > ちなみに、これまでは'sent_ok'をContact Form 7のAdditional Settingsに書き込んで、
    > 正常に動作していました。

    キャンセル

  • 2017/12/01 20:33 編集

    var wpcf7Elm = document.querySelector( '.wpcf7' );
    wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {console.log( "querySelector!" );}, false );

    これは意図的に外されましたか?
    あとは、検証環境があるのであれば、テーマを変えて/プラグインをContact Form 7以外を止めて、検証するくらいしか思いつきません。

    キャンセル

  • 2017/12/02 00:17

    kei344様

    > これは意図的に外されましたか?
    はい、そうです。

    > あとは、検証環境があるのであれば、テーマを変えて/プラグインをContact Form 7以外を止めて、検証するくらいしか思いつきません。
    承知しました。

    長々とお付き合いいただきありがとうございます。
    おかげさまでどこから手をつければいいのやら、という状況から、だいぶ調査範囲が絞れました。

    ご教示いただいた方法で引き続きテストしていきたいと思います。
    何かわかればこちらのページに記載します。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.36%

関連した質問

同じタグがついた質問を見る

  • WordPress

    4766questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。