サポート » プラグイン » Contact Form 7の完了メッセージ表示位置

  • いつも、快適に利用させて頂いてます。

    Contact Form 7の設定を行い順調に設置できたのですが、「送信ボタンを押した後に表示されるメッセージ(「送信完了しました」など)を見落とす恐れがあるので、完了メッセージの表示位置を変えられないか」という要望を受けました。

    ちょうど、こちらで1週間前くらいの書き込みがありました、「onsenpokapoka」さんと同じ内容だと思い、こちらも参考にさせていただきながら調整を行ったのですが、同じく<div>を入れた分の空白が出来ただけで何も起こりませんでした。

    ————————-
    wpバージョン:2.6.5
    MySQL:5.1
    PHP:5.2.8
    レンタルサーバー:さくらインターネット
    ————————-

    ↓確認できているのは、下記です。

    ★<div class=”wpcf7-response-output”></div>タグは、
    管理画面→設定→# Contact Form 7の
    編集画面で追加しております。

    ★下記のソースも確認できました。
    <script type=’text/javascript’ src=’http://www.●●●.jp/wp-includes/js/jquery/jquery.js?ver=1.2.6′></script&gt;

    <script type=’text/javascript’ src=’http://www.●●●.jp/wp-includes/js/jquery/jquery.form.js?ver=2.02′></script&gt;

    <link rel=”stylesheet” href=”http://www.●●●.jp/wp-content/plugins/contact-form-7/stylesheet.css&#8221; type=”text/css” /><script type=’text/javascript’ src=’http://www.●●●.jp/wp-content/plugins/contact-form-7/contact-form-7.js’></script&gt;

    ★head.phpに<?php wp_head(); ?>、footer.phpに<?php wp_footer(); ?>も入っています。

    他にチェックする箇所はございますでしょうか?

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • 私が導入したサイトでも “.wpcf7-response-output” で好きな場所にエラーメッセージを表示しています。

    同じく<div>を入れた分の空白が出来ただけで何も起こりませんでした。

    ということであれば、style.css が原因の気がします。
    (color:#FFF とか)

    他の要素の影響を省くために、以下の書き方で試してみたらいかがでしょう?

    <div class="wpcf7-response-output"></div>
    [email* email]
    [submit " 送 信 "]

    トピック投稿者 new38

    (@new38)

    早速に、お返事ありがとうございます。

    上記にしてみましたが、変わりませんでした。
    ただ、デフォルトで表示されるメッセージのソースとは違う動きをします。
    完了画面のソースは、下記になります。

    デフォルトでは、
    <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&#8221; /></p>
    </form>

    <div class=”wpcf7-response-output wpcf7-mail-sent-ok”>あなたのメッセージは送信されました。ありがとうございました。</div>
    </div>

    モデレーター Takayuki Miyoshi

    (@takayukister)

    Javascript が正常に動いていないケースが考えられますが(Ajax で送信できてるでしょうか?)、Firebug などでエラーを確認してみてはどうでしょうか。

    実際にサイトをみればすぐにわかると思うのですが URL を教えていただくことは可能ですか?

    トピック投稿者 new38

    (@new38)

    ありがとうございます。
    s-m-b.jp/contact/です

    モデレーター Takayuki Miyoshi

    (@takayukister)

    見てみましたが、Javascript のエラーは出ていないものの、Ajax が機能していないですね。div を入れても空白しかできないことの直接の理由はこれです。

    Ajax が機能していない理由はわかりませんでしたが、原因になりそうな問題点がひとつ見られます。このあたりまずチェックしてみてください。

    Lightbox Plugin 0.7/2.03.3 で wp_enqueue_script() を使わずに prototype.js をロードしていますが、これがコンフリクトしている可能性が考えられます。Lightbox Plugin を無効化して動作を確認してみてください。

    トピック投稿者 new38

    (@new38)

    ありがとうございます。

    Light boxのプラグインを無効化にすると
    ページ上部にも、テキストが表示されました。

    ただ、Light boxは既に利用している機能なので
    外す事が難しいのですが、無効化にせずに
    今回のページ上部にメッセージを出す事は難しいのでしょうか?

    また、今度は、別の問題がでてきました。
    必須項目エラーメッセージが、今までは
    テキストエリアの下に赤文字で表示されたのですが、
    Light boxを無効化にすると、
    テキストエリアの上に表示がかぶり、
    文字はブラックで、文字の周りに赤枠が出来てしまいます。
    こちらは、スタイルなどで回避できるのでしょうか?

    なんども、質問すみません。

    モデレーター Takayuki Miyoshi

    (@takayukister)

    Light boxのプラグインを無効化にすると
    ページ上部にも、テキストが表示されました。

    ただ、Light boxは既に利用している機能なので
    外す事が難しいのですが、無効化にせずに
    今回のページ上部にメッセージを出す事は難しいのでしょうか?

    Lightbox によるコンフリクトというところまで絞り込めたわけですね。

    プラグインの作者に連絡して wp_enqueue_script() を使うように促すのが最善です。そのまえに最新のバージョンで修正されていないか先に確認しておいた方がよいでしょう。

    作者が対応できない場合は自力で Lightbox プラグインを修正するしかないです。

    また、今度は、別の問題がでてきました。
    必須項目エラーメッセージが、今までは
    テキストエリアの下に赤文字で表示されたのですが、
    Light boxを無効化にすると、
    テキストエリアの上に表示がかぶり、
    文字はブラックで、文字の周りに赤枠が出来てしまいます。
    こちらは、スタイルなどで回避できるのでしょうか?

    それが Ajax でフォームを送信する場合の正しい動作です。文字や線は CSS で制御できます。contact-form-7/stylesheet.css を参考に調整してみてください。

    トピック投稿者 new38

    (@new38)

    ありがとうございます。
    こちらの方法で試してみます!

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「Contact Form 7の完了メッセージ表示位置」には新たに返信することはできません。