ページへのフォーム埋め込み方法

ページへのフォーム埋め込み方法

お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

このページの内容
ページコンポーネントにZoho Creator フォームを埋め込む方法について説明します。フォームを埋め込むことで、ユーザーが中央のダッシュボードからデータを送信できるようになり、統一されたユーザーエクスペリエンスを実現できます。
提供状況
  1. フォームの埋め込みは、Creator のすべてのプランでページに対して利用できます。
  2. スーパー管理者、管理者、および開発者のみが、ページ内のフォームを埋め込みおよび管理できます。

1. Zoho Creator で埋め込みフォームを設定する

1.1. ページにフォームを埋め込む手順

1. 対象ページのページビルダーに移動し、左ペインのFormをクリックします。
2. Applicationドロップダウンをクリックし、フォームを埋め込むアプリケーションを選択します。既定では、そのページを含む現在のアプリケーションが選択されています。
 
3. ページに埋め込む対象フォームを選択します。
4. 表示された一覧からフォーム埋め込みレイアウトをドラッグ&ドロップして、作成スペースに配置します。フォームの埋め込みに利用できるレイアウトは次の 2 種類です。
  1. フォームをそのまま表示 - フォーム全体をページ上に埋め込みます。

    スライド表示されるForm Embed Configurationペインで完了をクリックすると、フォームがページに埋め込まれます。必要に応じて、完了をクリックする前に、さらにプロパティを設定したり、初期フィールド値を設定したりできます。
  1. フォームを開く CTA ボタン - ページ上にボタンを埋め込み、クリック時にユーザーをフォームへ遷移させます。

    この構成はボタン要素を含むパネルとして動作するため、Panel Configurationペインが開きます。Creator のフォームコンポーネントを開く操作を開始できるインタラクティブ要素として機能します。設定内容は操作タブから確認できます。
Notes
メモ: 設定を保存してフォームをページ上にボタンとして埋め込むには、右上隅のXアイコンをクリックします。
また、ボタンに対してカスタム表示操作、およびスタイルプロパティを設定でき、テキストや画像のパネル要素を追加して、さらにコンテキストを補足できます。ボタンをパネル要素として利用する詳細については、パネルについてのページを参照してください。

2. 追加設定

Notes
メモ: 以下のセクションは、Creator フォームをページ上にそのまま埋め込んだ場合にのみ適用されます。ボタンとして埋め込む場合は、ボタンの表示操作、およびスタイルプロパティの設定方法を参照してください。

2。1. 埋め込みフォームのプロパティを設定する

フォームをページに埋め込んだ後は、フィールドの差し込み値の設定、ボタンラベルのカスタマイズなどを行えます。これらは、要素を追加または編集した際に表示されるフォーム埋め込み設定ペインから行います。
1. 埋め込みフォームの次のインターフェイス要素に対して、フィールド値を入力します。
  1. 完了メッセージ - 埋め込みフォームからデータが送信された後に表示されるトーストメッセージです。
  2. 送信ボタンのテキスト - 埋め込みフォームの送信 CTA のラベルです。
  3. リセットボタンのテキスト(Web デバイスでのみ適用)- 埋め込みフォームのリセット CTA のラベルです。このボタンをクリックすると、すべてのフィールド入力が削除されます。
2. リダイレクト先ドロップダウンからオプションを選択し、データ送信後にエンドユーザーを遷移させる先を指定します。
  1. なし - リダイレクトは行われません
  2. フォーム - 現在の Creator アカウント内の任意のアプリケーションのフォーム
  3. レポート - 現在の Creator アカウント内の任意のアプリケーションのレポート
  4. ページ - 現在の Creator アカウント内の任意のアプリケーションのページ
  5. Web サイト URL - エンドユーザーがアクセス可能な任意の公開または非公開 URL
 
Notes
メモ:
a) フォームレポート、またはページを選択した場合は、表示されるドロップダウンから対象コンポーネントも選択します。アプリを変更をクリックすると、同じ Creator アカウント内の別アプリケーションのコンポーネントを選択できます。
b) さらに、対象コンポーネントを同じウィンドウで開くか、新規ウィンドウで開くかを選択します。
 
3. 埋め込みフォームに対して公開アクセスを許可を有効にするかどうかを選択します。これにより、ページが公開されていて、かつフォームも公開されている場合に、埋め込み要素が表示されるようになります。
Notes
メモ: 既定では、公開アクセスを許可は無効になっており、必要に応じて有効にできます。
4. 完了をクリックして設定を保存します。
さらに、ページ読み込み時に、埋め込みフォーム専用の自動入力された初期フィールド値を設定・表示することもできます。初期フィールド値の設定手順は、次のセクションで説明します。

