📚
Studioのフォーム＋SendGridで資料ダウンロードフォームを作成する

アキタロウ
2025/06/19に公開
GAS
SendGrid
tech
 Studioのフォーム＋SendGridで資料ダウンロードフォームを作成する方法こんにちは！この記事では、StudioのフォームとSendGridを活用して、ユーザーが資料をダウンロードできるフォームを作成する方法をステップバイステップで解説します。

 目次はじめに
必要なツールと準備
Studioでフォームを作成する
Googleスプレッドシートにフォームのデータを保存
SendGridでメールテンプレートを作成
Google Apps Scriptで自動メール送信を設定
まとめ

 はじめにユーザーがフォームに入力すると、自動的にメールで資料を送付する仕組みは、多くのビジネスで活用されています。これにより、ユーザー体験を向上させ、手作業を減らすことができます。本記事では、ノーコードツールのStudioとメール配信サービスのSendGridを組み合わせて、この仕組みを構築する方法を紹介します。

 必要なツールと準備
Studioアカウント：ウェブサイトやフォームをノーコードで作成できます。

SendGridアカウント：メールの送信とテンプレートの作成が可能です。

Googleアカウント：スプレッドシートとGoogle Apps Script（GAS）を使用します。

 Studioでフォームを作成するまず、ユーザーが入力するフォームを作成します。

Studioにログインします。

新しいプロジェクトを作成し、適切なテンプレートを選択します。
フォームをページに追加し、必要なフィールド（例：名前、メールアドレス、メッセージなど）を設定します。
フォームの送信先を設定し、データが適切に保存されるようにします。

 Googleスプレッドシートにフォームのデータを保存フォームの入力データをGoogleスプレッドシートに保存します。
Googleスプレッドシートを新規作成し、適切な列（例：Name、Email、Messageなど）を設定します。
Studioのフォーム送信設定で、データがスプレッドシートに保存されるように連携します。

API連携やZapierなどのツールを使用して、フォームデータをスプレッドシートに送信します。

 SendGridでメールテンプレートを作成ユーザーに送信するメールのテンプレートをSendGridで作成します。
SendGridにログインし、ダッシュボードに移動します。
左側のメニューから「Templates」＞「Transactional」を選択します。
「Create a Template」をクリックし、テンプレート名を入力します。
作成したテンプレート内で「Add Version」をクリックし、メールの内容をデザインします。

動的テンプレートを使用して、ユーザー名などのパーソナライズされた情報を挿入できます。
例：Hello, {{customer_name}}! のように変数を設定します。
テンプレートを保存し、Template IDをメモしておきます。

 Google Apps Scriptで自動メール送信を設定スプレッドシートにデータが追加されたときに、SendGridを通じて自動的にメールを送信するスクリプトを作成します。

 1. スクリプトエディタを開くスプレッドシート上部のメニューから「拡張機能」＞「Apps Script」を選択します。

 2. スクリプトを貼り付ける以下のコードをスクリプトエディタに貼り付けます。
function sendEmailUsingTemplate(recipientEmail, recipientName, templateId, dynamicData) {
  var scriptProperties = PropertiesService.getScriptProperties();
  var SENDGRID_API_KEY = scriptProperties.getProperty('SENDGRID_API_KEY');

  var url = 'https://api.sendgrid.com/v3/mail/send';

  var emailData = {
    personalizations: [{
      to: [{ email: recipientEmail, name: recipientName }],
      dynamic_template_data: dynamicData
    }],
    from: { email: 'no-reply@yourdomain.com', name: '[会社名]' },
    template_id: templateId
  };

  var options = {
    method: 'post',
    contentType: 'application/json',
    headers: {
      Authorization: 'Bearer ' + SENDGRID_API_KEY
    },
    payload: JSON.stringify(emailData),
    muteHttpExceptions: true
  };

  try {
    var response = UrlFetchApp.fetch(url, options);
    var responseCode = response.getResponseCode();
    var responseBody = response.getContentText();

    if (responseCode >= 200 && responseCode < 300) {
      Logger.log('メール送信成功: ' + recipientEmail);
    } else {
      Logger.log('メール送信失敗: ' + recipientEmail);
      Logger.log('レスポンスコード: ' + responseCode);
      Logger.log('レスポンスボディ: ' + responseBody);
    }
  } catch (e) {
    Logger.log('メール送信エラー: ' + recipientEmail);
    Logger.log('エラー: ' + e.toString());
  }
}

