Contact Form 7の送信先を記事ごとに「カスタムフィールドで入力したメールアドレスに設定する」方法。

多数のお店を紹介するようなポータルサイトのようなサイトを構築する時に
Contact Form 7の送信先をカスタムフィールドで設定したメールアドレスで記事ごとに設定できないかと調べてみました。
（お店の問合せ先など）

Contact Form 7に加えてContact Form 7 Dynamic Text Extensionというプラグインを利用します。

下記のリンクを参照しました。
How to Dynamically Set the Recipient (To) Email Address in Contact Form 7 – SevenSpark

Custom Field Template pluginでの設定例
「user_email」という項目を作成して入力するようにします。

あとは下記の解説を元に設定していくだけです。

The Basics

First, let’s start off with the basic mechanism: Create a tag that will contain the email address, and set that tag’s name as the email recipient. The simplest dynamic email address can be set with a basic text input. The contact form 7 tag would look like this:

[text* recipient-email]

1	[text* recipient-email]

Then, all we do is place the name tag in the Mail <em>To:</em> field, as such:

1	Then, all we do is place the name tag in the Mail <em>To:</em> field, as such:

[recipient-email]

1	[recipient-email]

We end up with this:

1	We end up with this:

Okay, that was easy. But this isn’t a very good idea. We don’t want just anyone to be able to change who the form is being sent to and then send out emails from our site.

Setting the Email Address Dynamically

Using CF7 DTX, we can dynamically set the email address for the form. The email address might be stored in a POST variable, for example, and we can retrieve it using the

CF7_POST

1

CF7_POST

shortcode. Here we’ll walk through an example of setting the email address via a custom field (post meta data). This means the email address for the form will be determined by the post, so we can have a single CF7 contact form that is displayed on every post, each potentially aimed at a different recipient.

1. Install Contact Form 7 and Contact Form 7 – Dynamic Text Extension
2. Navigate to Contact > Edit
3. Create or Edit a contact form
4. Click Generate Tag and select Dynamic Text Field
5. Set the Name to
   
   recipient-email

   1	recipient-email

6. Set the Dynamic Value to
   
   CF7_get_custom_field key='user_email'

   1	CF7_get_custom_field key='user_email'

7. Click Make this field Uneditable – we don’t want users to change the email address!
   At this point your Tag Generator should look like this:
   
8. Copy the tag into the form. It’ll look like this:
   
   [dynamictext recipient-email uneditable "CF7_get_custom_field key='user_email'"]

   1	[dynamictext recipient-email uneditable "CF7_get_custom_field key='user_email'"]

9. Copy the name tag
   
   [recipient-email]

   1	[recipient-email]

   
   
   into the <em>To:</em> input.

   1	into the <em>To:</em> input.

10. ave the form
11. The form is now set up to do what we want. The rest involves writing your posts.
12. Create a post.
    
    ［contact-form 1 "CF Name"］

    1	［contact-form 1 "CF Name"］

13. Insert the CF7 Contact Form shortcode in the post.
14. Set the custom field user_email to any email address.
15. Your contact form will be sent to that email.
16. Repeat the same process with the same form shortcode on a separate post with a new email address and the email will go to that address

Hiding the Email Address

That’s great, but we don’t really need to display the email to the user. In fact, we’d really rather not. Instead of a text field, we really just want a hidden input field. Luckily, that’s easy to do – just substitute a Dynamic Hidden Field for the Dynamic Text Field instead! The code simply changes like this:

[dynamichidden recipient-email "CF7_get_custom_field key='user_email'"]

1	[dynamichidden recipient-email "CF7_get_custom_field key='user_email'"]

Great! But one last thing: spam bots are going to grab this email address and spam the hell out of you. Damn. Let’s at least obfuscate the email a little to make it harder for them. It’s built in to the

CF7_get_custom_field

1	CF7_get_custom_field

shortcode, so luckily it’s really easy. Just do this:

[dynamichidden recipient-email "CF7_get_custom_field key='user_email' obfuscate='on'"]

1	[dynamichidden recipient-email "CF7_get_custom_field key='user_email' obfuscate='on'"]

Awesome!! Now we’re good to go!

実際はこんな感じに設定しました。

送信先のアドレスを別にもうひとつ設定しています。
（送信先は.（コンマ）で区切ると複数設定できます。）

設定についての解説はこちら

How to Dynamically Set the Recipient (To) Email Address in Contact Form 7 – SevenSpark

後藤 賢司

よつばデザイン代表。東京と大分を拠点として全国的に活動しています。

出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験から、媒体にとらわれない提案・企画・設計が得意としています。

８年以上のメディア運営によるノウハウを含め、サイトの持続性や継続性を含めた様々な視点からのウェブサイトの企画提案をしています。

中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業（ミラサポ）」の派遣専門家、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」等のサポートメンバーとして中小企業様の経営課題や広告・看板・宣伝ツール・Webサイトのプロモーション等の相談を受けております。

その他、WordPressの勉強会を主催したり、Webやデザイン系のセミナーで登壇しています。

すみだクリエイターズクラブ、CPIエバンジェリスト。和菓子（あんこ）好き。

 

運営サイト

Webクリエイターズニュース
COCOmag（普通の感覚で楽しめる、子どもとオシャレにまつわる、楽しく可愛い情報）
よろずサウンド（著作権フリーのオリジナルBGM販売サイト）
Jimomag（地域活性化情報サイト。）
はぐくみ（子育て情報）  

Facebookグループ

webクリエイターのための情報交換所 ゼロから始めるWordPress勉強会

 

著書

これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装 Amazon書籍の開発技法カテゴリー＆Web構築・管理カテゴリーで1位

WordPressプロフェッショナル養成読本 2014年10月のすごいコンピュータ書で1位

現場でかならず使われているWordPressデザインのメソッド[アップデート版] AmazonのWebデザイン、デザイン、デザイン・グラフィックスで1位

プロが選ぶ WordPress優良プラグイン事典 AmazonのWeb開発で1位