![](https://mik2062.jp/wp-content/uploads/2022/08/fbb78db025839258a0abd0d6100df36a-150x150.png)
STUDIOのサイトに問い合わせフォームを設置できますか?
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
STUDIOでフォームを使用する方法を説明します
WEBサイトにフォームを設置するメリット
WEBサイトにフォームを設置することで、以下のことができるようになります。
- サイト訪問者からの問い合わせや指摘などを受け付ける
- サイト訪問者に意見を求めて回答を得る
STUDIOのフォーム機能について
STUDIOにはノーコードで使えるフォーム機能が用意されています。
STUDIO上で、問い合わせフォームの設置、フォームのから送信内容の管理を完結できます。
STUDIOのフォーム機能の使い方
STUDIOのフォーム機能は、STUDIOの各プロジェクトごとに管理されます。
フォームの内容を確認するには、プロジェクトのホーム画面で、上部メニューのフォーム
をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-1024x688.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-1024x688.png)
ページにフォームを1個も設置していない状態だと何も表示されません。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-14.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-14.png)
設定をクリックすると全体設定が開いて以下の設定を行うことができます。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-14.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-14.png)
項目 | 説明 |
---|---|
フォーム通知の送信先 | フォームの送信先にするメールアドレスを入力します。 |
フォーム結果をSTUDIOに保存 | 許可する をONにすると、フォームから送信された内容がこの画面にも表示されます。OFFだと、フォーム通知の送信先 で設定したメールアドレスに送信されるのみです。 |
![](https://mik2062.jp/wp-content/uploads/2023/02/image-1-1024x700.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-1-1024x700.png)
ページにフォームを設置する
デザインエディタで、ページにフォームを配置します。
ここではセクション
に用意されているコンタクトフォームをページに配置します。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-19.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-19.png)
ボックス
のBasic Forms
にもいくつかフォームが用意されています。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-16-1024x827.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-16-1024x827.png)
フォームの設定内容
デザインエディタでフォームを選択すると、フォームの設定内容が表示されます。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-24-1024x884.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-24-1024x884.png)
フォーム名
このフォームの名前でフォーム
にもこの名前で表示されます。
プロジェクト内で重複しない名前にする必要があります。
送信後のページ
フォームの送信後に移動するページを設定します。
送信後の案内などが書かれたページに誘導するのに使用します。
送信後のページを指定しないと、画面はそのままで送信完了のメッセージが表示されるだけなので、送信後のページを設定する必要があります。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-25.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-25.png)
項目一覧
フォームに配置されている項目のリストが表示されて、クリックすると各項目の設定が行えます。
フォームのパーツを追加や削除を行うと自動的にリストの内容が変わります。
通知先の設定・集計結果
このフォームの管理画面に移動します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-103-1024x514.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-103-1024x514.png)
フォームのパーツ
STUDIOに用意されているフォームパーツは以下になります。
- Input(1行テキスト入力)
- Textarea(複数行テキスト入力)
- Select(セレクトボックス)
- Radio(ラジオボタンリスト)
- Confirm(チェックボックス)
- Checkbox(チェックボックスリスト)
- File(ファイルアップロード)
- Button(フォーム送信ボタン)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-20-1024x535.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-20-1024x535.png)
Input
Input
は1行テキストボックス(<INPUT type=”text”>)を設置します。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-22-1024x572.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-22-1024x572.png)
項目名
この項目の名前を設定します。
同じフォーム内で重複しない名前にする必要があります。
タイプ
タイプを設定すると、入力された文字列に対して送信時に入力チェックが行われます。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-21.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-21.png)
タイプ | 説明 |
---|---|
text | 入力形式のチェックはありません。 |
メールアドレス形式かチェックされます。 | |
tel | 電話番号形式かチェクされます。 |
必須項目
チェックをONにすると、入力しないと送信ボタンを押しても送信できなくなります。
*
について予め用意されているフォームの項目には必須項目を表す*
が付いていますが、必須項目のチェックのON/OFFで自動的に編集されたりはしないので、自分で編集する必要があります。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-45.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-45.png)
プレースホルダー
未入力の時に表示する文字列を設定します。
フォーム用のラベル項目というのは無くて、フォームの項目に付けるラベルは、Textを配置します。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-47-1024x528.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-47-1024x528.png)
Textarea
複数行の文字が入力できるテキストエリアを設置します。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-23-1024x533.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-23-1024x533.png)
Select
ドロップダウンリストを設置します。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-48-1024x593.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-48-1024x593.png)
選択肢
Selectの画面構成は以下のようになっています。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-52.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-52.png)
説明 | |
---|---|
① | ドラッグして選択肢の順番を変えます。 |
② | 選択肢を追加します。 |
③ | 選択肢を削除します。 |
④ | 選択肢を編集します。 |
Radio
ラジオボタンのリストを設置します。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-43-1024x528.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-43-1024x528.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-51.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-51.png)
説明 | |
---|---|
① | ドラッグして選択肢の順番を変えます。 |
② | 選択肢を編集します。 |
③ | 選択肢を削除します。 |
④ | 選択肢を追加します。 |
Confirm
ラベル付きのチェックボックスを設置します。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-31.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-31.png)
チェックボックスを選択することで項目の設定を編集できます。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-53-1024x492.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-53-1024x492.png)
Checkbox
チェックボックスのリストを設置します。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-54.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-54.png)
選択肢の設定方法は、上のRadioと同じです。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-34-1024x599.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-34-1024x599.png)
File
ファイルのアップロード欄を設置します。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-39-1024x604.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-39-1024x604.png)
テキストボックスを選択すると設定項目を編集できます。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-40-1024x485.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-40-1024x485.png)
入力欄をクリックするとファイルの選択画面が開いて、アップロードするファイルを選択できます。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-41.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-41.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-42.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-42.png)
Button
フォームの内容を送信するボタンを設置します。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-37-1024x520.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-37-1024x520.png)
送信内容の確認
フォームから送信されたデータの管理
フォームから送信された内容はフォームページに表示されます。
フォーム
にページに設置したフォームのリストが表示されます。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-55-1024x349.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-55-1024x349.png)
フォームを選択して設定
をクリックすると、そのフォームの設定内容が表示されます。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-56.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-56.png)
フォーム通知の送信先
フォームから送信された内容を送信するメールアドレスを入力します。
未登録
の場合、この画面にのみ届きます。
送信メッセージタイトル
送信されるメールの件名を入力します。
外部連携
Google スプレッドシートとの連携を設定します。
ステータス編集
送信されたデータを分類するためのステータスの種類や内容を設定することができます。
表示項目編集
フォーム
画面のリストに表示する項目を設定します。
削除
このフォームのデータを削除して初期化します。
送信データの確認とステータスの編集
リストから選択してクリックすると、送信内容の詳細が表示されます。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-58-1024x763.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-58-1024x763.png)
右上のドロップダウンリストでステータスを変更することができます。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-59.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-59.png)
ステータスを変更することで、表示を分類できて送信データの管理がしやすくなります。
![](https://mik2062.jp/wp-content/uploads/2023/02/image-60-1024x356.png)
![](https://mik2062.jp/wp-content/uploads/2023/02/image-60-1024x356.png)