Contact Form 7のメール送信後のメッセージ表示位置

  • 解決済 onsenpokapoka

    (@onsenpokapoka)


    15年、 9ヶ月前

    お世話になります。

    サイトのお問い合わせメールフォームに、
    Contact Form 7を使わせて頂いております。

    動作も快適で、個人的には大満足なのですが、
    フォーム利用者から「送信ボタンを押した後に表示されるメッセージ（「送信完了しました」など）を見落とす恐れがあるので、完了メッセージの表示位置を変えられないか」という要望を受けました。

    つきましては、もし初期設定である「送信ボタンの下」以外の場所に、送信メッセージを置く方法がありましたら、ご教示いただけませんでしょうか。
    私的にはデフォルトの表示位置が一番見やすく思っているところもあり、
    理想としては、「デフォルト位置（送信ボタン下）」と、「ページの上の方」の二箇所に同じメッセージを表示する形を実現したく思っています。

    現在メールフォームは、「ページ」に挿入しています。
    氏名や用件を送るだけのフォームで、特別な加工はしていません。
    メッセージは、Contact Form 7同梱のスタイルシートを編集して、少し目立つようにしております。

    また、WEB検索から、メールフォーム作成画面で「class=”wpcf7-response-output”」を指定した＜div＞を入れる方法を拝見し試してみたのですが、解釈を間違えているのか、＜div＞を入れた分の空白が出来ただけで何も起こりませんでした…。

    各ツールのバージョンは以下の通りです。
    ============================
    Contact Form 7：1.9.5.1
    wordpress：2.7.1
    MYSQL：5.0
    PHP：5.2.4
    ============================

    以上、よろしくお願い致します。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • モデレーター Naoko Takano

    (@nao)

    15年、 9ヶ月前

    <div class="wpcf7-response-output"></div>
    を入れる場所を、ページ中ではなくて Contact Form 7 のフォーム作成画面の編集フィールド（例: http://example.com/wp-admin/tools.php?page=contact-form-7/wp-contact-form-7.php）にしてみてください。

    デフォルトでしたら、

    <p>お名前 (必須）<br />
    [text* your-name] </p>

    とあるすぐ上に、上記の div のコードを入れます。

    これでフォームの上部にもメッセージが表示されるはずです。

    トピック投稿者 onsenpokapoka

    (@onsenpokapoka)

    15年、 9ヶ月前

    Nao様
    ご回答ありがとうございます！

    アドバイス頂いた様に<div>の挿入を再度試みたのですが、何故かメッセージは表示されませんでした…。
    現在各ソースは以下のようになっております。（横に伸びてしまったので途中改行を入れてます）

    【管理画面＞ツール＞Contact Form 7＞「フォーム」の中】

    <div class="wpcf7-response-output"></div>

<div id="mail_table">
<table summary="お問い合わせフォーム">
<tr>
<th scope="row"> お名前<span class="hissu">　（必須）</span></th>
<td>[text* your-name]</td>
</tr>
～省略～
</table>
</div>

<ul><li>送信前の注意事項テキスト</li></ul>

<p class="txt_center">[submit "メールを送信する"]</p>

    【ページ】

    ～省略～
<h3>お問い合わせフォーム</h3>
[contact-form 1 "お問い合わせフォーム"]

    【ページテンプレート (page.php) の<head>の一部】

    <link href="http://example.com/wp-content/themes/xxx/xxx.css"
rel="stylesheet" type="text/css" media="all" />
<link href="http://example.com/wp-content/plugins/
contact-form-7/stylesheet.css" rel="stylesheet" type="text/css" />

<script src="http://example.com/wp-content/themes/xxx/js/jquery.js"
 type="text/javascript" charset="utf-8"></script>
<script src="http://example.com/wp-content/plugins/
contact-form-7/contact-form-7.js" type="text/javascript"
 charset="utf-8"></script>

    （jQueryは1.2.6を使用しています）

    【最終的に出されるソース】

    <h3>お問い合わせフォーム</h3>

<div class="wpcf7" id="wpcf7-f1-p56-o1">
<form action="/mail#wpcf7-f1-p56-o1" method="post" class="wpcf7-form">
<div style="display: none;"><input type="hidden" name="_wpcf7"
 value="1" /><input type="hidden" name="_wpcf7_version"
 value="1.9.5.1" /><input type="hidden" name="_wpcf7_unit_tag"
 value="wpcf7-f1-p56-o1" /></div>

<div class="wpcf7-response-output"></div>
<div id="mail_table">
<table summary="お問い合わせフォーム">
<tr>
<th scope="row"> お名前<span class="hissu">　（必須）</span></th>
<td><span class="wpcf7-form-control-wrap your-name">
<input type="text" name="your-name" value=""
 class="wpcf7-validates-as-required" size="40" /></span></td>
</tr>
～省略～
</table>
</div>

<ul><li>送信前の注意事項テキスト</li></ul>

<p class="txt_center"><input type="submit" value="メールを送信する" />
 <img class="ajax-loader" style="visibility: hidden;"
 alt="ajax loader" src="http://example.com/wp-content/plugins
/contact-form-7/images/ajax-loader.gif" /></p>
</form>
<div class="wpcf7-response-output"></div>
</div>

    デフォルトの送信メッセージの方は表示されています。また、メールの送信自体にも問題はありません。
    コーディングミス（<div>の閉じ漏れ等）が無いかツール等でチェックしましたが、それも大丈夫のようでした。
    どこか根本的な部分を間違えているのでしょうか…。。
    テーマは独自に作成したもので、ブラウザは、IE・Firefox・operaなどで試しています。
    不躾な質問になりますが、何かおわかりになりましたらご教示頂ければ幸いです。

    モデレーター Naoko Takano

    (@nao)

    15年、 9ヶ月前

    【管理画面＞ツール＞Contact Form 7＞「フォーム」の中】のコードをそのままコピーしてみましたが、2ヶ所にメッセージが表示されていました。出力はこんなかんじです。

    <p><div class="wpcf7" id="wpcf7-f2-p21-o1">
<form action="/?test#wpcf7-f2-p21-o1" method="post" class="wpcf7-form">
<div style="display: none;"><input type="hidden" name="_wpcf7" value="2" /><input type="hidden" name="_wpcf7_version" value="1.9.5.1" /><input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f2-p21-o1" /></div>
<div class="wpcf7-response-output"></div>
<div id="mail_table">
<table summary="お問い合わせフォーム">
<tr>
<th scope="row"> お名前<span class="hissu">　（必須）</span></th>

<td><span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-validates-as-required" size="40" /></span></td>
</tr>
</table>
</div>
<ul>
<li>送信前の注意事項テキスト</li>
</ul>
<p class="txt_center"><input type="submit" value="メールを送信する" /> <img class="ajax-loader" style="visibility: hidden;" alt="ajax loader" src="http://example.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif" /></p>
</form>
<div class="wpcf7-response-output"></div>
</div>

    相違ないと思います。

    head の script ですが、私の場合

    jquery/jquery.js?ver=1.2.6
jquery.form.js?ver=2.02
contact-form-7.js

    があります。

    kubrick テンプレートに一時的に切り替えてみてテストしてはいかがでしょうか？

    トピック投稿者 onsenpokapoka

    (@onsenpokapoka)

    15年、 9ヶ月前

    Nao様

    ご返信ありがとうございます。検証までして頂けて感謝の極みです。

    さて、比べて頂いた中で、こちらに「jquery.form.js」が無いのが気になったので、ダウンロードし、header.phpに加えてみました。
    結果、無事メッセージが表示されました！

    Contact Form 7の概要にある、「jQuery Form Plugin による AJAX の動的送信が可能。」という言葉の意味を理解していなかったということですね…。
    なんともお恥ずかしい限りです。

    思い通りの結果が得られまして、大変助かりました。
    ご助力、ありがとうございました。

    モデレーター Takayuki Miyoshi

    (@takayukister)

    15年、 9ヶ月前

    さて、比べて頂いた中で、こちらに「jquery.form.js」が無いのが気になったので、ダウンロードし、header.phpに加えてみました。
    結果、無事メッセージが表示されました！

    Contact Form 7の概要にある、「jQuery Form Plugin による AJAX の動的送信が可能。」という言葉の意味を理解していなかったということですね…。
    なんともお恥ずかしい限りです。

    いえ、これは Contact Form 7 の方におそらく問題があります。

    jquery.form.js が HTML ソースのフッタの部分でロードされていないでしょうか。もしあれば、ヘッダで jquery.form.js を手動ロードされると重複になるため別の問題を引き起こす可能性があります。

    開発バージョンの Contact Form 7 では正しく処理するようになっていますので、よければこちらを試してみてください。

    トピック投稿者 onsenpokapoka

    (@onsenpokapoka)

    15年、 9ヶ月前

    takayukister様

    ありがとうございます。
    なるほど、「jquery.js」「jquery.form.js」「stylesheet.css」「contact-form-7.js」は、本来自動で読み込んでくれるものなのですね。
    使用中のテーマではこれらは読み込まれず、全て手動でheader.phpに加えておりました。
    手順としては以下の通りです。

    1. Contact Form 7をダウンロード。
    2. プラグインフォルダへアップし、使用開始。
    3. 管理画面＞ツール＞Contact Form 7から、メールフォームを作成。
    4. 作成されたコード[contact-form 1 "xxx"]を、ページの挿入したい場所へ記述。
    5. メールが送信されるのを確認。
    6. 送信メッセージをいじろうとし、CSSが適応されていないことに気づく。
    7. 出力されたソースを確認。CSSがリンクされてないことに気づく。
    8. Contact Form 7フォルダ内のファイルをチェックし、「stylesheet.css」と「contact-form-7.js」を手動でheader.php適応。
      （「jquery.js」は、他の部分でも使っていたので、適応済みでした）
    9. 一見完成した感じに。
    10. ところが、<div class=”wpcf7-response-output”></div>が反映せず。
    11. 「contact-form-7.js」もダウンロードしてきてheader.phpに適応。

    ので、「各関連ファイルは無くても動作するけれど、機能をフルで使いたい場合には手動で適応させる必要があるのか…」なんて勝手に解釈しておりました…。

    早速開発版を頂戴し、プラグインを入れ直してみたのですが、関連ファイルは読み込まれないままでした。。
    そこでNao様のご助言どおり、一旦デフォルトテーマに切り変えたところ、そちらではきちんと<head>内に読み込まれておりました。

    <script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.2.6'></script>
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.form.js?ver=2.02'></script>
<meta name="generator" content="WordPress 2.7.1" />

<link rel="stylesheet" href="http://example.com/wp-content/plugins/contact-form-7/stylesheet.css" type="text/css" /><script type='text/javascript' src='http://example.com/wp-content/plugins/contact-form-7/contact-form-7.js'></script>

    自作のテーマが何か悪さをしているのですね。
    参考書を片手にindex.phpを作成するところから初め、ブログではなく、一般的なサイトのような形にカスタマイズしたので、普通なら入っているはずのファイルが入っていなかったりするのかもしれません。
    ちなみに以下が出力される<head>です。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>タイトル</title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<link href="http://example.com/wp-content/themes/xxx/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="http://example.com/wp-content/plugins/contact-form-7/stylesheet.css" rel="stylesheet" type="text/css" />
<script src="http://example.com/wp-content/themes/xxx/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="http://example.com/wp-content/themes/xxx/js/jquery.form.js" type="text/javascript" charset="utf-8"></script>
<script src="http://example.com/wp-content/plugins/contact-form-7/contact-form-7.js" type="text/javascript" charset="utf-8"></script>
</head>

    他のプラグイン・JSも影響していないみたいなので、自作テーマをデフォルトと比べることで原因を調べたいと思います。

    危うく間違った認識のまま、Contact Form 7を使用するところでした。
    Jquery等もwp-includesの中に入っていたのですね…。大変勉強になりました。
    ご指摘ありがとうございました＆長文失礼致しました。

    モデレーター Naoko Takano

    (@nao)

    15年、 9ヶ月前

    </header> の上に <?php wp_head(); ?> が抜けていませんか？
    デフォルトテーマには入っていると思いますが、これがないとプラグインなどがうまく動作しません。それから、footer.php の <?php wp_footer(); ?> もお忘れなく！

    すみません、これについてのドキュメンテーションがまだ日本語訳されていませんでした。のちほどやっておきます！

    トピック投稿者 onsenpokapoka

    (@onsenpokapoka)

    15年、 9ヶ月前

    <?php wp_head(); ?>と<?php wp_footer(); ?>、見事に抜けておりました。。
    慌てて挿入したところ、デフォルトテーマ同様ちゃんと読み込まれました…！

    検索してみましたが、上記コードの抜けは、Contact Form 7に限らず
    プラグインが適応されない際のよくある原因のひとつなのですね。
    本当にお恥ずかしい限りです…。

    度重なるご指南、ありがとうございました！

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