こちらの記事では、STUDIOのフォーム機能でできること、Zapierを活用した自動返信メール、スプレッドシートとの連携、Google Formなどの他ツールでフォームを代替する方法など、STUDIOのフォーム機能に関する内容をまとめました。

※ 参考資料：STUDIOを活用するメリット・デメリット

STUDIOのフォーム機能でできること

設定できるフォームのパーツ

STUDIOのフォーム機能では、デザインエディタ上で、下記のパーツを自由に組み合わせることでフォームを作成できます。基本的なフォームの要件は全て実装できるため、特別な事情がなければ、STUDIO内のフォームは基本機能を使って実装するのがおすすめです。記事の後半で紹介していますが、Google Form等の外部のフォーム作成サービスをSTUDIO内に埋め込むことも可能です。

• 短めのテキストボックス（input）

• 長めのテキストボックス（Textarea）

• セレクトボックス（Select）

• ラジオボタン（Radio）

• 単体チェックボックス（Confirm）

• 複数チェックボックス（Checkbox）

• ファイルアップロード（File）

• ボタン（Button）

各項目の設定

上記のパーツを組み合わせてフォームを作成したら、次にフォームの各項目の編集を行います。STUDIOでは、各項目について、それぞれ下記の設定が可能です。

• 項目名(フォーム管理画面で表示される項目名)

• タイプ（テキスト、メールアドレス、電話番号）

• 必須項目

• プレースホルダー(未入力時点で表示するテキスト)

• リスト（ラジオボタンやセレクトボックスなどの選択肢）

必須項目を設定することで、ユーザーが入力を忘れてしまった際も、下画像のように、STUDIOのデフォルトのポップアップが表示され、記入漏れを防ぐことができます。

また、タイプをメールアドレスや電話番号に設定しておけば、入力形式に誤りがあった際に、下画像のようにSTUDIOのデフォルトのポップアップが表示されるため、入力ミスを防ぐことができます。

フォームの送信後のサンクスページ

フォーム送信完了時に、サンクスページに遷移させることができます。通常のページ同様にサンクスページを制作した後、フォームタグの設定画面の「送信後のページ」から遷移先を設定できます。

フォーム入力内容の確認

フォームが送信されたら、STUDIOのダッシュボードから、フォームに設定したフォーム名ごとに入力内容を確認できます。あえて複数のフォームに同じ名前を設定することで、フォームの内容ごとに、送信された内容をまとめて見ることもできます。

また、フォームごとに入力内容の検索機能や、「未対応」「対応中」「完了」いったステータス管理機能、リストの表示項目の編集機能などがあり、多くのお問い合わせにも漏れなく対応できます。

フォーム送信をメールで通知

フォームが送信されたタイミングで、メールにて通知を受信できます。ダッシュボードのフォームの設定画面から、通知先のメールアドレスと、通知メールのタイトルを自由に設定できます。入力されたフォームごとに、通知先を分けて設定できるため、チームでの運用にも適しています。

フォーム入力内容をスプレッドシートで管理

フォームに入力された内容をスプレッドシートに自動で反映できます。フォーム設定の外部連携から、スプレッドシートのアイコンをクリックすることで、簡単に設定が完了します。また、後述する自動返信メールなどでも使用するZapierを用いることで、スプレッドシートからNotionなど、運用方法に合わせて様々なツールで入力内容を管理できます。

料金プランごとのフォーム送信上限

STUDIOはお使いの料金プランによってフォームの送信数に上限があります。プランごとの上限数は下記の通りです。送信数が上限を超えると、ダッシュボードで送信内容を確認できなくなるため、プランのアップグレードを検討しましょう。

（引用元：https://studio.design/ja/pricing)

参考記事：STUDIOの料金プランの選び方を徹底解説！連携可能な外部サービスの料金まで

STUDIOでフォーム送信後の自動返信メールを設定する方法

STUDIOの基本機能では、フォーム送信後に自動返信メールを送信できませんが、外部ツールのZapierを使うことで、自動返信機能を実現できます。フォーム送信後にスプレッドシートに送信内容が反映され、スプレッドシートの更新をトリガーに、Zapierがメールを送信する流れになります。具体的な設定方法は下記の通りです。

1.STUDIOとスプレッドシートを連携・テスト送信

フォームのダッシュボードの右上にある「設定」を押し、外部連携の欄にあるスプレッドシート連携を行います。この後の設定で、テスト回答があると便利なので、連携後にライブプレビューからテストでフォームを送信しておきましょう。

2.ZapierでZapを作成

アカウントがない場合は、まずアカウントを作成しましょう。その後、画面左上部のオレンジのボタン「Create Zap」からzapを作成します。

