🚀JetThemeで動作する連絡フォーム

How to make Blogger Contact Form work without loading widgets.js
https://www.fineshopdesign.com/2022/12/blogger-contact-form.html

こちらの方法でついに解決しました(やった)

動作デモ

https://ws007sh-kustom.blogspot.com/p/contact-form.html
(現在はJetThemeで設定できる外観のものに変更しています)

通常のテンプレートであれば</body>タグの前に 6のコード を貼り付けますが
JetThemeではテンプレート下部の
<!-- Your Style and Script before </body> is here -->
の下です

投稿やページの HTMLのビュー に 8のコード を貼り付けます

5のコード (CSS)も HTMLのビュー 内に記載しました

<style>
/* CSS by Fineshop Design */
.blogger-form .input-field{margin-bottom:12px}
.blogger-form .input-field>input,.blogger-form .input-field>textarea{width:100%;padding:12px 24px;border-radius:6px;border:1px solid #e0e0e0;background:#fff;font-weight:500;font-size:16px;color:#6b7280;outline:0;resize:none}
.input-field>input:focus{border-color:#6a64f1;box-shadow:0 3px 8px rgba(0,0,0,.05)}
.blogger-form .input-field>label{font-size:14px;opacity:.8}
.blogger-form .submit-button{outline:0;border:none;background:#204ecf;color:#fff;padding:10px 14px;border-radius:10px;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.blogger-form .submit-button:hover{box-shadow:2px 2px 8px rgba(0,0,0,.1)}
.blogger-form .submit-button:active{box-shadow:4px 4px 8px rgba(0,0,0,.15)}
.form-notification{background:#c1e4ff;border-radius:10px;padding:15px;font-size:13px;line-height:.9rem;margin:15px 0}
.error .form-notification{background:#ffd3d0}
.success .form-notification{background:#d0f4d7}
#contact-form-1-message:focus{border-color:#6a64f1;box-shadow:0 3px 8px rgba(0,0,0,.05)}
</style>

ボタンの丸みが通知と違っていたので合わせたのと、テキストエリアにフォーカスしたときに色が付かなかったので付けてあります

関連エントリ

• [Blogger]投稿やページ内部でCSSやJavaScriptを使う