ノーコードツールとして近年注目されているSTUDIOでは、ドラッグ＆ドロップで簡単にフォームの作成ができます。フォームは電話と比べて気軽に問い合わせできることから、申込数アップが期待できるほか、自動返信を使用すれば効率的に顧客対応も行えるなどメリットが多々あります。
そこで本記事ではSTUDIOのフォーム機能でできること・できないことを整理したのち、フォームの作成方法を画像付きで丁寧に解説します。
STUDIOのフォーム機能で『できること』
STUDIOではドラッグ＆ドロップで簡単に、多くの機能を備えたフォームを作成できます。STUDIOのフォームに備わっている具体的な機能は、以下の通りです。
| サンクスページ | フォーム内の「送信」ボタンをクリックした後に、サンクスページに遷移できる |
|---|---|
| 送信内容の集計 | 顧客からの問い合わせ内容をSTUDIO内のダッシュボードで集計できる （スプレッドシートと連携した回答管理も可能） |
| 自動返信 | フォームを回答した顧客にお礼メールを送信できる |
上記3機能の作成方法は本記事最終章の「フォーム作成方法 ＜応用編・便利な追加機能＞」で解説しています。なおメールアドレスの入力やチェックボックスなど、一般的なフォームに備わっている機能も搭載できます。
STUDIOのフォーム機能で『できないこと』
上述したようにSTUDIOでは多くの機能が用意されていますが、2023年7月現時点では以下の機能は実装されていません。
- フォーム回答後、顧客に資料を共有する資料ダウンロード機能
- 日程の予約を受け付ける予約機能（※iframeタグを使用するor外部ページに遷移すれば実装可能）
- 送信前に問い合わせ内容を確認するページ機能（※サンクスページは作成可能）
フォーム作成方法 ＜基礎編＞
本章では簡易的なフォームを作成する手順を、画像付きで紹介します。簡単に作成できるうえ、メールアドレス入力やチェックボックスなどの基本的な機能も備わっています。
なお簡易的なフォームは作成済みで、自動返信機能やサンクスページを搭載した多機能なフォームを作成したい方は、次章（フォーム作成方法 ＜応用編・便利な追加機能＞）を参考にしてください。
STEP1.フォームの土台を作成する
1.STUDIOにログインし管理画面にアクセスします。
2.管理画面右上にある「＋新しいプロジェクト」をクリックします。
3.「空白からはじめる」をクリックします。
4.遷移先のページでお好みのプロジェクト名をつけます。
5.以下画像の赤枠（画面左下）の「>」マークをクリックします。
6.画面左側のカラムから「ボックス」を選択した後、上部のタブから「追加」をクリックすると、フォームを作成する際に利用するパーツ（「Basic Forms」と「Form Parts」）が表示されます。
STEP2.テンプレートを選択し、好みの機能をつける
1.「Basic Forms」でフォームの大枠を作成する
Basic Forms（以下画像の赤枠）のいずれかをクリックすると、画面中央のデザインボックスにフォームが表示されます。Basic Formsはフォームの大枠を作成してくれるテンプレートです。
提供されている3種類のBasic Formsの特徴は以下の通りです。
| Form1 | 最も典型的なフォームテンプレート （名前やメールアドレスのテキストボックスや長文のメッセージボックスを搭載） |
|---|---|
| Form2 | 簡易的なフォームテンプレート （名前やメールアドレスのテキストボックスのみを搭載） |
| Form3 | 多機能なフォームテンプレート （テキストボックスだけでなく、チェックボックスやプルダウンメニューも搭載） |
なお、ここで選択したフォームの大枠は自分好みに変更できます。変更したい箇所を画面中央のデザインボックスでクリックすると、以下の画像の赤枠のように変更パレットが現れ、編集できるようになります。
2.「Form Parts」で好みの機能を追加する。Basic Forms直下のForm Partsをクリックすると、フォームに個別の機能を追加できます。
提供されている9種類のForm Partsの機能は以下の通りです。
| input | 1行のテキストボックス （名前やメールアドレスなどを入力できる） |
|---|---|
| Textarea | 複数行のテキストボックス （長文のメッセージを入力できる） |
| Select | 複数の選択肢を表示させ、1項目を選択できるボックス |
| Radio | 複数の選択肢を表示させ、複数項目を選択できるボックス |
| Confirm | チェックボックス |
| Checkbox | 複数チェックボックス |
| File | ファイルをアップロードできる機能 |
| Button | 回答送信ボタン |
| Password | パスワード入力欄 |
追加したForm Partsはドラッグ＆ドロップで簡単に好みの場所に移動できます。またBasic Forms同様、変更したい機能を画面中央のデザインボックス上でクリックすると、画像右側に変更パレットが現れ編集できるようになります。
STEP3.回答結果の通知先を設定する
次に顧客がフォームに回答したことをお知らせしてくれるメールアドレス先を設定します。
1.「通知先の設定・集計結果」をクリックする。
2.遷移したページで「有効化する」をクリックするです。
3.「フォーム通知の送信先」にメールアドレスを入力すれば完了です。
STEP4.フォームを実際のサイト上で確認する
好みのフォームが作成できたら、完成したデザインをサイト上で確認してみましょう。
1.「ライブプレビュー」をクリックする。
2.「スタート」をクリックする。
3.遷移したページ上に表示されているURLをクリックする
URL先のページでは実際に名前やメールアドレスを入力し、フォームを送信できます。
フォーム作成方法 ＜応用編・便利な追加機能＞
本章では、自動送信やサンクスページなどの便利な機能の追加方法を紹介します。
サンクスページの作成方法
顧客がフォームに回答した後に表示されるサンクスページも、STUDIOで簡単に作成できます。手順は以下の通りです。
1.画面左上の「ページ」を選択した後、「＋」をクリックする。
2.好みのテンプレートをクリックする（サンクスページは「ページ」or「モーダル」がおすすめ）。
3.好みのサンクスページを作成する。画面左上の「追加」を選択すると、テキストや画像などを挿入できる。
4.サンクスページのデザインが完成した後は画面左上の「ページ」をクリックし、作成したフォームを選択する。
5.画面右側の「送信後のページ」をクリックし、作成したサンクスページを選択すれば完了。
回答結果の集計（スプレッドシートとの連携）
STUDIOでは回答結果をダッシュボード上でも確認できますが、Googleのスプレッドシートでも管理できます。本章ではスプレッドシートとSTUDIOの連携手順を紹介します。
1.画像右側の「通知先の設定・集計結果」をクリックする。
2.画面右側の「設定」をクリックする。
3.スプレッドシートのアイコンをクリックした後、利用するGoogleアカウントを選択する。
4.その後、以下の画像のように自動的に集計用のスプレッドシートが作成される。
試験的にライブプレビューから回答してみましょう。送信後すぐにスプレッドシートに反映されます。
自動返信
「Zapier」という外部ツールと連携すれば、自動返信ができるようになります。自動返信を設定すれば、自動的に顧客対応が行えるため非常に便利です。設定手順は以下の通りです。
※自動返信を設定する際は回答結果を集計するスプレッドシートを使用するため、準備していない方は前章の「回答結果の集計（スプレッドシートとの連携）」を参考に、作成してください。
1.Zapierにアクセスし、ログインします。今回は「Start free with Google」をクリックし、Googleアカウントでログインする。
2.画面左側「+ Create Zap」をクリックする。
3.「1.Untitled Step」をクリックした後、遷移後のページにて「Google Sheets」を選択する。
4.画面右側の「Event」にて「New Spreadsheet Row」を選択し「Continue」をクリックする。
5.画面右側の「Spreadsheet」「Worksheet」にて、回答結果を集計するスプレッドシートとそのページを選択する。
6.Gmailにて自動送信を行うため、遷移先のページで「Gmail」をクリックする。
7.画面右側の「Event」にて「Send Email」を選択し「Continue」をクリックする。
8.画面右側で自動返信メールのタイトルや本文を設定し完了。
※テストメールを送る場合は、メール本文などを設定した後「Test action」をクリックする
まとめ
上述したようにSTUDIOでは、ドラッグ＆ドロップで簡単にフォームを作成できます。またスプレッドシートでの回答集計や自動返信など追加機能次第では、より満足度の高いフォームを作成できます。
STUDIOの純正のフォームは上述の通りですが、Huspotを利用してフォームを設置する方法もあります。弊社のお問い合わせフォームはHubspotを利用しています。そちらをご希望の際は「STUDIOにHubspotのフォームを設置して、リダイレクトでお問い合わせ完了ページに誘導する際の設定方法と注意点」をご確認ください。
