サポート » プラグイン » Contact Form 7 で<input><textarea>が表示しない。

  • 解決済 imaru

    (@imaru)


    お世話になります。
    Contact Form 7を利用させて頂きました設置直後から<input><textarea>が表示されません。
    Contact Form 7の問題と言うより、自作のテンプレートに問題が有るかと思っていますが・・・。

    環境
    WordPress 2.9.2
    Contact Form 7 2.2.1
    テーマ自作

    他に利用しているプラグイン
    Improved Include Page
    WP Multibyte Patch

    プラグインはContact Form 7のみにしても挙動の変化はありません。

    説明をするより、Contact Form 7で生成されたhtmlソースを見てください。

    <div class="wpcf7" id="wpcf7-f1-p327-o1"><form action="/wp/?page_id=327#wpcf7-f1-p327-o1" method="post" class="wpcf7-form">
    <div style="display: none;">
    <input type="hidden" name="_wpcf7" value="1" />
    <input type="hidden" name="_wpcf7_version" value="2.2.1" />
    <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1-p327-o1" />
    </div>
    <dl>
    <dt>お名前 (必須)</dt>
    <dd><span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-validates-as-required" size="40" /></span> </dd>
    <dt>メールアドレス (必須)</dt>
    <dd><span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-validates-as-email wpcf7-validates-as-required" size="40" /></span> </dd>
    <dt>メッセージ本文</dt>
    <dd><span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10"></textarea></span> </dd>
    </dl>
    <p><input type="submit" value="Nail予約メールを送信する" /></p>
    <div class="wpcf7-response-output wpcf7-display-none"></div></form></div>

    ※改行はhtmlソースで見た状態のまま

    htmlソースは上記の通りになり、問題無いと判断しています。
    Contact Form 7は問題なく動作していると思います。

    上記のソースで下記の部分がブラウザ上で表示されていません。

    <input type="text" name="your-name" value="" class="wpcf7-validates-as-required" size="40" />
    <input type="text" name="your-email" value="" class="wpcf7-validates-as-email wpcf7-validates-as-required" size="40" /><
    <textarea name="your-message" cols="40" rows="10"></textarea>

    上記記述部分(<input>と<textarea>)が表示しません。
    <dt></dt>で囲まれた部分とボタンの「送信する」のみしか表示しません。

    動作を確認したブラウザ
    Mac OS X safari 4.0.5
    Windows XP IE6

    試した事
    1、テーマを「default」に変更した場合<input><textarea>は表示します。
    2、自作のheader.php をテーマを「default」header.php(<boby>より下は削除しています)に差し替えても<input><textarea>表示しません。
    3、2にプラスして、functions.phpをサーバにアップロードしても<input><textarea>は表示しません。自作デーマでは、functions.phpは利用していません。
    「default」のテーマで<input><textarea>は表示します。自作のテーマに問題が有ると思ています。。
    4,<dl><dt><dd>を止めて、単に<p></p>で括っても<input><textarea>は表示しません。

    よく分からない挙動
    フォームを表示したいページに、ページ編集画面上から下記のContact Form 7のタグを書く事で、上記のhtmlソースが生成されています。

    [contact-form 1 “コンタクトフォーム 1”]

    上記Contact Form 7 のタグ以外に、ページ編集画面上からContact Form 7で生成されたhtmlソースを直接書き込んでみました。

    直接書き込んだhtmlソース

    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-validates-as-required" size="40" /></span>

    上記のhtmlソースを追加で書き込んだ所、何も表示されませんでした。
    その際のhtmlソース

    <p><span class="wpcf7-form-control-wrap your-name"><br />
    <input type="text" name="your-name" value="" class="wpcf7-validates-as-required" size="40" /></span></p>

    何故か<input>タグの前に
    タグが入り改行されています。

    上記のhtmlソースを以下のように、意図的に改行して書き込んでみました。

    <span class="wpcf7-form-control-wrap your-name">
    <input type="text" name="your-name" value="" class="wpcf7-validates-as-required" size="40" /></span></p>

    と修正した所、<input>(テキストフォーム)が表示されました。
    <input>タグの前で意図的に改行しました。

    その際にhtmlソースを確認した所

    <p><span class="wpcf7-form-control-wrap your-name"></p>
    <input type="text" name="your-name" value="" class="wpcf7-validates-as-required" size="40" /></span></p>

    意図的に改行したhtmlソースは1行目が<p></p>タグで囲まれ最後に<input>タグ行の最後に</p>のタグが1個付いています。
    修正前は、1行目の最後に
    が付いて改行されています。

    上記の挙動は、WordPressの挙動だと思います。
    正直、ここまで確認して何が原因なにか判らなくなりました。
    何でも良いのでアドバイスを頂ければと思います。

    希望は、自作テーマでContact Form 7を利用したい。
    上記のWordPressの挙動はなぜ起きるのかを知りたいと思います。

    Contact Form 7は過去に利用したことあり、その際は問題無く利用出来ました。
    問題無く動作しているサイトで、Contact Form 7が生成したhtmlソースを見比べても違いは見あたりません。
    自作テーマに問題があると判断しますが、どう修正して良いのか判りません。

    以上です。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • safari、Firefox、chrome などのエディタで、確認してみればすぐに解決しそうな気もします。
    もしかしたら、スタイルシートなどで、display:noneとか、visibility:hidden などが効いてしまっているかもなので。

    テーマの作りも、公開サイトかどうかもわからないので何とも言えませんが。

    kvex 様

    アドバイスをありがとうございます。
    safari てスタイルシートを切ってみると、<input><textarea>が表示されました。
    やはりスタイルシートが原因なんだと思います。

    もっと地道に検証してみます。

    そしたらすぐにわかりませんか?
    どこのスタイルシートの何行目で指定されてるスタイルかわかりますよね?

    kvex 様

    アドバイスをありがとうございます。
    解決しました!

    スタイルシートを再度確認してみました。
    記述の中に

    `
    span {
    display: none;
    }

    がありました。
    
    Contact Form 7が生成しているhtmlソースに

    <span class=”wpcf7-form-control-wrap your-name”><input type=”text” name=”your-name” value=”” class=”wpcf7-validates-as-required” size=”40″ /></span>
    `
    <span>の display: none; は有効になっていました。
    スタイルシートでちょっとしたテクニックを真似た記述でした。中々気がつきませんでした(^^)。
    相談させて頂くことで気がつくことが出来ました。

    ありがとうございました。

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