【GAS】送信ボタンを押した際にフォームフィールドの値を送信する（Contact Form7）|e.parameter[‘your-text’];がundefinedになる

doPostのe.parameter[‘your-text’];がundefinedになる

e.parameter は、URL クエリパラメータを含むオブジェクトですが、Content-Type が application/x-www-form-urlencoded の場合、POST リクエストのボディの文字列をパースして e.postData.parameters から取得する必要があります。

以下のようなコードを使用して、フォームフィールドの値を取得することができます。

function doPost(e) {
  var params = e.postData.parameters;
  var text1 = e.parameter['your-text1'];
  var text2 = e.parameter['your-text2'];
  // ここで取得したデータを使って何らかの処理を行う
}

ここで、doPostのe.parameter[‘your-text1’];がundefinedになる場合、以下のような理由が考えられます。

送信ボタンを押した際に、フォームフィールドの値を送信する（encodeURIComponent）

送信ボタンを押した際に、フォームフィールドの値を送信するためには、以下のように send() メソッドの引数に、encodeURIComponent() メソッドでエンコードされたパラメータ文字列を渡す必要があります。

const xhr = new XMLHttpRequest();
xhr.open('POST', 'XXXXXXXX.com/XXXXXXXXX');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
const params = 'your-text1=' + encodeURIComponent(yourText1Value) + '&your-text2=' + encodeURIComponent(yourText2Value);
xhr.send(params);

ここで、yourText1Value と yourText2Value には、それぞれ your-text1 と your-text2 フィールドの値が代入されているものとします。

[rml_read_more]

your-text1 と your-text2 フィールドの値を代入する

下記のようにすることで、idが “your-text1” と “your-text2” のinput要素の値を取得できます。

const yourText1Value = document.getElementById('your-text1').value;
const yourText2Value = document.getElementById('your-text2').value;

もし、フォームフィールドのnameで取得したい場合は、以下のようにすることで取得できます。

const yourText1Value = document.getElementsByName('your-text1')[0].value;
const yourText1Value = document.getElementsByName('your-text2')[0].value;

name=で値を取得する場合は上記の方法が使えます。

まとめ

WordPressのContact Form 7プラグインを使用して、2つのテキストフィールドがあるフォームを作成しました。それから、Contact Form 7にGoogle Apps ScriptのURLを追加しました。

Google Apps Scriptは、POSTリクエストを受信すると、スクリプト内でフォームのデータを収集し、Googleスプレッドシートに保存します。

そして、送信ボタンを押した際に、フォームフィールドの値を送信するためには、以下のように send() メソッドの引数に、encodeURIComponent() メソッドでエンコードされたパラメータ文字列を渡す必要があります。

これらのポイントに留意してContact Form7のフォームフィールドの値をdoPostに送信することができます。