サポート » プラグイン » Contact Form 7をカスタマイズして確認画面の作成

  • Contact Form 7をカスタマイズして確認画面を設置しようとしており確認画面を作り、

    その他の設定に
    on_sent_ok: “location.replace(‘確認画面URL’);”

    を入力しても反映されず確認画面が上手く作成出来ません・・・。

    設定や記述に不足があるのでしょうか?
    よろしくお願いします。

    ●使用しているタグ

    <p>お名前 (必須)<br />
        [text* your-name] </p>
    
    <p>フリガナ (必須)<br />
        [text* kana] </p>
    
    <p>電話番号 (必須)<br />
        [text* tel] </p>
    
    <p>ご住所<br />
        [text addres]</p>
    
    <p>メールアドレス (必須)<br />
        [email* your-email] </p>
    
    <p>メッセージ本文<br />
        [textarea your-message] </p>
    
    <p>[submit "送信"]</p>

    ●確認画面

    <div class="entry">
    <div class="wpcf7" id="wpcf7-f1-p244-o1"><form action="/myhp/contact2#wpcf7-f1-p244-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" />
    <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1-p244-o1" />
    </div>
    <p>お名前 (必須)<br />
        <span class="wpcf7-form-control-wrap your-name">
    <?php if (!$_POST["your-name"]) { print('<span class="wpcf7-not-valid-tip-no-ajax">お名前が入力されていません。</span>');} else { print($_POST["your-name"]);} ?></span> </p>
    
    <p>フリガナ (必須)<br />
        <span class="wpcf7-form-control-wrap kana">
    <?php if (!$_POST["kana"]) { print('<span class="wpcf7-not-valid-tip-no-ajax">フリガナが入力されていません。</span>');} else { print($_POST["kana"]);} ?>
    </span> </p>
    <p>電話番号 (必須)<br />
        <span class="wpcf7-form-control-wrap tel">
    <?php if (!$_POST["tel"]) { print('<span class="wpcf7-not-valid-tip-no-ajax">電話番号が入力されていません。</span>');} else { print($_POST["tel"]);} ?>
    </span> </p>
    <p>ご住所<br />
        <span class="wpcf7-form-control-wrap addres">
    <?php print($_POST["addres"]); ?></span>
    
    </p>
    <p>メールアドレス (必須)<br />
    
        <span class="wpcf7-form-control-wrap your-email">
    <?php if (!$_POST["your-email"]) { print('<span class="wpcf7-not-valid-tip-no-ajax">メールアドレスが入力されていません。</span>');} else { print($_POST["your-email"]);} ?></span></span> </p>
    <p>メッセージ本文<br />
        <span class="wpcf7-form-control-wrap your-message">
    <?php if (!$_POST["your-message"]) { print('<span class="wpcf7-not-valid-tip-no-ajax">お問い合わせ内容が入力されていません。</span>');} else { print($_POST["your-message"]);} ?></span></span> </p>
    <p><input type="submit" value="送信" />
    <img class="ajax-loader" style="visibility: hidden;" alt="ajax loader" src="URL/wp-content/plugins/contact-form-7/images/ajax-loader.gif" /></p>
    <div class="wpcf7-response-output wpcf7-validation-errors">
    <?php if(!$_POST["your-name"] or !$_POST["kana"] or !$_POST["tel"] or !$_POST["your-email"] or !$_POST["your-message"]) { print('<input type="button" value=" 戻る " onclick="self.history.back()" />');} else { print('<input type="submit" value="内容を送信する" />');} ?>
    </div></form></div>
    
        </div>
      </div>
    
        </div>

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • モデレーター Takayuki Miyoshi

    (@takayukister)

    こちらを参照してください。動かない場合の注意点も書いてあります。

    Contact Form 7: 送信後に異なる URL にリダイレクトさせるには

    トピック投稿者 tyabokick

    (@tyabokick)

    ありがとうございます。

    調べている中、Contact Form 7のファイル内にcontact-form-7.jsというファイルがないのですが、このファイルは元々入ってるものなのでしょうか?

    それとも追加で入れるものなのでしょうか?

    モデレーター Takayuki Miyoshi

    (@takayukister)

    たぶん相当古いかまるっきり間違った情報源を参考にされてますね。どこかのサイトを参考にされているのならそれの URL を書いてもらった方が回答する方も答えやすいですよ。

    トピック投稿者 tyabokick

    (@tyabokick)

    以下の文章を参考に作成しています。

    ‘wordpress 2.8.6とcontact form 7 2.0.7で、完了画面に遷移できるようにする
    1.contact-form-7.js、jquery.form.js, jquery.js を読み込むように設定する
    (本来は、デフォルトで読み込まれているはずだが、
     当方の環境では読み込まれていなかったため、フッター等に直接書き込んだ。)
    2.問い合わせフォームの編集画面で、「その他の設定」に、
    on_sent_ok: “location.replace(‘http://example.com/thank-you’);”
    と入れる’

    自分の環境は

    Contact Form 7 バージョン 2.2
    WordPress バージョン 2.9.2
    です。

    動作に関係あるか分かりませんが、ヘッダーに以下の文を一応、書き込んでいます。

    <script type=’text/javascript’ src=’http://www.myhp.co.jp/wp-includes/js/jquery/jquery.js’></script&gt;

    <script type=’text/javascript’ src=’http://www.myhp.co.jp/wp-includes/js/jquery/jquery.form.js’></script&gt;

    <script type=’text/javascript’ src=’http://www.myhp.co.jp/wp-content/plugins/contact-form-7/scripts.js’></script&gt;

    モデレーター Takayuki Miyoshi

    (@takayukister)

    まず、参考にされている情報が間違っています。不確かな情報を鵜呑みにせず公式なドキュメントをよく読んでください。

    抱えられていると思われる問題には少なくとも二つ原因があります。

    ひとつはプラグインの機能について理解されていないことです。それについては Contact Form 7 の公式サイトに情報が揃っています。

    http://contactform7.com/ja/

    もうひとつはテーマの作成方法を正しく理解されていないことです。デフォルトのテーマに戻して違いを確かめてください。テーマの作り方については日本語 Codex や各種書籍等を参照してください。

    http://wpdocs.sourceforge.jp/

    トピック投稿者 tyabokick

    (@tyabokick)

    すみません。

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

    なんとか別の方法で解決はしましたが、まだまだ学習が必要みたいですね・・・。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「Contact Form 7をカスタマイズして確認画面の作成」には新たに返信することはできません。