Contact Form 7 記事タイトルURLを取得しフォームに自動で入れる

Contact Form 7:投稿IDから記事タイトルやURLを取得しフォームに自動で入れる
Contact Form 7のページへリンクさせる際に投稿IDをセットさせておき、フォームの内容に記事タイトルやURLを自動で入れておく方法です。こうすればどのページから問い合わせがあったのか一目で把握できるようにな...
Contact Form 7プラグインをインストールし使える状態であることを前提に説明します。
私は別サイトでショッピングサイト構築のためのWordPressプラグインWelcartを利用しショップ運営をしてますが、古本に関してはamazonのみで販売してます。K&S PLAGEは個人のブログとして利用してますがどうせなら気軽に古本も販売してしてみようと思いました。調べてみるとContact Form 7にはcontact form 7 paypal add-onというホームページに簡単にpaypalのクレジットカード決済付きショッピング機能を追加できるプラグインがあります。通常Contact Form 7をお問い合わせに利用されてる方には本当に便利ですね。contact form 7 paypal add-onの利用方法や設定に関する説明は後日改めて記載したいと思います。
今回はタイトルにあるようにContact Form 7で記事タイトルURLを自動で入れるをご説明します。
商品ページごとに商品コンタクトを設置を例にしたいと思います。
(この設定は全てのContact Form 7お問い合わせに応用できます)
商品ページごとに商品コンタクトを設置を例にしたいと思います。
(この設定は全てのContact Form 7お問い合わせに応用できます)
実際の完成ページとなります。画像を押すと拡大表示できます。
functions.php
functions.phpにコードを追加
function wpcf7_get_post_data( $tag ){ if( !is_array( $tag ) ) return $tag; //クエリに[post_id]がセットされているか $post_id = ( isset( $_GET['post_id']) && $_GET['post_id'] ) ? $_GET['post_id'] : false; //[post_id]がある場合 if( $post_id ) { if( $tag['name'] == 'title' ) { $title = get_the_title( $post_id ); $tag['values'] = array( $title ); } else if( $tag['name'] == 'url' ) { $url = get_permalink( $post_id ); $tag['values'] = array( $url ); } } return $tag; } add_filter( 'wpcf7_form_tag', 'wpcf7_get_post_data' , 11 );
single.php
全ての記事に適応する場合
テーマによって違いがあります。私が利用してるaffinger5の通常の投稿ページはsingle-type1.phpとなってます。
参考サイトの説明 取得したい記事ページに下記コードを足します。
<a href="<?php echo esc_url( home_url( '/contact/?post_id=' .$post->ID ) ); ?>">問い合わせ</a>
特定の記事に適応の場合はsingle.phpの作業は不要
Contact Form 7新規追加で商品コンタクトフォームを作成する。
タイトルを入力
例 商品コンタクト
フォーム画面
[response] <label> 商品タイトル [text title] </label> <label> 商品URL [text url] </label> <label> お名前 (必須) [text* your-name] </label> <label> メールアドレス (必須) [email* your-email] </label> <label> 題名 [text your-subject] </label> <label> メッセージ本文 [textarea your-message] </label> [submit "送信"]
コピーして貼り付け
Windows➡Ctrl+C(コピー)Ctrl+V(貼り付け)
Mac➡Command + C (コピー)Command + V(貼り付け)
Windows➡Ctrl+C(コピー)Ctrl+V(貼り付け)
Mac➡Command + C (コピー)Command + V(貼り付け)
一番上の[response]は「送信」ボタンを押した後や、必須項目が未記入の場合に、応答メッセージが表示されます。デフォルトではフォームの最下部に表示されるので、一番上に変更してます。
送信完了後の画面
メール画面
メッセージ本文Contact Form 7デフォルトのものに下記を追加し保存
商品名: [title] 商品URL: [url]
実際に届くメール画面
どうですか?お問い合わせを受ける側もどのページ・どのURLから届いたか一目瞭然ですね。
固定ページを作成する
例
固定ページタイトル 商品コンタクト
パーマリンク: https://ks-plage.com/contact-item/
本文に上で作成した(Contact Form 7商品コンタクトフォーム)のショートコード[contact-form-7 id=”354″ title=”商品コンタクト”]を貼り付ける。
固定ページタイトル 商品コンタクト
パーマリンク: https://ks-plage.com/contact-item/
本文に上で作成した(Contact Form 7商品コンタクトフォーム)のショートコード[contact-form-7 id=”354″ title=”商品コンタクト”]を貼り付ける。
記事の特定の場所に貼り付ける。
エディターに書く場合はポストID(記事ID)も指定で
私は個別記事(販売商品のみに記載の為)記事に直接書き込みます。
こちらは例ですので必ずご自身で作成された内容に変更して下さい。
例
Contact Form 7で商品コンタクトフォームを作成➡固定ページで商品コンタクト(パーマリンクcontact-item)ページを作成➡各ページ(ポストID(記事ID)336)に貼り付ける。
Contact Form 7で商品コンタクトフォームを作成➡固定ページで商品コンタクト(パーマリンクcontact-item)ページを作成➡各ページ(ポストID(記事ID)336)に貼り付ける。
<a href="https://ks-plage.com/contact-item/?post_id=336">この商品についての問い合わせはコチラ</a>
この商品についての問い合わせはコチラをクリックするとトップ画像の完成ページとなります。
コメント