wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

車・不動産・カタログなどに使えそう!WordPressコンタクトフォームにidやタイトルを渡して自動挿入させる方法

   

こんにちは、管理人@SS_mshpです。

今回は、管理人が以前、お仕事でサイトを作ったときに使ったカスタマイズを紹介します(WordPressコンタクトフォーム)。『直前に見たページの情報をフォームに渡して、自動で挿入する』という内容です。ユーザーにとってみれば、『入力がすこしラクになる』というメリットがあります。さっそく、『フォーム・テンプレ・functions.php』などのカスタマイズをみていきましょう。

完成イメージ~管理人がカーセンサーで買った時みたいな(用途は車・不動産・カタログにも使えそう)

今回の『WordPressコンタクトフォームにidやタイトルを渡して自動挿入』の、イメージです。管理人がカーセンサーで車を買ったときの操作を例にとってみます。

販売店に問い合わせるときに、『ほしい車の詳細ページ』を見ます。このページには商品個別idみたいなパラメーターがあるようです。ここから見積もり依頼フォームに進んだ時に・・・


フォームのページに商品個別idが渡って、情報を取得(&BKKN=CU〇〇みたいなのが、フォームページに渡る感じ)。『url〇〇の、△△という車種で問い合わせたい』みたいなのを、フォームに入力する手間が省けます。WordPressコンタクトフォームだと、デフォルトで情報が渡らないみたいなので、ユーザーは少し入力項目が増えて大変です。こんな感じで、フォームに直前見たページ情報を渡したい、というのが希望です。

用途については、idでページを指定できるので、『車販売・不動産・カタログサイトで個別の商品・複数の担当者がいるサービスで指名』みたいな用途に使えそうです。細かく指定する場合はフルスクラッチ制作が必要になりますが、ある程度限られた情報であれば、コンタクトフォームカスタマイズで代用ができそうです。

WordPressコンタクトフォームにidやタイトルを渡して自動挿入するコード

コード例

カスタマイズする箇所は『コンタクトフォーム設定』『テンプレートsingle.php(記事ページのid取りたい)』『functions.php』の3か所です。

まずは、追加したい項目をコンタクトフォーム設定で入れる


まずはコンタクトフォームからエディットしていきます。設定画面で項目を追加。『問い合わせたい記事id・問い合わせたい記事タイトル』の二つを入れるようにしたいので、メールタグ[text post-id]と[text post-title] というのを作りました。この名前は、後でfunctions.phpで使います。


また、自動返信でお客さんに確認してもらう場合のため、メールおよび、自動返信用の『メール (2)』にも、上記のメールタグを入れておきます。


コンタクトフォームの表示はこんな感じで。

記事idをurlパラメータにする


『パーマリンクにid入れてリファラから』というのも考えましたが、一番簡単そうなurlパラメータを使います。
『個別の記事ページ』を判定できればいいので、『個別投稿 (single.php)』の中に、上記のコードを追加( get_the_IDで、現在のページidを取得)。これで、メールフォームのページにパラメータを渡し、変数$_GETから、idを取り出せるようにします。


実験で作ったんで目立たないんですけど、本番実装の場合は、CSSで成形して、ボタンがきちんと目立つようにしましょう。

wpcf7_form_tagフックで、項目を追加・idから記事情報を取得


最後にfunctions.php。ここではwpcf7_form_tagフックを使って項目を追加します。$tag['name']が、idやタイトルだった場合に、valuesに値を指定してリターン。

ポイントは『 get_the_title($id);』じゃなくて、『 [get_the_title($id)];』だという点。この[]は、PHPのarray()の代わりに使うやつです(配列)。これがあるとないとでは、挙動が全く違うので、後でチェックします。

表示例~id&記事タイトルを、自動挿入で渡すことができた!自動返信にも使える!


では表示例&実際に操作してみます。ためしにid7850番の記事からメールフォームのページに入った場合、このようにフォームに自動でタイトルやidが入りました。


メールを送ってみた例です。メールタグを自動返信にもつけておいたので、お客さんのほうでも、後から確認ができて便利です。

注意ポイント~配列で渡さないと値が入らない件


そして、今回の注意ポイントです。一見正しそうな(文法的なエラーはない)コード『$tag['values'] =$id;』や『$tag['values'] = get_the_title($id);』だと、値が渡りません。


パラメータをつけていても、こんな感じに空になります。『(array)$id;』、または、『[$id];』のように書いて配列にしてやらないと入らないということが確認できました。

あとがき・まとめ

  • コンタクトフォームは、メールタグ項目追加・パラメータid判定などで、ページ情報を渡せる
  • お客さん的には、問い合わせ時に入れなくてよいのでラク
  • 値を渡すときは、配列で渡さないと入らない

まとめるとこんな感じでした。自動でフォームに入れる機能はあると、ユーザーの手間が省けるので、業種によってはぜひ実装したい機能といえます。

管理人がお仕事で使ったときは、固定ページ・カスタム投稿判定だったので、パラメーターの登録などもやった覚えがありますが、通常の投稿であればサックリ実装しやすいかもです。

◆この記事で問い合わせ

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。
『サイトを既にお持ちで、リニューアル』の場合は、¥10万以下でご対応します(月額管理費/24回支払い縛りなどの強制無し)。

【カテゴリ】 - WordPressプラグイン情報
【タグ】 - , ,

  関連記事

【WPプラグイン】Smart Custom FieldsとCustom Field Bulk Editorは相性悪い?(空リンク・真偽値フィールドに文字)

今回は、管理人がカスタムフィールド系の案件で使っているプラグイン ...

All In One SEO Packの管理画面タイトル・概要カラムって消せる?→manage_edit-post_columnsフックで消せます

今回は、利用者の多いWordPressプラグイン『All In ...

【WPプラグイン無しでサイト構築&表示を速く】Really Simple SSLって無効化して大丈夫?→設定しとけば大丈夫、ただし混在に注意

今回は『プラグイン干渉リスク低減や動作スピードアップ』のために、 ...

【WPプラグイン】WordPress5.0以降のブロックエディタ使いたくない場合→Classic Editorプラグインで旧エディタに戻して記事を書こう

今回は、WordPress5.0から搭載された記事のエディタがし ...

【WPプラグイン】WordPressにサウンドクラウドみたいな波形表示つけたい→WaveSurfer-WPをどうぞ

今回は、以前すこしDJの練習をしていた管理人が、webサイト(w ...

wordpressのリビジョンを、プラグインで制御する方法(revision control)【データベースを軽く】

今回は、wordpressで溜まりすぎるとデータベースを圧迫する ...

【WordPressとGoogleカレンダー連携プラグイン】Simple Calendarの設定・Calendar APIやID取得しての設定

今回は、WordPressサイトに、googleアカウントがある ...