第2章 単純なフォームの作成

概要

このチュートリアルでは、以下の実行方法を説明します。

  • フォームの作成
  • フィールドのフォームへの追加

要件

  • App Studio アカウント

2.1. チュートリアル

2.2. ステップ 1: ログイン

認証情報を使って Studio にログインします。

2.3. ステップ 2: フォームの作成

「フォームビルダー」タブをクリックします。フォーム画面が表示されます。フォームがすでに作成されている場合は、それらのフォームがここに表示されます。複数のフォームが作成されている場合、検索ボックスを使用してフォームを検索したり、一覧表示のフォーマットを変更して一度により多くのフォームを表示できるようにしたりできます。フォームが存在しない場合やユーザーにすでに作成されたフォームを参照するための十分な権限がない場合には、「フォームが見つかりません」というメッセージが表示されます。

フォームを選択すると、フォームのダッシュボードが表示されます。このダッシュボードから、選択したフォームについての詳細情報にアクセスできます。この情報には、以下が含まれます。

  • このフォームを使用したプロジェクト
  • 今日提出する (Submissions Today)
  • 送信合計
  • ページ
  • サブスクライバー

新規フォームを作成するには、「新規フォーム」ボタンをクリックします。

フォーム作成ウィンドウが表示されます。ここでは、フォームテンプレートの選択とフォーム名の入力を求めるプロンプトが表示されます。オプションでフォームの説明を含めることができます。

数多くのフォームテンプレートから選択することができます。これらのテンプレートのいずれかをクリックすると、フォームのプレビューが表示されます。事前に作成されたフォームを使用したくない場合は、「B lank Form」テンプレートを選択します。

注記

テンプレートを選択しても、これをそのままフォームとして使用しなければならないという訳ではありません。テンプレートはフォーム作成の開始時に使用し、編集することができます。

2.4. ステップ 3: フォームの編集

フォームを編集するには、まず該当フォームを一覧から選択します。フォームを選択すると、フォームのプレビューがフォームメニューと共に画面に表示されます。

注記

新規に作成されたフォームが選択されている場合、フォームのプレビューは、フォームのタイトル以外は空白で表示されます。これはフィールドがフォームにまだ追加されていないためです。

サイドバーからフォームを編集を選択します。これにより、「フォームを編集」画面が表示されます。ここからフィールドをフォームに追加できます。フィールドのフォームへの追加は、ドラッグアンドドロップと、単純に追加したいフィールドをクリックする 2 つの方法のいずれかで実行できます。

注記

フィールドをフォームに追加する際、フィールドをクリックするとこれがフォームの末尾に追加されます。フィールドのドラッグアンドドロップの場合は、フォームの任意の場所にフィールドを配置できます。フィールドはフォームに追加した後に、ドラッグアンドドロップで移動できます。

フィールドをクリックしてフォームに追加します。フィールドが追加されると、フォームのプレビューは自動的に更新されます。すべてのフィールドは、フォームに追加されると自動的に「Untitled」というラベルが付けられ、「Required」値が適用されます。

注記

「Required」属性によって、フォームの提出にフィールドへの値の入力が必要かどうかが決まります。「Required」属性がフィールドに追加されている場合は、フォームの提出前に値が該当フィールドに入力または選択されている必要があります。

Number フィールドをフォームに追加します。追加後にプレビューでこのフィールドをクリックします。その後に新規メニューが表示されます。

ここから、選択したフィールドに関連する各種の属性を設定できます。これらには、フィールド名、追加の指示、入力可能な最大/最小値の制限などが含まれます。

注記

各フィールドにはそれぞれ固有の設定オプションがあります。たとえば、テキストフィールドには、入力可能な最大文字セット数の設定オプションがありますが、写真のアップロードフィールドにはアップロード可能な最大ファイルサイズの設定オプションがあります。

「Number」フィールドの属性を以下のように設定します。

  • Name: Number field
  • Instructions: Please enter your mobile number

ここで Text フィールドをフォームにドラッグして追加します。Text フィールドが Number フィールドの上に置かれるようにこのフィールドの位置を変更します。これを実行するには、Text フィールドを Number フィールドの上にドラッグしてからリリースします。

Text フィールドを選択し、名前を「Name」に設定します。

フォームを保存します。

フォームが正常に作成され、プロジェクトへの関連付けが可能になりました。