サポート » プラグイン » 「Contact Form7」のエラー問題

  • 解決済 airi0208

    (@airi0208)


    Contact Form 7:ver 5.9.2(その後バージョンアップし現在5.9.3)
    WordPress:ver 6.4.3

    関連ありそうなプラグイン
    Conditional Fields for Contact Form 7:ver 2.4.8
    Contact Form 7 Multi-Step Forms:ver 4.3.1

    エラー発生日時:2024/03/26より前(2024/03/10以降のいつからか……)

    お世話になります。
    Contact Form 7で作成したフォームに全て入力し確認画面ページへ移動するボタンをクリックした後、「入力内容に問題があります。確認して再度お試しください。」と出ます。
    エラー場所を確認すると、セレクトフィールドの場所に「未定義の値がこの項目を通じて送信されました。」と見たことないエラーが出てしまいフォームが使用できない状況になってしまいました。

    ● セレクトフィールドは、少し複雑な組み込みをしていて、イベント日程が投稿されるとその情報をfunction.phpで情報を取得・抽出し、JavaScriptでその情報をインプットし選択肢が追加されるようにしています。(イベント日程の投稿が削除されたら選択肢は消えます。)

    ● HTMLとJavaScriptの方では、データ取得は正しく行われております。

    ● ChatGPTくんと頑張って解決しようと思いましたが、開発者ツールの「Network」タブでのリクエストの詳細確認で、フォーム送信に関連するものが追加されず、フォームに入力された値を確認できず現在に至ります。

    いつから起こっていいた症状かはあやふやですが、多分Contact Form 7をバージョンアップしてからかと思います。
    3月はじめまでは、何事もなくお申込みができている状態でした。

    どうぞ宜しくお願いいたします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • モデレーター Takayuki Miyoshi

    (@takayukister)

    問題のサイトはどこで見られますか? URL を教えてください。

    トピック投稿者 airi0208

    (@airi0208)

    コメントありがとうございます。
    問題のサイトは下記のURLとなります。
    https://www.ejair-ds.com/attendance/form
    https://www.ejair-ds.com/triale#triale-form

    モデレーター Takayuki Miyoshi

    (@takayukister)

    サイトを確認しました。いろいろと問題が多そうです。サイト全体の抜本的な修正を勧めたいですが、難しいのであればまず以下の点について詳細を教えてください。

    ● セレクトフィールドは、少し複雑な組み込みをしていて、イベント日程が投稿されるとその情報をfunction.phpで情報を取得・抽出し、JavaScriptでその情報をインプットし選択肢が追加されるようにしています。(イベント日程の投稿が削除されたら選択肢は消えます。)

    • 具体的にどのように実装しているのか、実際のコードについて教えてください。
    • そのような複雑な組み込みをする理由は何でしょうか。
    • その組み込みは必要なものでしょうか。外した場合どのような変化がありますか。
    トピック投稿者 airi0208

    (@airi0208)

    お返事ありがとうございます。
    来週末まで、別件の作業で席を外している時間が多く、返信が遅れてしまう事があります。申し訳ございません。

    ご質問の回答になります。ご確認よろしくお願いいたします。

    • そのような複雑な組み込みをする理由は何でしょうか。

    色々と複雑な事情がありサイト自体が内部制作で、私以外の担当職員はコードとは何ぞや?というようなWeb知識0な状態になります。
    その為、他の職員でも更新できるようにするには、なるべくテキスト入力だけで修正・更新できるようにするしかなく、カスタムフィールドとカスタム投稿を使用し、ほとんどが「そこにこれを入力すれば表示されるから」状態にしています。
    フォームのセレクトフィールドは、お申込み時のイベント日程の選択になり、別の部分でも使用されているイベント登録用のカスタム投稿の記事と同じものになります。

    • その組み込みは必要なものでしょうか。外した場合どのような変化がありますか。

    その組み込みが無くても、コンタクトフォームの設定を毎回、日程を修正し更新すればよいのですが、それの場合になりますと、私以外は誰も更新できなくなる可能性がでてます。

    • 具体的にどのように実装しているのか、実際のコードについて教えてください。

    全体的に量が多いので、その部分のコードのみを記載いたします。それでも多いと思いますが……

    function.php

    // ~~前略
    // フォームへの日付取得-trial
    function generate_event_trial()
    {
      $args = array(
        'post_type' => 'custompost-event',
        'posts_per_page' => -1,
        'orderby' => 'meta_value',
        'meta_key' => 'evententry_date',
        'order' => 'ASC',
        'meta_query' => array(
          array(
            'key' => 'evententry_category',
            'value' => 'trial',
            'compare' => '='
          )
        )
      );
      $query = new WP_Query($args);
      $options = '';
      $options .= "<option value=''>参加希望日を選択</option>";
      if ($query->have_posts()) {
        while ($query->have_posts()) {
          $query->the_post();
          $date = get_post_meta(get_the_ID(), 'evententry_date', true);
          $evententry_date_y = date('Y', strtotime($date));
          $evententry_date_m = date('m', strtotime($date));
          $evententry_date_j = date('j', strtotime($date));
          $evententry_date_w = date('w', strtotime($date));
          $week_jp = array("日", "月", "火", "水", "木", "金", "土");
          $evententry_date_jp = $week_jp[$evententry_date_w];
          $formattedDate = "{$evententry_date_y}年{$evententry_date_m}月{$evententry_date_j}日({$evententry_date_jp})";
          $options .= "<option value='{$date}'>{$formattedDate}</option>";
        }
      } else {
        $options = "<option value='' disabled>ー</option>";
      }
      wp_reset_postdata();
      return $options;
    }
    
    // フォームへの日付取得-atten
    function generate_event_atten()
    {
      $args = array(
        'post_type' => 'custompost-event',
        'posts_per_page' => -1,
        'orderby' => 'meta_value',
        'meta_key' => 'evententry_date',
        'order' => 'ASC',
        'meta_query' => array(
          array(
            'key' => 'evententry_category',
            'value' => 'atten',
            'compare' => '='
          )
        )
      );
      $query = new WP_Query($args);
      $options = '';
      $options .= "<option value=''>参加希望月を選択</option>";
      $uniqueDates = array();
      if ($query->have_posts()) {
        while ($query->have_posts()) {
          $query->the_post();
          $date = get_post_meta(get_the_ID(), 'evententry_date', true);
          $evententry_date_y = date('Y', strtotime($date));
          $evententry_date_m = date('m', strtotime($date));
          $formattedDateForValue = "{$evententry_date_y}-{$evententry_date_m}月期";
          $formattedDateForDisplay = "{$evententry_date_m}月期";
          if (!in_array($formattedDateForValue, $uniqueDates)) {
            $options .= "<option value='{$formattedDateForValue}'>{$formattedDateForDisplay}</option>";
            $uniqueDates[] = $formattedDateForValue;
          }
        }
      } else {
        $options = "<option value='' disabled>ー</option>";
      }
      wp_reset_postdata();
      return $options;
    }
    // ~~後略
    
    

    JavaScript

    // 動的にドロップダウンを更新「#date-trial」
    document.addEventListener("DOMContentLoaded", function () {
      const dropdown = document.getElementById("date-trial");
    
      const options = formOptionDataT.options;
      if (dropdown) {
        dropdown.innerHTML = options;
      }
    });
    
    // 動的にドロップダウンを更新「#date-atten」
    document.addEventListener("DOMContentLoaded", function () {
      const dropdown = document.getElementById("date-atten");
    
      const options = formOptionDataA.options;
      if (dropdown) {
        dropdown.innerHTML = options;
      }
    });
    
    // ~~後略

    コンタクトフォームの設定

    <!-- 入力フォーム -->
    <div class="section-grid formtype-box">
      <label class="grid-c-4-2-6-4 field required">参加希望月</label>
      <div class="grid-c-8-4-6-4 formtype-input">
        [select* date-atten id:date-atten class:selector-field]
      </div>
    </div>
    <!-- ~~後略 -->
    
    <!-- 確認画面 -->
    <div class="section-grid formtype-box">
      <label class="grid-c-4-2-6-4 field required">参加希望月</label>
      <div class="grid-c-8-4-6-4 formtype-input">
        <p>[multiform "date-atten"]</p>
      </div>
    </div>
    <!-- ~~後略 -->
    <!-- 入力フォーム -->
    <div class="section-grid formtype-box">
      <label class="grid-c-4-2-6-4 field required">参加希望日</label>
      <div class="grid-c-8-4-6-4 formtype-input">
        [select* date-trial id:date-trial class:selector-field]
      </div>
    </div>
    <!-- ~~後略 -->
    
    <!-- 確認画面 -->
    <div class="section-grid formtype-box">
      <label class="grid-c-4-2-6-4 field required">参加希望日</label>
      <div class="grid-c-8-4-6-4 formtype-input">
        <p>[multiform "date-trial"]</p>
      </div>
    </div>
    <!-- ~~後略 -->
    モデレーター Takayuki Miyoshi

    (@takayukister)

    ご回答拝見しました。事情があるのはわかるのですが、すでに無理に無理を重ねて収拾がつかなくなっているような印象を受けます。いずれ大きなトラブルにつながる可能性が大きいですし、ボランティアのフォーラムでアドバイスできる範囲を超えているようにも思います。先のコメントにも書きましたがサイトの土台から見直すべきかと思います。

    フォームに限って言えばカスタムのフォームタグを独自定義することでいくぶんか複雑さを減らせるんじゃないかと思います。

    トピック投稿者 airi0208

    (@airi0208)

    お返事ありがとうございます。

    ご提案いただいた内容、しっかりと拝見しました。将来的にもっと大きな問題に発展する恐れがある事、ボランティアのフォーラムでのアドバイス範囲を超えた課題であることも承知致しました。
    カスタムフォームタグの独自定義につきましては、実際に取り組むとなると、早くても2ヶ月後に着手する状況であり、また時間が掛かる事になってしまう状態になる為、その部分は後に別で作業致します。

    その間、今の複雑な組み込みを全て取り払いコンタクトフォームの設定で選択肢を記述し、追加・更新していく方法にシフトいたします。(その方法でテストをしたら、エラーも出ずに送信することが出来ました)

    改めて、貴重なご提案とご指摘ありがとうございました。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。