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

      2021/06/22   2556文字

今回は、管理人が以前、お仕事でサイトを作ったときに使ったカスタマイズを紹介します(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判定などで、ページ情報を渡せる
  • お客さん的には、問い合わせ時に入れなくてよいのでラク
  • 値を渡すときは、配列で渡さないと入らない

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

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

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


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

  関連記事

WordPressにサウンドクラウド風の波形表示WaveSurfer-WP・エラー/速度/出力のカスタマイズなど
functions.phpエディットできない(orテーマファイル変更しない)場合の機能追加は?→Code Snippetsプラグインで
【WordPressショッピングサイト作成】Welcart概要・テーマ・プラグイン・設定例などを詳しく解説
【WP/contact form 7】$_POST変数の中身で判定して、『メール送信ありがとうページ』に遷移させる方法
【PHPでwpプラグインを改造】all in one seoで、og:descriptionを書かなかったときに、文章が全部出力されてしまうのを直したい
【WordPress高速化プラグイン】Speed Up-JavaScript To Footerで、表示速度を速くする方法
【WPプラグイン】Smart Custom FieldsとCustom Field Bulk Editorは相性悪い?(空リンク・真偽値フィールドに文字)
【WordPressとGoogleカレンダー連携プラグイン】Simple Calendarの設定・Calendar APIやID取得しての設定
ワードプレスサイトを、プラグインでサクッとSSL化する方法
WordPressで絵や動画・オーディオのダウンロード販売しよう~Easy Digital Downloads使い方
【WordPress】WP-Membersプラグインによる、会員向けコンテンツサイトの構築(カスタマイズ必須?)
管理画面からFTP操作『WP File Manager』~過去の脆弱性ver・機能・使用例(テーマ消えないなど)の紹介