IFRAMEで見積フォーム埋め込みを柔軟に設定する(詳しい方向け)

マイ見積では、IFRAMEによる見積フォーム埋め込みを許可しています。初期設定では幅800pxで埋め込みます。

この埋め込みサイズを、柔軟に設定したい場合のカスタマイズ方法です。
※ホームページ制作会社など詳しい方向けの情報です。知識の無い方はホームページ制作会社にご依頼ください。

1. 埋め込みiframeの外側に、divタグを設置します。
設定例:

<div class="embed-iframe">
  <iframe width="800" height="800" src="https://my-mitsu.jp/estimation/274" loading="lazy"></iframe>
</div>

マイ見積の編集画面で「リンク」>「埋め込み」と進むと、

  <iframe width="800" height="800" src="https://my-mitsu.jp/estimation/274" loading="lazy"></iframe>

といったタグを取得できます。このタグ(iframe)の外側を、新たにdivタグで囲います。

2. スタイルシートで、幅や高さを画面サイズに応じて変わるように設定します。
設定例:

<style>
.embed-iframe {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

.embed-iframe iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

スタイルシートで幅や高さを設定することで、柔軟な設定が可能になります。上の例では、レスポンシブ(画面サイズに応じてIFRAMEのサイズも変更する)デザインにしています。

※widthやheightの値は、ホームページのデザインに合わせて調整してください。

#
ペット火葬の見積例です。 ペットの体重と、合同火葬・個別火葬とを料金表から選ぶ 個別火葬の場合は、骨壺購入をオプションで表示する…
#
ウェブライターの方向け見積サンプルです。ホームページから直接受注したい場合に、見積フォームがあると、発注者にも分かりやすくなるので良いですね。
#
家事代行サービスの見積例です。回数が増えるほど単価が下がる仕組みをフォームに実装します。
#
3時間までは基本料金 3時間を超えたら、1時間単位で延長料金 という形で見積フォームを作ってみます。
#
自動車教習料金の計算と見積書発行例です。個人客が多いと思われるので、見積もりフォームでは会社名を非表示にする設定を行っています。