function onChange(e) {
  var sheet = e.source.getActiveSheet();
  var targetSheetName = 'シート1'; // 実際のシート名に置き換えてください
  if (sheet.getName() !== targetSheetName) {
    return;
  }

  var lastRow = sheet.getLastRow();
  if (lastRow < 2) {
    return;
  }

  var dataRange = sheet.getRange(lastRow, 1, 1, sheet.getLastColumn());
  var data = dataRange.getValues()[0];

  var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];

  // ヘッダー名の前後のスペースを削除
  headers = headers.map(function(header) {
    return header.toString().trim();
  });

  var nameIndex = headers.indexOf('Name');
  var emailIndex = headers.indexOf('Email');

  if (nameIndex === -1 || emailIndex === -1) {
    Logger.log('必要な列が見つかりません');
    Logger.log('ヘッダー行: ' + JSON.stringify(headers));
    return;
  }

  var recipientName = data[nameIndex];
  var recipientEmail = data[emailIndex];

  Logger.log('受信者名: ' + recipientName);
  Logger.log('受信者メールアドレス: ' + recipientEmail);

  if (!recipientEmail) {
    Logger.log('受信者メールアドレスがありません');
    return;
  }

  var templateId = 'YOUR_TEMPLATE_ID'; // SendGridのテンプレートIDに置き換えてください

  var dynamicData = {
    customer_name: recipientName,
    // 他の動的データがあれば追加
  };

  sendEmailUsingTemplate(recipientEmail, recipientName, templateId, dynamicData);
}

 3. APIキーの設定スクリプトエディタのメニューから「ファイル」＞「プロジェクトのプロパティ」を開きます。
「スクリプトのプロパティ」タブで、「新しいプロパティ」をクリックします。
プロパティ名：SENDGRID_API_KEY
値：あなたのSendGrid APIキー

「保存」をクリックします。

 4. シート名とテンプレートIDの設定コード内のtargetSheetNameを実際のシート名に置き換えます。

templateIdに先ほどメモしたSendGridのテンプレートIDを入力します。

 5. トリガーの設定スクリプトエディタの左側にある「時計アイコン（トリガー）」をクリックします。
「トリガーを追加」をクリックし、以下の設定を行います。
実行する関数：onChange
実行デプロイ：Head
イベントのソース：スプレッドシートから
イベントの種類：変更時

「保存」をクリックし、必要な権限を付与します。

 6. スプレッドシートのヘッダーを確認スプレッドシートの1行目に以下のようなヘッダーがあることを確認します。

Name、Email、Messageなど

ヘッダー名に余分なスペースや誤字がないように注意してください。

 7. テストStudioのフォームから新しいデータを送信します。
スプレッドシートにデータが追加され、自動的にメールが送信されることを確認します。

 まとめこれで、StudioのフォームとSendGridを使用して、資料ダウンロードフォームが完成しました。ユーザーがフォームに入力すると、自動的にメールが送信され、資料をダウンロードできるようになります。
この仕組みにより、手作業を減らし、ユーザー体験を向上させることができます。ぜひ活用してみてください！
参考リンク：
Studio公式サイト
SendGrid公式サイト
Google Apps Script公式リファレンス
注意点：
SendGridの無料プランには送信制限があるため、必要に応じてプランを確認してください。
ユーザーの個人情報を取り扱う場合は、プライバシーポリシーを明確にし、適切に管理してください。
ご質問や不明点がありましたら、お気軽にコメントしてください。一緒に素敵なフォームを作りましょう！
Univearth Inc.Publication
Studioのフォーム＋SendGridで資料ダウンロードフォームを作成する方法

目次

はじめに

必要なツールと準備

Studioでフォームを作成する

Googleスプレッドシートにフォームのデータを保存

SendGridでメールテンプレートを作成

Google Apps Scriptで自動メール送信を設定

1. スクリプトエディタを開く

2. スクリプトを貼り付ける

3. APIキーの設定

4. シート名とテンプレートIDの設定

5. トリガーの設定

6. スプレッドシートのヘッダーを確認

7. テスト

まとめ

Discussion
