wordpressのcontact form7で挙動がおかしくなる。

WPでcontact form7のプラグインを使っています。
不具合としては、下のような項目を作って、入力する際、「日」のフォームを入力しようとしても、なぜか強制的にまた「月」の部分に移動してしまいます。

contact formのコードはこんな感じです。


      <label class="flex_wrap">
        <p class="title date">AAAの<br>お申込日時</p>
      </label>
      <div class="content date">
        <p class="txt">お申込みは『AAA』をご確認の上、ご記入ください</p>
        <div class="flex input-date">
          <label>[date date-813]月</label>
          <label>[date number-950]日</label>
          <div class="">[select menu-462 "時間を選択" "13:00〜" "13:30〜" "14:00〜" "14:30〜" "15:00〜" "15:30〜" "16:00〜" "16:30〜" "17:00〜" "17:30〜" "18:00〜" "18:30〜" "19:00〜" "19:30〜"]</div>
        </div>
      </div>

そして、実際に吐き出されたコード（コンソール）を確認したところ、<label class="flex_wrap">が、全体を覆っている形になってしまっていました。

<label class="flex_wrap"><p></p>
　　<p class="title date">ウォレスアカデミーの<br>お申込日時</p>
　　<p>      </p>
　　<div class="content date">
　　　　<p class="txt">お申込みは『ウォレスアカデミー カレンダー』をご確認の上、ご記入ください</p>
　　　　<div class="flex input-date">
          <label><span class="wpcf7-form-control-wrap date-813"><input type="date" name="date-813" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" aria-invalid="false"></span>月</label><br>
          <label><span class="wpcf7-form-control-wrap number-950"><input type="date" name="number-950" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" aria-invalid="false"></span>日</label><p></p>
<div class="">
　　<span class="wpcf7-form-control-wrap menu-462">
　　　　<select name="menu-462" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="時間を選択">時間を選択</option><option value="13:00〜">13:00〜</option><option value="13:30〜">13:30〜</option><option value="14:00〜">14:00〜</option><option value="14:30〜">14:30〜</option><option value="15:00〜">15:00〜</option><option value="15:30〜">15:30〜</option><option value="16:00〜">16:00〜</option><option value="16:30〜">16:30〜</option><option value="17:00〜">17:00〜</option><option value="17:30〜">17:30〜</option><option value="18:00〜">18:00〜</option><option value="18:30〜">18:30〜</option><option value="19:00〜">19:00〜</option><option value="19:30〜">19:30〜</option>
　　　　</select>
　　</span>
</div>
<p></p></div>
<p></p></div>
<p></p></label>

こちらの原因はなんでしょうか...？ご教授いただけると幸いです。よろしくお願いいたいますm_ _m。。

行動規範の内容に同意します

回答1件

ベストアンサー

文法的に、label要素内にp要素は入れられないのでブラウザによる独自解釈によって崩れているか、WordPressの何らかのフィルタで意図しないタグ構成になっているか、どちらかではないでしょうか。
それらはデベロッパーツールでなく出力されたHTML（ブラウザで「ページのソースを表示」）で確認することをお勧めします。（ブラウザによる独自解釈の場合、デベロッパーツールの時点で解釈し終わっている）

【<label> - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/label#Technical_summary

許可されている内容記述コンテンツ

【コンテンツカテゴリー - 開発者ガイド | MDN】
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content

記述コンテンツ

記述コンテンツ (phrasing content) は、文章とその中に含まれるマークアップを定義します。記述コンテンツの集まりで段落を構成します。
このカテゴリーに属する要素: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> および通常の文字列です（空白文字だけで構成されたものを除く）。