2。2. 埋め込みフォームで初期フィールド値を自動入力する

フォームをページに埋め込んだ後は、表示されるフォーム埋め込み設定ペインで、以下の手順に従います。また、埋め込みフォームをダブルクリックして設定画面を開くこともできます。
1. フォーム埋め込み設定ペインのフィールド値タブに移動し、フィールド値を設定をクリックします。
2. 一覧表示されているフィールドごとに初期値を入力します。この値は、埋め込みフォームの実行時に入力欄へ自動入力されます。また、事前に設定したページ変数を、'${<pagevariable>}' 形式で値として含めることもできます。
 
3. + 新しい値を追加をクリックし、対象フォームから別のフィールドを選択して、それらにも初期値を設定します。
Notes
メモ:
  1. 埋め込みフォームの読み込み時に自動入力をサポートしないフィールドは、自動採番QR/バーコードメモの追加、およびセクションです。
  2. 対象フィールドにカーソルを合わせ、ゴミ箱アイコンをクリックすると、入力済みの初期値を削除できます。
4. 完了をクリックして設定を保存します。変更内容はアプリケーションの実行時に反映されます。

3. 埋め込みフォームの管理

フォームの埋め込み要素をダッシュボードに追加したら、それらを管理するための基本的な操作を行えます。
Form Embed Configuration]ペイン内の設定:
フォームを埋め込むだけでなく、次の操作を行えます:
  1. 要素名を追加する - Form Embed Configurationペイン右上の鉛筆アイコン()をクリックして、要素名を編集します。この名前は、ページビルダー内で他の要素の中から該当の要素を特定する際に使用できます。
  2. Change formをクリックして、現在の Creator アカウント内の任意のアプリケーションから別のフォームを選択し、代わりに埋め込むことができます。フォームを切り替えると、設定はリセットされます。
埋め込みフォームの設定が完了したら、アイコン()をクリックしてページビルダーに戻ります。ページビルダー上では、ページ内での位置の変更や、実行ビューで表示する見出しの設定など、埋め込みフォームをさらに管理できます。

ページの編集ビューからの操作:
埋め込みフォームをクリックすると、以下の操作を行えます。
 
  1. 見出しの追加 - Tアイコンをクリックして、埋め込みフォーム要素に見出しを追加します。この見出しは、アプリケーションの実行ビューで埋め込みフォームの上部に表示されます。挿入後、埋め込みフォームの見出しをクリックして、以下の設定で書式を変更できます:
    1. フォントファミリー - ドロップダウンから 6 種類のフォントタイプのいずれかを選択します。
    2. フォントサイズ - ドロップダウンから 12~40 px のサイズを選択します。初期値は 20 px です。
    3. 太字 - Bアイコンをクリックして、見出しを太字にします。
    4. フォントスタイル - Iアイコンをクリックして、見出しを斜体にします。
    5. フォントカラー - Aアイコンをクリックして、見出しに適用する色を選択します。
    6. 見出しの更新 - 挿入済みの見出しをダブルクリックして、内容を更新します。
    7. 見出しの削除 - 埋め込みフォーム要素を選択し、再度 Tアイコンをクリックして見出しを削除します。
  2. 埋め込みフォームの高さ調整 - アイコン()をクリックして、埋め込み要素の高さをAutoまたはカスタム長に設定します。
Notes
メモ:
  1. 初期設定では、埋め込み要素の高さはAutoに設定されています。
  2. カスタムを選択した場合、表示される初期値は150 pxで、要件に応じて変更できます。
  1. 埋め込み要素の削除 - ゴミ箱アイコンをクリックして、ページからフォーム要素を削除します。
  2. 埋め込みフォームの移動 - ページビルダー上で埋め込みフォームをドラッグ&ドロップして、別の位置に移動します。
既存の埋め込みフォーム要素の編集/設定:
既に挿入されている埋め込みフォーム要素を編集する場合は、ページビルダーで対象の要素を選択し、設定をクリックします。あるいは、埋め込みフォームをダブルクリックして設定画面を開くこともできます。
 
  1. ページに埋め込まれたフォームについて
  2. ページについて
次のステップ
前へ
次のステップ
中央集約されたアクセスを実現するために、埋め込みレポート機能を使用して、ページ内にレポートを挿入する方法について参照してください。
前へ
中央集約されたアクセスを実現するために、埋め込みフォーム機能を使用して、ページ内にフォームを挿入する方法について参照してください。