ContactForm7で現在ページのURLを送る方法。 #カスタマイズ

2023.05.27

Logging

おはようございます。ContactForm7で現在ページのURLを送る方法です、全ての記事の下にお問い合わせフォームを設置している人はあまりいないかもしれないけれど。そのあまりいない人の一人です😂。

記事の下にショートコードを設置するにはプラグインを自作するか、テンプレート内に埋め込むかどちらかだと思います。自分は前者のプラグインを自作してショートコードを埋め込んでいます。

ショートコードを埋め込むコードはこんなコードです。

<?php
do_shortcode('[contact-form-7 id="XXXX" title="comment"]')

これで全記事にショートコードを埋め込むことが可能ですがこれだけでは動きません。こんな感じのプラグインを作ってみてください。プラグインの設置方法などはググって下さい。

<?php
/*
  Plugin Name: comment-add
  Plugin URI:
  Description: 記事の下にアドセンス広告などを貼り付けるのに使用
  Version: 1.0.0
  Author: @zip358com
  Author URI: https://www.zip358.com
 */


function comment_add($content)
{
    if (is_single() && 'post' == get_post_type()) {
        $content = $content.do_shortcode('[contact-form-7 id="xxxx" title="comment"]');
        return $content;
    } else {
        return $content;
    }
}
add_filter('the_content', 'comment_add');
remove_filter('the_content', 'wpautop');

これだけでは、どのページから問い合わせしたのか分からないので、名前などの入力欄以外に入力欄を設置します。次に設置したそのNoを控えて下さい。

<script>
//Contact Form 7 現在ページのURL
if(document.querySelectorAll("[name='text-564']")){
    [...document.querySelectorAll("[name='text-564']")].forEach(elm=>{
        elm.setAttribute("type","hidden");
        elm.value = decodeURIComponent(location.href);
    });
}
</script>

上記のコードを</body>タグ直前に設置してください。設置後、text-564を控えたNoに変更シテクダサイこれで設置が完了です☹。

⚠ContactForm7のメール送信欄にも控えたNoを設置してください。これで完了です!!
最後に送信のご確認を忘れずに😐。

タグ

add_filter, body, comment-add, decodeURIComponent, description, document.querySelectorAll, elm, else, foreach, hidden&quot, lt, php, php do_shortcode, quot, remove_filter, return, setAttribute, title, Version, wpautop,

ANA旅割逆算日導きサービスモバイル版:最終

2016.05.04

Logging

<!DOCTYPE html>
<html>
    <head>
        <title>ANA旅割逆算日導きサービス(mobile)</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <script src="jquery-mobile/jquery.js"></script>
    <script src="jquery-mobile/jquery.mobile-1.4.5.min.js"></script>
    <style>
        .ui-page{
           background:#73cbe6;
        }
    </style>
    <script>
        $(function(){
            $("#ckday").click(function(){
                //alert($("#day").val().replace(/\-/g,'\/'));
            $.ajax({
                type: 'POST',
                url: "../ana_calendar/json.php",
                data:{day:$("#day").val().replace(/\-/g,'\/')},
                dataType: 'json',
                success: function(obj){
                    var str =   '<ul id="ana_listview" data-role="listview">\n';
                    str = str + '<li>予定日:' + obj.anaday + '</li>\n';
                    str = str + '<li>75日[旅割]の予約期日:' + obj.day75 + '</li>\n';
                    str = str + '<li>55日[旅割]の予約期日:' + obj.day55 + '</li>\n';
                    str = str + '<li>45日[旅割]の予約期日:' + obj.day45 + '</li>\n';
                    str = str + '<li>28日[旅割]の予約期日:' + obj.day28 + '</li>\n';
                    str = str + '<li>21日[旅割]の予約期日:' + obj.day21 + '</li>\n';
                    str = str + '</ul>\n';
                    $("#ana_api").html(str);
                    $("#ana_listview").listview().listview('refresh'); ;
                    }
                });
            });
        });
    </script>
    </head>
    <body>
        <div data-role="page" data-title="ANA旅割逆算日導きサービス(mobile)">
          <!--ヘッダー領域-->
          <div data-role="header">
            <h1>ANA旅割逆算日導きサービス(mobile)</h1>
          </div>
          <div role="main" class="ui-content">
              <input type="date" id="day">
              <button id="ckday" class="ui-btn">逆算する。</button>
              <span id="ana_api"></span>
          </div>
          <div data-role="footer">
            <h3>Copyright zip358.com</h3>
          </div>
        </div>
    </body>
</html>

ANA旅割逆算日導きサービスモバイル版:最終として webから逆算日を導きだすサービスを公開します。
ほんと・・・簡単なものですので 最初からwebで作れたんじゃねぇっていう疑惑が あると思うです。
webゴニョゴニョ…(ノ゚д゚(; ̄Д ̄)っていう誘惑は モバイル版のアプリを作る時からありましたが アプリ作るよって言ったので、有言実行ということで 作ってみました。
作った結果ですけど・・・ ウェブで作れるものはウェブで作ったほうが手間暇かからないという事がわかりました。 http://zip358.com/tool/ana_calendar/?[PC]
zip358.com/tool/ANAmobile/?[モバイル] ?

タグ

1.0, 1.4.5, 8, ANA, charset, content, css, device-width, DOCTYPE, gt, head, href, html, http, initial-scale, jquery, jquery-mobile, link, lt, meta, min, mobile, name, quot, rel, stylesheet, title, UTF-, viewport, Width, サービス, モバイル, 旅割, 最終, 逆算,