私が導入したサイトでも “.wpcf7-response-output” で好きな場所にエラーメッセージを表示しています。
同じく＜div＞を入れた分の空白が出来ただけで何も起こりませんでした。
ということであれば、style.css が原因の気がします。
（color:#FFF とか）
他の要素の影響を省くために、以下の書き方で試してみたらいかがでしょう？
<div class="wpcf7-response-output"></div>
[email* email]
[submit " 送 信 "]
早速に、お返事ありがとうございます。
上記にしてみましたが、変わりませんでした。
ただ、デフォルトで表示されるメッセージのソースとは違う動きをします。
完了画面のソースは、下記になります。
デフォルトでは、
<div class=”wpcf7-response-output wpcf7-mail-sent-ok”>あなたのメッセージは送信されました。ありがとうございました。</div>
となるのですが、ページ上部に追加したソースは
<div class=”wpcf7-response-output”></div>のままです。
原因はお分かりになりますでしょうか？
↓
<div class=”wpcf7″ id=”wpcf7-f3-p597-o1″>
<form action=”/contact/#wpcf7-f3-p597-o1″ method=”post” class=”wpcf7-form”>
<input type=”hidden” name=”_wpcf7″ value=”3″ />
<input type=”hidden” name=”_wpcf7_unit_tag” value=”wpcf7-f3-p597-o1″ />
<div class=”wpcf7-response-output”></div>
<table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″ id=”company”>
<tr>
<td>名前<font color=”orange”>※</font></td>
<td><span style=”position: relative;”><input type=”text” name=”your-name” value=”” class=”wpcf7-validates-as-required” /></span></td>
</tr>
</table>
<p>
<input type=”submit” value=”送信” />
<img class=”ajax-loader” style=”visibility: hidden;” src=”http://www.●●●.jp/wp-content/plugins/contact-form-7/images/ajax-loader.gif” /></p>
</form>
<div class=”wpcf7-response-output wpcf7-mail-sent-ok”>あなたのメッセージは送信されました。ありがとうございました。</div>
</div>
Javascript が正常に動いていないケースが考えられますが(Ajax で送信できてるでしょうか?)、Firebug などでエラーを確認してみてはどうでしょうか。
実際にサイトをみればすぐにわかると思うのですが URL を教えていただくことは可能ですか?
ありがとうございます。
s-m-b.jp/contact/です
見てみましたが、Javascript のエラーは出ていないものの、Ajax が機能していないですね。div を入れても空白しかできないことの直接の理由はこれです。
Ajax が機能していない理由はわかりませんでしたが、原因になりそうな問題点がひとつ見られます。このあたりまずチェックしてみてください。
Lightbox Plugin 0.7/2.03.3 で wp_enqueue_script() を使わずに prototype.js をロードしていますが、これがコンフリクトしている可能性が考えられます。Lightbox Plugin を無効化して動作を確認してみてください。
ありがとうございます。
Light boxのプラグインを無効化にすると
ページ上部にも、テキストが表示されました。
ただ、Light boxは既に利用している機能なので
外す事が難しいのですが、無効化にせずに
今回のページ上部にメッセージを出す事は難しいのでしょうか？
また、今度は、別の問題がでてきました。
必須項目エラーメッセージが、今までは
テキストエリアの下に赤文字で表示されたのですが、
Light boxを無効化にすると、
テキストエリアの上に表示がかぶり、
文字はブラックで、文字の周りに赤枠が出来てしまいます。
こちらは、スタイルなどで回避できるのでしょうか？
なんども、質問すみません。
Light boxのプラグインを無効化にすると
ページ上部にも、テキストが表示されました。
ただ、Light boxは既に利用している機能なので
外す事が難しいのですが、無効化にせずに
今回のページ上部にメッセージを出す事は難しいのでしょうか？
Lightbox によるコンフリクトというところまで絞り込めたわけですね。
プラグインの作者に連絡して wp_enqueue_script() を使うように促すのが最善です。そのまえに最新のバージョンで修正されていないか先に確認しておいた方がよいでしょう。
作者が対応できない場合は自力で Lightbox プラグインを修正するしかないです。
また、今度は、別の問題がでてきました。
必須項目エラーメッセージが、今までは
テキストエリアの下に赤文字で表示されたのですが、
Light boxを無効化にすると、
テキストエリアの上に表示がかぶり、
文字はブラックで、文字の周りに赤枠が出来てしまいます。
こちらは、スタイルなどで回避できるのでしょうか？
それが Ajax でフォームを送信する場合の正しい動作です。文字や線は CSS で制御できます。contact-form-7/stylesheet.css を参考に調整してみてください。
ありがとうございます。
こちらの方法で試してみます！
