iframeで埋め込んだフォームを可変サイズで表示する


SELECTTYPEの予約システムでは、予約フォームをホームページやブログに埋め込むことが出来ます。
埋め込む際にはiframeというHTMLタグに幅、高さを指定して設置をしますが、
この幅サイズは「〇%」で指定することで埋め込むフォームを画面の幅に合わせて可変表示する事が可能です。

埋め込み側のページ構造自体が可変になっていない場合iframeに可変しないよう設定がされている場合には可変にならない場合もございます。

このブログエントリーでは、iframeで埋め込んだフォームを可変サイズで表示する方法をご案内します。

iframeで埋め込んだフォームを可変サイズで表示する

まず埋め込みコードを入手します。
ログインしたらページ上部ヘッダーより「予約システム」→「共有情報 (公開URL)」をクリックします。

共有情報画面が表示されます。

同画面内の「Webページに貼り付ける」に移動します。
「コード」に記載の埋め込み用コードをコピーしてメモ帳などのテキストエディタに貼り付けます。

コピペしたコードの「width=”〇〇”」の部分を「width=”100%”」に変更して幅サイズを可変サイズに指定します。
※高さ(height=”〇〇”)は適宜固定サイズで設定をします。

これで埋め込んだ予約フォームが画面の幅に合わせて可変されるよう設定が完了しました。
幅サイズを調整したコードをホームページに設置します。

今回ご紹介しました方法は、埋め込む側のページが可変対応されていることが前提となります。
この方法でフォームが可変されない場合には、iframeを設置する側やiframe自体が固定となる設定になっている可能性もございます。
このような場合はページを作成された担当者様にiframeを可変にする方法をご相談ください。

SELECTTYPE: 無料でWEBサイト/予約フォーム付き予約システム/イベント管理・セミナー管理システム/メールフォーム付きサポートシステム/各種フォーム作成(アンケート,診断テスト)