サポート » プラグイン » Contact Form 7 wpcf7_feedback_responseが機能しない

  • 解決済 takata9456

    (@takata9456)


    初めて投稿します。何か不備や失礼なことがございましたらご指摘ください。

    借りているX-SERVERがContact Form 7を最新にするように求めていたので、v5.3.2から最新のv5.5.6へ更新したところ、今まで機能していたwpcf7_feedback_responseが機能せず、wpcf7_feedback_responseを使っている直前のエラーメッセージまでは出ますが、それ以降のエラーメッセージが出なくなってしまいました。
    当方の環境を記載します。
    WordPress:5.9.3
    PHP:7.4.25
    Contact Form 7:5.5.6

    以下のコードにて、function.phpに記載しています。

    // Auther Takata
    // エラーの出力位置をカスタマイズする
    /* 参考リンク:https://do-jo.jp/plugins/1307/
     *            https://qiita.com/kinshist/items/7a16a1fe4bae27fe11b2
     *            https://nldot.info/i-want-to-change-the-validation-message-display-position-in-copipable-contact-form-7/
     */
    function wpcf7_custom_item_error_position( $items, $result ) {
    	$class = 'wpcf7-custom-item-error';
    	$names = array( 'birth-year', 'birth-month', 'birth-date', 'qualifications', 'other-qualifications' ); // name属性を指定
    
    	if ( isset( $items['invalid_fields'] ) ) {
    		foreach ( $items['invalid_fields'] as $k => $v ) {
    			$orig = $v['into'];
    			$name = substr( $orig, strrpos($orig, ".") + 1 );
    			if ( in_array( $name, $names ) ) {
    				$items['invalid_fields'][$k]['into'] = ".{$class}.{$name}";
    			}
    		}
    	}
    	return $items;
    }
    add_filter( 'wpcf7_feedback_response', 'wpcf7_custom_item_error_position', 10, 2 );

    Contact Form 7の該当のフォームのコードです。

    <div class="contactform h2-txt">
    <table class="table-style01">
    <tr>
    <th class="hissu">お問い合わせ種別</th>
    <td><p>[radio otoiawase-syubetu use_label_element default:1 "お問い合わせ" "相談・見学希望" "ご応募"]</p></td>
    </tr>
    <tr>
    <th class="hissu">お名前</th>
    <td><p>[text* your-name id:name class:text-long akismet:author]</p><p>例:山田 花子</p></td>
    </tr>
    <tr>
    <th>ふりがな</th>
    <td><p>[text your-kana id:kana class:text-long]</p><p>例:やまだ はなこ</p></td>
    </tr>
    <tr>
    <th class="hissu">生年月日</th>
    <td><p>[select* birth-year class:text-short4 include_blank "1950" "1951" "1952" "1953" "1954" "1955" "1956" "1957" "1958" "1959" "1960" "1961" "1962" "1963" "1964" "1965" "1966" "1967" "1968" "1969" "1970" "1971" "1972" "1973" "1974" "1975" "1976" "1977" "1978" "1979" "1980" "1981" "1982" "1983" "1984" "1985" "1986" "1987" "1988" "1989" "1990" "1991" "1992" "1993" "1994" "1995" "1996" "1997" "1998" "1999" "2000" "2001" "2002" "2003" "2004" "2005"]年[select* birth-month include_blank "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月[select* birth-date include_blank "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"]日</p><span class="wpcf7-custom-item-error birth-year birth-month birth-date"></span></td>
    </tr>
    <tr>
    <th class="hissu">性別</th>
    <td>[radio gender use_label_element default:1 "女性" "男性"]</td>
    </tr>
    <tr>
    <th>ご住所</th>
    <td><span class="p-country-name" style="display:none;">Japan</span><p>郵便番号 [text your-post class:text-short8 class:p-postal-code class:input-xlarge]</p>
    <p>[text your-address class:text-long class:p-region class:p-locality class:p-street-address class:p-extended-address class:input-xlarge]</p><p>例:東京都千代田区千代田1-2-3</p></td>
    </tr>
    <tr>
    <th class="hissu">電話番号</th>
    <td><p>[tel* your-telno class:text-long]</p><p>例:03-1234-5678</p></td>
    </tr>
    <tr>
    <th class="hissu">メールアドレス</th>
    <td><p>[email* your-email class:text-long akismet:author_email]</p></td>
    </tr>
    <tr>
    <th class="hissu">保有資格</th>
    <td><p>[checkbox* qualifications use_label_element "介護福祉士" "社会福祉士" "PT" "OT" "ST" "精神保健福祉士" "保健師" "臨床心理士" "公認心理士" "看護師" "管理栄養士" "介護職員初任者研修" "社会福祉主事任用資格" "サービス管理責任者研修修了"]<span style="display: inline-block;">[checkbox qualifications use_label_element "その他"][text other-qualifications id:other-qualifications size:20]</span></p><span class="wpcf7-custom-item-error qualifications other-qualifications"></span></td>
    </tr>
    <tr>
    <th>お問い合わせ内容</th>
    <td><p>[textarea your-message class:text-long]</p></td>
    </tr>
    </table>
    <p class="submit">[submit "送信する"]</p>
    <script>
    document.addEventListener("DOMContentLoaded", function(event) {
       document.getElementById('other-qualifications').disabled = true;
    });
    var targetCheckbox = document.querySelector('input[type="checkbox"][value="その他"]');
    targetCheckbox.addEventListener('click', function(event) {
       var ischecked = targetCheckbox.checked;
       if( ischecked == true ) {
          // チェックが入っていたら有効化
          document.getElementById('other-qualifications').disabled = false;
       }
       else {
          // チェックが入っていなかったら無効化
          document.getElementById('other-qualifications').disabled = true;
       }
    });
    </script>
    </div>

    どのようにしたら、v5.5.6でも機能するようになるのでしょうか?
    皆様のお知恵をお借り出来たら幸いです。

    ヘルプの必要なページ: [リンクを見るにはログイン]

15件の返信を表示中 - 1 - 15件目 (全16件中)
  • トピック投稿者 takata9456

    (@takata9456)

    タグをつけ忘れていましたのでContact Form 7のタグを追加しました

    こんにちは

    Autoptimize プラグインを無効にしてみてください。

    トピック投稿者 takata9456

    (@takata9456)

    ご回答ありがとうございます。
    ご指摘のAutoptimizeプラグインを無効化してみましたが、やはり動かず、
    一番下の部分に変わらずオレンジの枠でメッセージ無しのつぶれた枠が表示されるだけでした。
    サーバーのキャッシュかなと思うので、これからサーバーのキャッシュを削除して試してみようと思います。

    まずは、ご一報まで。

    トピック投稿者 takata9456

    (@takata9456)

    munyagu様、お待たせしました。
    サーバーのキャッシュを削除してやってみましたが、やはり動きませんでした。
    Contact Form 7のv5.3.2の時はAutoptimizeが有効でも問題なく動作していました。

    他になにかお心当たりがございましたら、ご指摘いただけると幸いです。

    トピック投稿者 takata9456

    (@takata9456)

    Contact Form 7で内部エラーが出てるかもしれないので、エラーメッセージを確認したいのですが、
    送信フォームにはオレンジでエラーメッセージがないつぶれた枠が表示されるだけなので
    内部エラーのログが吐き出されているファイルの場所をご存じでしたら、お教えいただけないでしょうか?

    Contact Form 7 内部でエラーは発生していません。
    JavaScript のエラーが発生しています。

    エラーが出ている JavaScript の該当箇所は以下の箇所と思われます。
    (コンパクト化されているので、明確には該当行が分かりませんが)

    const r = e.querySelector(t.into), n = r.querySelector(".wpcf7-form-control");
    n.classList.add("wpcf7-not-valid"), n.setAttribute("aria-describedby", t.error_id);

    1行目でt.intoとなっているのが、wpcf7_feedback_responseフィルターで設定しているintoではないでしょうか。
    そのintoに指定された HTML エレメントが変数 r にセットされ、さらに、 r の下層にあるwpcf7-form-controlクラスを持つエレメントを変数 n にセットしています。
    そのエレメント n にクラスwpcf7-not-validを追加するために、classListプロパティにアクセスしていますが、 n が null であるため index.js:1 TypeError: Cannot read properties of null (reading 'classList') というエラーが発生しています。

    つまり、into で指定した HTML エレメントの下層には、wpcf7-form-control クラスを持つエレメントが必要、ということです。
    フォームコントロールに クラスを追加することで、例えばエラーのあるテキストフィールドの枠を赤くするなどのカスタマイズを可能にするための処理ですが、以前のバージョンとはちょっと変わってしまったのかもしれませんね。

    やってみたわけではありませんので、これが原因でなかったらすいません。

    トピック投稿者 takata9456

    (@takata9456)

    わざわざの調査とご指摘ありがとうございます。

    このJSは何者か調査したところ、Contact Form 7の/plugins/contact-form-7/includes/js/index.js
    である事が判明しました。
    Contact Form 7の不具合のようですね。

    こちらも、コンソールをチェックするという初歩の初歩を怠ってしまい、いらぬお手間をかけさせてしまい
    申し訳ございません。

    作者さんにご連絡を取ったほうがいいのでしょうか?

    トピック投稿者 takata9456

    (@takata9456)

    /contact-form-7/includes/js/index.jsをコード整形にかけて、元のファイルはバックアップして
    動かしてみた所、

    index.js:129で
    TypeError: Cannot read properties of null (reading ‘classList’)
    at l (index.js:103:11)
    at Array.forEach (<anonymous>)
    at index.js:126:254
    が発生してました。

    作者様のHPでは連絡フォームにサポートの依頼はするな、サポートを依頼してきた場合は禁止リストに登録する。
    と、書いてありました。

    不具合の報告ならば禁止リスト入りせずに、受け付けていただけるでしょうか?

    エラーが発生したからといって、不具合かどうかは分かりません。
    仕様が変更になっただけかもしれません。

    また、サポートの依頼は、WordPress.org にあるプラグイン公式ページのサポートフォーラムより行ってください。

    Support » Plugin: Contact Form 7

    モデレーター Takayuki Miyoshi

    (@takayukister)

    Contact Form 7 の作者です。こんにちは。

    wpcf7_feedback_response フィルターフックを利用したカスタマイズが意図するように動いていないという趣旨の質問のようですが、当フックは (ほかのどのフックでもそうですが) 開発者向けに提供しているものですので WordPress のコーディングに馴染みのない方には利用をお奨めしておりません。

    JavaScript のエラーが出ているというのは、wpcf7_feedback_response は REST API の応答に対するフィルターですのでそれを変にいじくれば JavaScript のエラーという結果につながるのは当然です。

    そもそもの疑問なのですが、何をしようとされているのかよくわかりません。このような変にややこしいコードが本当に必要なのでしょうか。本当は何がしたいのか教えていただければ誰か適切な方法をアドバイスしてくれるかもしれません。

    最後に、本件はご自身で行われたカスタマイズに問題があるのは明白です。Contact Form 7 プラグインを責めるのは筋違いです。こういった振る舞いは非常に「失礼な」ことですので心に留めておいていただければと思います。

    トピック投稿者 takata9456

    (@takata9456)

    仕様変更でこちらのコードが正しくなくなった可能性ですね。確かにおっしゃるとおりかもしれませんね。
    ご指摘ありがとうございます。

    それとサポートへのリンクもありがとうございます。
    ただ、こちら、すべて英語になっていますが、日本語は使ってはいけないのでしょうか?(他のユーザーの参考になるように英語で書くべきでしょうか?)

    トピック投稿者 takata9456

    (@takata9456)

    作者様、大変失礼しました。
    カスタマイズの方法は、あちこちのサイトをめぐって独学で学んだものです。
    それが間違っていると言う事ですね。

    ほんとうに、失礼しました。

    今後は何がやりたいかを記載してコードの提案をしていただくよう軌道修正します。
    誠に申し訳ありませんでした。

    トピック投稿者 takata9456

    (@takata9456)

    作者様、お気を悪くされたのしたらお詫びします。
    当方、アプリケーションエンジニアとメインフレーム、スーパーコンピュータのOSの開発を30年やってきたものです。
    WEBエンジニアに転向したのは5年前からですが、一応自分なりに調べて記述して、Contact Form 7のv5.3.2まではちゃんと動いていたので油断していました。
    コードの洗い直しと、何がしたいかをお伝えして、皆様に正しいコードをご指摘いただくようにします。

    モデレーター Takayuki Miyoshi

    (@takayukister)

    初投稿ということでしたのであえて指摘させていただきましたが要らぬお節介でしたらこちらこそすみません。またの投稿をお待ちします。

    トピック投稿者 takata9456

    (@takata9456)

    おはようございます。
    お返事が遅くなり申し訳ありません。

    結論から申し上げますと、当方のコンタクトフォームのソースを変更して、正常に機能するようになりました

    munyagu様のご指摘通り、
    into で指定した HTML エレメントの下層に、wpcf7-form-control クラスを持つエレメントを準備したところ、function.phpに記載したPHPは変更なしで動作しました。

    作者様には、色々と失礼な事を申し上げ申し訳ありませんでした。
    munyagu様、有用なご指摘をありがとうございました。お陰様で解決しました。

15件の返信を表示中 - 1 - 15件目 (全16件中)
  • トピック「Contact Form 7 wpcf7_feedback_responseが機能しない」には新たに返信することはできません。