STUDIOで問い合わせフォームをノーコードで作成する

2024年3月4日

当ページのリンクには広告が含まれています。

URLをコピーしました！

生徒

STUDIOのサイトに問い合わせフォームを設置できますか？

先生

STUDIOでフォームを使用する方法を説明します

この記事でわかること

STUDIOのフォーム機能の内容と使い方
STUDIOでお問い合わせフォームを設置する方法

WEBサイトにフォームを設置するメリット

WEBサイトにフォームを設置することで、以下のことができるようになります。

サイト訪問者からの問い合わせや指摘などを受け付ける
サイト訪問者に意見を求めて回答を得る

Googleアドセンスの審査を通るのにも、問合せフォームの設置は重要と言われています。

STUDIOのフォーム機能について

STUDIOにはノーコードで使えるフォーム機能が用意されています。

STUDIO上で、問い合わせフォームの設置、フォームのから送信内容の管理を完結できます。

別のプログラムや、メールサーバーへの接続などは不要です。

STUDIOのフォーム機能の使い方

STUDIOのフォーム機能は、STUDIOの各プロジェクトごとに管理されます。

フォームの内容を確認するには、プロジェクトのホーム画面で、上部メニューのフォームをクリックします。

ページにフォームを1個も設置していない状態だと何も表示されません。

この画面でフォームを作成するのではなく、デザインエディタで設置したフォームがここに表示されます。

設定をクリックすると全体設定が開いて以下の設定を行うことができます。

項目	説明
フォーム通知の送信先	フォームの送信先にするメールアドレスを入力します。
フォーム結果をSTUDIOに保存	`許可する`をONにすると、フォームから送信された内容がこの画面にも表示されます。OFFだと、`フォーム通知の送信先`で設定したメールアドレスに送信されるのみです。

この全体設定は、このプロジェクトのすべてのフォームの初期値になります。

ページにフォームを設置する

デザインエディタで、ページにフォームを配置します。

ここではセクションに用意されているコンタクトフォームをページに配置します。

空のフォームを設置するのではなく、予め用意されているフォームを設置して、そこから使用したい形に編集していく形になります。

その他の用意されているフォームを使用する場合

ボックスのBasic Formsにもいくつかフォームが用意されています。

フォームの設定内容

デザインエディタでフォームを選択すると、フォームの設定内容が表示されます。

フォーム名

このフォームの名前でフォームにもこの名前で表示されます。

プロジェクト内で重複しない名前にする必要があります。

送信後のページ

フォームの送信後に移動するページを設定します。

送信後の案内などが書かれたページに誘導するのに使用します。

送信後のページを指定しない場合

送信後のページを指定しないと、画面はそのままで送信完了のメッセージが表示されるだけなので、送信後のページを設定する必要があります。

項目一覧

フォームに配置されている項目のリストが表示されて、クリックすると各項目の設定が行えます。

フォームのパーツを追加や削除を行うと自動的にリストの内容が変わります。

通知先の設定・集計結果

このフォームの管理画面に移動します。

フォームのパーツ

STUDIOに用意されているフォームパーツは以下になります。

Input（１行テキスト入力）
Textarea（複数行テキスト入力）
Select（セレクトボックス）
Radio（ラジオボタンリスト）
Confirm（チェックボックス）
Checkbox（チェックボックスリスト）
File（ファイルアップロード）
Button（フォーム送信ボタン）

Input

Inputは1行テキストボックス（<INPUT type=”text”>）を設置します。

項目名

この項目の名前を設定します。

同じフォーム内で重複しない名前にする必要があります。

タイプ

タイプを設定すると、入力された文字列に対して送信時に入力チェックが行われます。

タイプ	説明
text	入力形式のチェックはありません。
email	メールアドレス形式かチェックされます。
tel	電話番号形式かチェクされます。

必須項目

チェックをONにすると、入力しないと送信ボタンを押しても送信できなくなります。

必須項目を表す*について

予め用意されているフォームの項目には必須項目を表す*が付いていますが、必須項目のチェックのON/OFFで自動的に編集されたりはしないので、自分で編集する必要があります。

プレースホルダー

未入力の時に表示する文字列を設定します。

HTMLのplaceholderと同じです。

フォーム内のラベルに付いて

フォーム用のラベル項目というのは無くて、フォームの項目に付けるラベルは、Textを配置します。

Textarea

複数行の文字が入力できるテキストエリアを設置します。

上のInputと同じ項目の説明は省略します。（以降でも同じ）

Select

ドロップダウンリストを設置します。

選択肢

Selectの画面構成は以下のようになっています。

	説明
①	ドラッグして選択肢の順番を変えます。
②	選択肢を追加します。
③	選択肢を削除します。
④	選択肢を編集します。

Radio

ラジオボタンのリストを設置します。

	説明
①	ドラッグして選択肢の順番を変えます。
②	選択肢を編集します。
③	選択肢を削除します。
④	選択肢を追加します。