Optimizely: 送信までの複数ステップのフォーム作成

最近、Optimizely Forms を検討し、ファイル アップロード機能を備えた複数ステップのカスタマー サポート リクエスト フォームを作成しました。

始めましょう。

注: Forms モジュールがインストールされていることを前提としています。そうでない場合は、私のブログ投稿をチェックしてください –

https://madhuanbalagan.com/optimizely-forms-setup-configuration-and-submission

複数ステップのフォームの作成

• 「フォーム」タブで新しいフォームコンテナを作成し、「カスタマーサポートフォーム」という名前を付けます。

ステップ 1: 連絡先の詳細

• コンテンツ領域にフォーム ステップをドラッグ アンド ドロップして、最初のステップを作成しましょう。

• クイック編集でタイトル、説明を入力し、変更を公開します。

• フォーム内 ステップ 1 – 次のフィールドのテキスト要素をドラッグ アンド ドロップします。
  • 名前
  • 電子メール
  • 電話

注記： 各フィールドを公開してコンテンツ領域に反映します。

ステップ 2: 製品の詳細

• 先ほどと同様にフォームステップ要素と以下のフィールドをドラッグアンドドロップしてみましょう。
  • プロダクトID
  • 購入日
  • 保証ステータス
• 製品 ID – 数値として作成され、すべてのバリデーターがチェックされました。

• 購入日 – 日付形式を検証するテキスト フィールド。

• ステップ 2 フォームの準備が完了しました。

ステップ 3: 問題の説明

• 先ほどと同様にフォームステップ要素と以下のフィールドをドラッグアンドドロップしてみましょう。
  • 問題の種類
  • 問題の説明
  • ファイルのアップロード
  • 送信ボタン
• 問題の種類 – 手動で入力された選択要素オプション – データソースの場合もあります。

• ファイルのアップロード – 最大制限と許可される拡張子をカンマで区切って設定します。

• ステップ 3 の部分が完了し、ランディング ページに配置する準備が整いました。

ランディング ページのフォーム:

• 新しい標準ページ – カスタマー サポート ページを作成します。
• 新しく作成したフォームをコンテンツ領域にドラッグ アンド ドロップします。
• 変更を公開します。

フォームのテスト:

• 新しいランディング ページがメニューに表示されます。確認してみましょう。

• ファイルのアップロード – 複数のファイルの選択はうまく機能しました。

• フォームを送信しましょう。必要に応じて、特定のページにリダイレクトできます。

フォームの送信:

• 送信された記録は、「フォーム送信」を押すことで簡単に確認できます。

• レコードは次のいずれかの形式でエクスポートできます。

• レコードはデフォルトで永久に保存されます。部分的および完全な送信の必要に応じて保持ポリシーを自由に変更してください。

ビデオを見たい場合は、私の簡単な録画をご覧ください –

これがお役に立てば幸いです。

最適化を楽しんでください!