In writing

2012.10.29 追記:もう1個追加しました。

プラグインの導入時に気をつけなければならないのは、環境によってはパーミッションが755になったり、所有者の設定が nobody になったりしてうまく動作しない場合があります。ありました。

  • プラグインとその下層フォルダ(css, csv)は 777 にした方がいい。(プラグインフォルダは755でも良いのかも)
  • css フォルダ内に生成されるフォームごとの CSS は、自分で書き換え権限があったほうが、管理画面以外からでも編集できる。

プラグインのインストールについては割愛します。ダウンロードは下記から。

WordPress > Trust Form ≪ WordPress Plugins
参考:Trust Form-1.2を公開しました | カクニンプラスのweb日誌

元々カスタマイズを前提に作られているもののようなのですが、クラス拡張とか下手くそなので元のソースを弄ったりしています。(でも Advanced Field の使い方がわからない。これも拡張用かな?)
ご利用は計画的に、自己責任でお願いします。

1. checkbox と radio には label をつけて、radio は選択させときたいな!

元の trust-form.php を弄ります。
ユーザビリティ的には必須だと思っているので、まず第一に修正しました。1990行目のあたりかな。
checkbox と radio の出力の際、<label> ~ </label>で囲みました。

それと、radio については何も選択がない場合に一番最初の項目を選択済みに。foreach で 0 番目の項目だった場合にチェックする、という条件を入れました。これは好みというか、TPOに応じていれてください。

そうすると、こんなソースになります。

こうすると、label にスタイルを効かせることができるので、わかりやすい装飾が可能になります。

2. エラーがあった時にメッセージを表示させたい

エラーメッセージを項目ごとにしか取得できない(私が見落としているだけかも)ようなので、function を追加して使えるようにしました。

trust-form.php の1795行目辺りに下記を追加。

これをどういう時に使うかというと、trust-form-tpl-[ID].php の trust_form_show_input() 内で、

というメッセージを表示させることができます。日本語そのまま使うときは、UTF-8で保存してくださいね。

3. サブメッセージを入力欄の下に表示させたい

trust-form-tpl-[ID].php の trust_form_show_input() 内で、$html が制御しているので入れ替えてあげれば良いです。ついでに、必須項目の th にも require クラス入れたかったので、下記のようになりました。

4. URLが同じになってしまうのでパラメータを付ける

アクセス解析の際にはページ名が同じだと解析しにくいので、form の action にパラメータをつけてあげましょう。
trust-form-tpl-[ID].php を編集します。

trust_form_show_input() の form タグの

これを

とします。#trust-form はフォームを入力して次の画面に遷移した際、ページ内リンクが有効になるのであっても取っても可。

もうひとつは、trust_form_show_confirm() の form タグの

これを

とします。#trust-form については上記同様。

これで、
入力画面は 固定ページのURL となり、
確認画面は 固定ページのURL?confirm となり、
完了画面は 固定ページのURL?finish となります。

5. 郵便番号を入力したら住所を自動取得したい

郵便番号からの住所取得もできます。そう、ajaxzip3 ならね。

ajaxzip3 – 郵便番号検索API, JSONP対応 これで郵便番号のメンテナンス作業から解放されます。 – Google Project Hosting

本来は head タグ内に読み込むものなのですが、固定ページのコンテンツ内でも動きました。(とりあえず確認したのはchromeのみ)

1) 固定ページ内で、Trust Form のショートコードの前に下記のように javascript を読み込みます。

フォームがSSLになる場合はこっち↓

2) 郵便番号の項目を設定して、class に zip と入れて、その下に住所の入力項目を設定します。

3) 別途読み込んだ(※) js ファイルに下記を追加。

※別で jQuery を使ってゴニョゴニョしていることもあるので、

としてオリジナルの js ファイルを読み込んでおくと色々追加できるのでオススメです。

これで半角数字で郵便番号を入れると、住所が表示されます。ハイフンのあるなし関係ないので、結構キモチイイ。

6. 共通スタイルシートを読みこませる

Trust Form を使う際には各フォームごとの CSS が生成されるのですが、それを消しちゃって共通のスタイルを読み込ませたい場合の対処方法です。フォームのスタイルを統一しているので、増えると管理が面倒なんですよね…。trust-form.php の940行目あたりを下記のように変更します。

こうすることで特定の CSS があるものは読み込まれ、なければ front.css を読み込みます。

ContactForm 7 より癖がありますが、何より確認画面が表示されるのは素敵!どんどん使って行きたいですね。


