HTML5のiframeという機能を使います。
サンプルページをダウンロードし、ソースコードをご確認下さい。
サンプルページ>
ダウンロード>
※ソースコード確認方法
windows:Ctrl + U
mac :option + command + U
実装にはオリジナルフォームの編集が必要になります。
編集方法につきましては下記ガイドをご確認下さい。
オリジナルフォームの編集方法はこちら>
(1)対象のフォームのindex.htmlの挿入箇所に下記を記述
※別ページのURLは変更する
<div class="iframe-wrapper">
<iframe src="別ページのURL" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
(2)下記スタイルを追加
padding-bottomの値は、別ページのコンテンツの高さに合わせてご変更下さい。
<style>
.iframe-wrapper {
position: relative;
padding-bottom: 94.25%;
height: 0;
overflow: hidden;
}
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>