[JetTheme, etc.]モーダルの連絡フォームを作成する

Bloggerでモーダルの連絡フォームを作成するには、セクション毎モーダルにぶち込めばいいんですが

サンプル
https://xn--bjz.blogspot.com/ (ようやく改修しました)
(RSVP をクリック)
https://modal-restaurant-template.blogspot.com/
(contact をクリック)

Bootstrap の Modal と、この前のハック

• 🚀JetThemeで動作する連絡フォーム
• 🚀JetTheme向け連絡フォーム修正

を使うと、モーダルの連絡フォームが簡単に作成できます

JetTheme でのデモ > https://ws007sh-kustom.blogspot.com/p/modal.html
このブログでのサンプル > https://furiouzps.blogspot.com/p/modal.html

ただ、Bootstrap の JS を使うので、ブログの読み込み速度に拘る方には向きません

既に上のハック導入済前提で話を進めていきます

</body>タグ前に Bootstrap JS を追加

(JetThemeではテンプレート下部の
<!-- Your Style and Script before </body> is here -->
の下)

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

*現在の最新版です。公式から確認できます > https://getbootstrap.com/

Code

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">お問い合わせ</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
<div class='bloggerForm'></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

単純にモーダルのデモのbody部分とかを変えただけです

Modal · Bootstrap v5.3
https://getbootstrap.com/docs/5.3/components/modal/#live-demo