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やデザイン系のセミナーで登壇しています。

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

 

運営サイト

広告デザインを読む - Advertising Design Center
Webクリエイターズニュース
COCOmag（普通の感覚で楽しめる、子どもとオシャレにまつわる、楽しく可愛い情報）
 

Facebookグループ

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

 

著書

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

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

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

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