9件のコメント

  1. めーもー:[WP] Trust Form がもっと便利になるカスタマイズ内容5つ http://t.co/AOjzVf60 @mekemokeさんから

    Reply

  2. もう1個追加しました。中途半端な数だな…!個人的には、次回のアップデートに含めてくれると嬉しい。:http://t.co/hdPMmMqN [WP] Trust Form がもっと便利になるカスタマイズ内容5つ(+1) | @mekemoke

    Reply

  3. URLの変更について調べていて、拝見させていただきました!
    とても参考になりました。

    と、actionにurlの指定を入れると必須項目に不備があった場合も、
    『確認画面のURL』になってしまうので、そこを改善するにはどうしたらいいか、
    お知恵を拝借できればと思います。

    お手数ですが、よろしくお願いします。

    Reply

    • Hijili Kosugi

      のぐみさん、 url の指定を入れると、というのは、
      <form action=”?confirm#trust-form” method=”post”> ←ここを
      <form action=”hoge.php?confirm#trust-form” method=”post”> ←というふうにする、ということですか?
      URLを入れなければならない状況をもう少し具体的に教えてもらえますでしょうか。
      (onsubmitでなんとかなるような気もしますが)

      Reply

  4. 「 郵便番号を入力したら住所を自動取得したい」を拝見させていただきました。
    とても参考になり助かりました。

    一点ご存知でしたらご教授いただきたいのですが、
    都道府県をセレクトボックスにした場合はどのように記述すればよいでしょうか?

    以下で試してみましたが、セレクトボックスの場合表示されませんでした。
    jQuery(document).ready(function($) {
    $(“.zip”).keyup(function(){
    var addrInput = $(this).parents(‘tr’).next().children(‘td’).children(‘div’).children(‘select’).children(‘options’).attr(‘name’);
    var addrInput2 = $(this).parents(‘tr’).next().next().children(‘td’).children(‘div’).children(‘input’).attr(‘name’);
    AjaxZip3.zip2addr(this, ”, addrInput, addrInput2);
    });
    });

    お手数ですが、宜しくお願い致します。

    Reply

  5. 貴重な情報をありがとうございます。
    「4. URLが同じになってしまうのでパラメータを付ける」を拝見させていただきました。

    大変恐れ入りますが、1点、ヘルプをいただけますと幸いです。

    Trust Form バージョン 1.8.1で実装してテストしていましたら、
    確認画面(~/?confirm#trust-form)で、[戻る]をクリックすると、
    入力画面に戻るにも関わらず、URLが完了画面のもの(~/?finish#trust-form)に
    なってしまいます。

    回避方法はございますでしょうか?

    (最終的に実現したいことは、GoogleAnalyticsでのコンバージョン測定です)

    よろしくお願い申し上げます。

    Reply

    • Hijili Kosugi

      たきさん、
      返信が遅くなってしまって申し訳ありません。状況を確認しました。
      確かにコンバージョンを取れないのは問題ですね、これ。

      プラグインのコアファイルを編集する必要があるようです。
      また、すでに作成してあるフォームに関しては、データベースの編集が必要です。
      admin/make-form.php の、367行目付近に、

      <input type=”submit” name=”return-to-input” value=”〜・・・

      とありますので、これを、

      <input type=”button” name=”return-to-input” onclick=”history.go(-1);” value=”〜・・・

      としてください。
      これで新規フォームには対応できます。

      既存フォームの編集は、データベースを編集する場合には、wp_postmeta から meta_key = form_front の項目を探して、該当箇所を直接編集してください。

      データベースを編集するのがメンドクサイ場合は、Chromeの開発者用ツールでタグを弄くることで解決できます。

      これはコンバージョンに関係してくるので、そのうち記事にしますね。
      貴重なご意見、ありがとうございました!

      Reply

      • 横からすみません。だいぶ前なので解決済み?かとは思いますが・・・
        GoogleAnalyticsでのコンバージョン測定したい時は、trust-form-tpl-[ID].php の
        ヒアドキュメント内に仮想ページアドレス設定したGoogleトラッキングコードを直接書いてます。
        ソースの中程にトラッキングタグが設置される形になりますが、特に問題なく計測できています。

        trust_form_show_input() のヒアドキュメント内
        => ga(‘send’, ‘pageview’, {‘page’:’/form/input.php’,’title’:’入力ページ’});
        trust_form_show_confirm() のヒアドキュメント内
        => ga(‘send’, ‘pageview’, {‘page’:’/form/confirm.php’,’title’:’確認ページ’});
        trust_form_show_input() のヒアドキュメント内
        => ga(‘send’, ‘pageview’, {‘page’:’/form/finish.php’,’title’:’完了ページ’});
        (※上では仮想ページ設定部分だけ書いてますが、実際はトラッキングタグを全部書きます)

        トラッキングタグをサイト内で一括出力している場合は、header footer プラグインなどで、このフォームページだけ出力されないようにします。

        Reply

  6. Pingback: WP プラグインメモ | イタグレ服屋+α

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA