フォームを設計する

Widget Studioでウィジェットを作成したら、要素を追加してフォームを構築します。

​

利用可能なフォーム要素

左メニューをクリックして要素を追加します。 下にスクロールして Form セクションを見つけます。複数の要素タイプが利用できます。これらを組み合わせて、パーソナライズされたインタラクティブなフォームを作成できます。

• Button: 特性を編集できるボタン
• Input: 訪問者から string データを収集できる、完全にカスタマイズ可能なテキスト入力。
• Date: 訪問者から日付を要求するフィールド。クリックすると日付ピッカーパネルが開きます。
• Time: 訪問者から時刻を要求するフィールド。クリックすると時刻選択パネルが開きます。
• Toggle: 2つの状態（たとえば ON と OFF）を追加できるトグル。
• Checkbox: テキスト要素を追加できるチェックボックス。
• RadioButton: テキスト要素を追加できるラジオボタン。
• Select: さまざまな選択可能なオプションを入力できる、完全にカスタマイズ可能なドロップダウン。
• Textarea: プレースホルダーを含む、完全にカスタマイズ可能なテキストボックス。
• Range input: 訪問者が特定の範囲内の値を選択できる、完全に編集可能なスライダー。
• Hidden input: フォームと一緒に送信されるがユーザーには表示されないメタデータを保存するために使用される、非表示のフォームフィールド。
• FormErrorMessage: フォームでエラーが発生した場合に特定のメッセージを表示するテキストフィールド。

​

フォームの設計

要素を選択すると、編集メニューの上部に General と States の2つのタブが表示されます。

​

Generalタブ

このタブを選択して、要素のプロパティを編集します。ここには、要素のコアプロパティ（ホバーなど特定の状態に固有でないもの）があります。 要素タイプに応じて、位置、パディング、アニメーションなどのさまざまな特性を変更できます。

​

ユースケースの例

ニュースレター登録フォームを作成したいとします。Widget Studioで利用可能な Newsletter テンプレートの1つから始めることができます。このベースに2つのドロップダウンとトグルを追加してパーソナライズできます。このフォームを作成するには:

1. Add an element をクリックします。
2. formsセクションで Select タイプを選びます。
3. Add option をクリックして、リストにオプションを追加します。この例では、Latest products オプションを追加します。

訪問者が Latest products を選択したときに表示される2つ目のオプションが必要だとします。手順は以下の通りです。

1. Add an element をクリックします。
2. formsセクションで Select タイプを選びます。
3. 左メニューで、2つ目のドロップダウンを非表示にします。表示させるにはイベントを設定する必要があります。

4. 各訪問者にフォーム送信前に Terms & conditions への同意を求める Toggle 要素を追加します。
5. Button 要素を追加します。

その後、情報の検証とデータの送信を構成する必要があります。

​

Statesタブ

States タブでは、要素の状態（ホバー、アクティブ、無効）のスタイルを編集できます。 すべての状態は編集可能ですが、状態の編集可能なプロパティは選択した要素によって異なります。