3.トリガー設定(Appの選択・イベントの選択)

トリガーとは、「引き金」という意味です。「〇が起きたら△を実行するよ！」というシステムの引き金となる部分、つまり◯の部分をトリガーと呼びます。今回は、「◯＝スプレッドシートの列が新しく増える」という設定にするため、「Choose App」からスプレッドシートを選び、「Choose Event」では「New Spread sheet Row」を選びましょう。

4.トリガー設定(アカウント選択・シートの選択)

「Choose account」から、先ほどSTUDIOと連携したスプレッドシートのアカウントを連携しましょう。「Set up trigger」の中の「Spreadsheet」で、連携したスプレッドシートを選択します。「Worksheet」で、スプレッドシートの中のシートを選択します。デフォルトでは、「シート1」となっているはずです。

5.トリガー設定(トリガーのテスト)

選択しているスプレッドシートとの連携をテストしましょう。ここで、列に何もないとエラーが出てしまうので、あらかじめテストでフォームを送信しておきましょう。

6.アクション設定(Appの選択・イベントの選択)

アクション設定に移ります。先ほどまでは「〇が起きたら△を実行するよ！」の◯であるトリガーを設定していましたが、続いては△にあたるアクション設定を行います。今回は、「△＝メールを送信」という設定にしたいので、「Choose app & event」からGmailを選択し、イベントで「Send Email」を選択します。

7.アクション設定(アカウント選択)

「Choose account」から送信元にしたいGmailのアカウントを連携（Gmail側で独自ドメインを追加することで、独自ドメインのメールアドレスからの送信も可能です。）

8.アクション設定(メールの送信内容等の設定)

「Set up action」から、メールの送信元アドレスや題名、本文などを設定しましょう。この際、フォームに入力された内容を変数として、本文中や送信先のメールアドレス設定時に利用できます。ここでは、送信先メールアドレスの「To」、送信元メールアドレスの「From」、メールの題名の「Subject」、メール本文の「Body」を設定しましょう。

9.アクション設定(テスト送信)

最後に、アクションが正常に機能するかどうかをテストしましょう。これでZapier上での自動返信メールの実装は完了です。この後、ライブプレビューからフォームを送信して、実際に自動返信メールが届くか試してみましょう。フリープランの場合は、15分ごとにzapierの更新が行われるため、メールが届くまでに最大で15分かかることがあります。

10.設定後の注意点

Zapierで自動返信メールを実装している場合の、注意点について解説していきます。

送信メール数が月100件以上の場合は、Zapierのアップグレードが必要

Zapierで自動返信メールを実装した場合、現時点で月に100件までは無料で利用できますが、それを超えるとZapierのプランをアップグレードする必要があります。Zapierの料金体系について、詳しくはこちらをご覧ください。Zapierの「task」数が自動返信メールの送信件数、「Zap」数は自動返信を実装するフォーム数とお考えください。

フォームの項目を変更する時は注意が必要

Zapierで設定されたプロパティは、スプレッドシートの列で管理されています。そのため、STUDIO上でフォーム項目を変更するときは、Zapierの設定にも注意が必要です。

例えば、「お名前」「電話番号」「メールアドレス」の項目でフォームを作成したが、「電話番号」を削除することになったという状況を考えてみましょう。電話番号を削除したフォームを送信すると、スプレッドシート上の3列目にあったメールアドレスが2列目に移動しているのがわかります。

その結果、Zapierで自動返信メールの送信先メールアドレスとして設定されていた3列目が空になり、自動返信メールが機能しなくなってしまいます。このような状況が発生する可能性があるため、STUDIO上でフォーム項目を操作する際は、十分に注意しましょう。

STUDIOに外部サービスのフォームを埋め込むことも可能

ここまで、STUDIO基本機能のフォームについて解説してきましたが、「社内で使うフォームを全て統一したい」といった場合もあるでしょう。STUDIOではiframeタグを使うことで、外部のフォームサービスを埋め込むことができます。埋め込みができる代表的なサービスとして、formrunやGoogle Formなどが挙げられます。

Google Formの埋め込み方法や埋め込める外部サービスは下記の参考記事で解説していますので、合わせてご覧ください。

参考記事：STUDIOに埋め込める外部サービス一覧〜動画やSNSから日程調整まで〜

まとめ

• STUDIOのフォームでは、テキストボックスやラジオボタンなど様々なパーツを設定可能

• スプレッドシートと連携可能

• 外部ツールのZapierを使うことで自動返信メールも実現可能

• iframeタグで外部サービスで作成したフォームの埋め込みが可能