WordPressのContact Form 7に入力された内容を別システムに連携させたい

Contact Form 7に入力された、姓・名・メールアドレスの3項目を、別システムのメルマガ配信システムにデータ連携させたいです。

メルマガシステム側のマニュアルによると、下記のようにパラメータを渡してくれれば受け取りますよ、とのことでした。

https://www.example.com/form/?id=1000&nameFamily=your-sei&nameGiven=your-mei&mail=your-email

メルマガシステム側：nameFamily,nameGiven,mail
Contact Form 7側：your-sei,your-mei,your-email

該当のソースコード

javascript
1<script>
2document.addEventListener( 'wpcf7mailsent', function( event ) {
3    location = 'https://www.example.com/form/?id=1000&nameFamily=your-sei&nameGiven=your-mei&mail=your-email';
4}, false );
5</script>

試したこと

上記コードをContact Form 7のフォーム内に埋め込んで、メルマガシステムのフォームにリダイレクトさせるのですが、渡したパラメータの値をそのまま受け取ってしまいます。

例えば、姓（your-sei）に「山田」と送信しても、「your-sei」と受け取って表示してしまう感じです。

そもそもContact Form 7は自動メールを送るだけで、パラメータを渡すようなことは出来ないのでしょうか？

それとも何か手を加えてうまく渡す方法はありますでしょうか？

Contact Form 7がデータを受け取る方法は調べるとたくさん出てきますが、その逆の渡す方法はなかなか出てこないです。。

詳しい方、どうぞよろしくお願いいたします。m(_ _)m

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript の中で、

location = 'https://www.example.com/form/?id=1000&nameFamily=your-sei&nameGiven=your-mei&mail=your-email';

のように URL に固定文字列で、your-sei your-mei your-email を設定しているので、当然ながらそのままの文字が送信されるので、受け取る方にもそのまま届くと思います。

引数の event に Contact Form 7 のデータが渡ってきていると思うのでそれを利用します。

フォームの入力値は、 event.detail.inputs に含まれているので、一度取り出してから加工するなりして渡す必要があるでしょう。

テストしていませんが、こんな感じで、値を取り出して、URL を組み立てる必要があると思います。

JavaScript
1document.addEventListener( 'wpcf7mailsent', function( event ) {
2
3var inputs = event.detail.inputs;
4for ( var i = 0; i < inputs.length; i++ ) {
5    if ( 'your-sei' == inputs[i].name ) {
6        var sei = inputs[i].value;
7    }
8    if ( 'your-mei' == inputs[i].name ) {
9        var mei = inputs[i].value;
10    }
11    if ( 'your-email' == inputs[i].name ) {
12        var email = inputs[i].value;
13    }
14}
15
16location = 'https://www.example.com/form/?id=1000&nameFamily=' + sei + '&nameGiven=' + mei + '&mail=' + email;
17}, false );
18

詳しい情報は、DOM イベント - Contact Form 7 ドキュメント参照。

投稿2018/10/30 08:52

編集2018/10/31 02:47

CHERRY

総合スコア25171

yytop

2018/10/30 09:41

DOMイベントのページも拝見しまして、そのまま使えるソースをありがとうございます！しかし、locationで指定したURLにリダイレクト出来なくなってしまいました。。うまくいきそうに思ったのですが、不思議です。。

CHERRY

2018/10/30 10:25 編集

Web ブラウザの開発者ツール(デベロッパーツール)の Console を確認してみてください。 JavaScript のエラーがどこかで出ていないでしょうか？

yytop

2018/10/30 12:56 編集

ありがとうございます。すみません、エラー確認したら、Contact Form 7の中に書いてしまっていたので、ところどころ勝手にpタグ付けられていました。。 footerに記載し直していざっ！と送信ボタンを押したら、リダイレクトには成功しました！しかし、データ連携出来たのはyour-seiだけで、your-meiとyour-emailには「undefined」の文字が入っていました。惜しいです、うーむ。。

CHERRY

2018/10/31 01:48

うーん。あ、もしかしたら... 3つの `break;` をなくしたらどうなりますか？

yytop

2018/10/31 02:21

ありがとうございます、3つの `break;`消したら、出来ました！ずっと悩んでいましたので、大感謝です！＾＾

CHERRY

2018/10/31 02:52 編集

サンプルを確認せずにそのまま使ったのではまったようです。 break すると for ループから抜けるので、if の中に break があると、どれか1つの値を取得したら、他の値を取らずに for ループが終了しますので、他の値が入らなかったという状態ですね。回答内容も修正しておきます。

yytop

2018/10/31 11:12

なるほど、勉強になります。ご対応ありがとうございます！