ページ内にiframeを埋め込む方法

ページ内にiframeを埋め込む方法

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

要件

フォームが正常に送信されたら、ページ内に iFrame として埋め込まれた Web ページを表示します。

ユースケース

あるソフトウェア会社は、複数の 製品を提供しています。ユーザーが 詳細を確認したい製品を選択すると、 その製品の Web サイトが同じタブ内に表示され、製品ごとに別のページへリダイレクトされることはありません。

動作を確認する

手順         

1. フォームを作成 し、次の内容を設定します。
フォーム
フォームリンク名
フィールドタイプ
フィールド名
フィールドリンク名
製品
製品
ドロップダウン
(選択肢: CRM, Creator, Books)
製品
製品
電話番号
電話番号
電話番号
 
2. ページを作成 し、 製品 フォームを配置します。
 
3. iFrame を埋め込むための HTML スニペット を追加します。
 
4. 次のコードを HTML スニペットに保存します。
  1. <iframe 名前='frameName' width='1200px' height='1000px' frameborder='0' scrolling='はい'> </iframe>
上記は iFrame の詳細です。ワークフロー内でこの iFrame を参照するために、iFrame の名前を使用します。
 
5. フォームワークフローを作成 し、次の内容を設定します。
 
ここでは、 フォームイベント として フィールドのユーザー入力 を選択しています。これは、ユーザーがドロップダウンフィールドでオプションを選択したタイミングで Web サイトを表示する必要があるためです。

6. ［新しいアクションを追加］をクリックし、次のスニペットを追加します。
  1. if (商品=='Creator')
  2. {
  3. openUrl(' https://www.zoho.com/creator', 'iframe', 'frameName');
  4. }
  5. else if (商品 == 'CRM')
  6. {
  7. openUrl(' https://www.zoho.com/crm', 'iframe', 'frameName');
  8. }
  9. else
  10. {
  11. openUrl(' https://www.zoho.com/books', 'iframe', 'frameName');
  12. }

このスニペットでは、 openURL タスク を使用して、選択された製品に応じた Web サイトを開きます。2 番目のパラメーターで iFrame を開くことを指定し、3 番目のパラメーターで、前述のページで指定した iFrame の名前を参照しています。

動作を確認する