「黎明鬼」テーマ向け連絡フォーム

「黎明鬼」テーマ向けの新しい連絡フォームを開放します
2025年6月28日修正

サンプル
https://reimei-ki.blogspot.com/p/contact-form.html

新しいページを作成し、タイトルを「Contact」等とし
( /p/contact.html でリンクできるようにする為 )、
HTML ビューで以下のコードを入力し公開します

コード

<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
名前
<br>
<input class='re-input re-border' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/><br>
メール *
<br>
<input class='re-input re-border' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/><br>
メッセージ *
<br>
<textarea class='re-input re-border' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea><br>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' value='送信' type='button'/>
<div class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></div>
<div class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></div>
</form>
</div>
</div>

<style>
.contact-form-widget {
max-width: 100%;
}

.contact-form-button-submit {
border-color: #C1C1C1;
padding: 10px 16px;
font-size: 20px;
height: auto;
font-weight: normal;
background: #2196F3;
cursor: pointer;
}

.contact-form-button-submit:hover {
background: gray;
border: 1px solid #C1C1C1;
}
</style>

公開後、タイトルを任意のものに変更します。

関連情報

• Bloggerの連絡フォームガジェットを個別ページに移動させる方法
• 「黎明鬼」テーマで連絡フォームをページに追加する