BloggerのページにGoogle フォームをレスポンシブで埋め込む

Bloggerのサードパーティーのテーマ(テンプレート)では専用の連絡フォームが用意されているものがありますが、動作しなくなっているものや、これから動作しなくなる恐れのあるものがあるので、Google フォーム への直接のリンクを用意するか、埋め込んだページを別に用意しておくと良いかなと思います

Embedding a Responsive Google Form: A Step-by-Step Guide ⋆ GreenWireMedia

方法はこちらの通りですが、Blogger向けだと

HTML ビューで 以下コードを入れて公開します

<div class="responsive-iframe-container">
    <iframe src="あなたのGoogle フォームのリンク" width="" height="" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
</div>

<style>
.responsive-iframe-container {
    position: relative;
    padding-bottom: 150%;  /* Adjust based on your form's height */
    height: 0;
    overflow: hidden;
}

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

*フォームの高さによって /* Adjust based on your form's height */ の値を増やす必要があるかもしれません

投稿内でstyleタグを使用するのに抵抗ある方は、postId, pageIdを使った条件分岐を使用してテンプレート内に記述して下さい

関連エントリ

• [HTML]<style>: type 属性は非推奨