ブログを運営する上で、読者からの質問やお仕事の依頼を受け付ける「お問い合わせページ」は必須です。Google AdSenseの審査においても、設置が強く推奨されています。
Bloggerには標準で「連絡先フォーム」という機能がありますが、そのまま使うと少しデザインがシンプルすぎて、ブログから浮いてしまうことも…。
そこで今回は、Blogger標準機能の安心感（スパム対策など）はそのままに、コピペだけでスマホ対応のおしゃれなデザインに変更する方法をご紹介します！
この記事でわかること
- Blogger標準フォームを使ったおしゃれなカスタマイズ
- スマホでも画面幅にぴったり合うレスポンシブ設計
- コピペして3分で完了する具体的な設置手順
標準フォームとの比較（ビフォーアフター）
Blogger標準の「連絡先フォーム」と、今回作成するカスタマイズ版の比較です。ブログにスッと馴染むモダンなデザインに生まれ変わります！
設置の3ステップ
設定はとても簡単です。以下の手順に沿って進めてください。
STEP 1：標準の連絡先フォームを追加する
まずはBloggerにフォームを認識させるための準備です。※この手順を踏まないと送信ボタンが機能しません。
- Blogger管理画面のメニューから「レイアウト」をクリック。
- サイドバーなどの「ガジェットを追加」をクリック。
- 一覧から「連絡先フォーム」を選んで追加し、保存します。
（※後で貼るコード内でこのガジェットは非表示にする設定になっているので、ブログの見た目には影響しません）
STEP 2：固定ページを作成する
- 管理画面メニューから「ページ」をクリック。
- 「新しいページ」をクリックし、タイトルを入力します。
- エディタの左上にある鉛筆マークを押し、「HTMLビュー」に切り替えます。
💡 Blogger必須の小技：URLを綺麗にする裏技
Bloggerの固定ページは、最初のタイトルから自動でURLが生成されます。最初から日本語で「お問い合わせ」とつけると、URLが不規則な文字列になってしまいます。
まずはタイトルを「contact」として一度「公開」し、綺麗なURL（.../p/contact.html）を確定させましょう。そのあとで、記事を編集してタイトルを「お問い合わせ」に修正するのがBloggerの鉄則です！
Bloggerの固定ページは、最初のタイトルから自動でURLが生成されます。最初から日本語で「お問い合わせ」とつけると、URLが不規則な文字列になってしまいます。
まずはタイトルを「contact」として一度「公開」し、綺麗なURL（.../p/contact.html）を確定させましょう。そのあとで、記事を編集してタイトルを「お問い合わせ」に修正するのがBloggerの鉄則です！
STEP 3：コードをコピペして微調整する
以下の「コードをコピー」ボタンを押し、先ほど開いたHTMLビューに貼り付けます。
<article style="display: block !important; width: 100% !important; max-width: 800px !important; margin: 0 auto !important; padding: 10px 0 !important; box-sizing: border-box !important;">
<!-- 導入メッセージ -->
<div style="text-align: left; margin-bottom: 2em; padding: 0 10px;">
<h1 style="font-size: 1.6em; color: #333; margin-bottom: 0.5em; font-weight: bold;">お問い合わせ</h1>
<p style="font-size: 0.95em; color: #666; line-height: 1.8; margin: 0;">
記事のリクエスト、ご質問、お仕事のご依頼などは、以下のフォームよりお気軽にお送りください。
</p>
</div>
<!-- 背景の白い枠 -->
<div class="contact-form-widget page-contact-form" style="display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: #fff !important; padding: 2.5em 2em !important; border: 1px solid #eaeaea !important; border-radius: 15px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;">
<div class="form" style="display: block !important; width: 100% !important; box-sizing: border-box !important;">
<form id="ContactForm1" name="contact-form" novalidate style="display: block !important; width: 100% !important; box-sizing: border-box !important;">
<div class="contact-form-field" style="display: block !important; width: 100% !important; margin-bottom: 2em !important; box-sizing: border-box !important;">
<label for="cf_name" style="display: block; font-weight: bold; margin-bottom: 0.6em; color: #444; font-size: 0.95em;">お名前 <span aria-hidden="true" style="color: #e53935;">*</span></label>
<input type="text" id="cf_name" name="name" class="contact-form-input"
maxlength="80" autocomplete="name" required placeholder="例：山田 太郎" />
</div>
<div class="contact-form-field" style="display: block !important; width: 100% !important; margin-bottom: 2em !important; box-sizing: border-box !important;">
<label for="cf_email" style="display: block; font-weight: bold; margin-bottom: 0.6em; color: #444; font-size: 0.95em;">メールアドレス <span aria-hidden="true" style="color: #e53935;">*</span></label>
<input type="email" id="cf_email" name="email" class="contact-form-input"
maxlength="100" autocomplete="email" required placeholder="例：mail@example.com" />
</div>
<div class="contact-form-field" style="display: block !important; width: 100% !important; margin-bottom: 2em !important; box-sizing: border-box !important;">
<label for="cf_message" style="display: block; font-weight: bold; margin-bottom: 0.6em; color: #444; font-size: 0.95em;">お問い合わせ内容 <span aria-hidden="true" style="color: #e53935;">*</span></label>
<textarea id="cf_message" name="email-message" class="contact-form-input"
rows="6" maxlength="2000" required placeholder="こちらにご入力ください。"></textarea>
</div>
<!-- 同意チェックボックス -->
<div class="contact-form-field consent-box" style="display: block !important; width: 100% !important; margin-bottom: 2.5em !important; background: #f8fbfc !important; padding: 1.2em !important; border-radius: 10px !important; border: 1px solid #edf4f5 !important; box-sizing: border-box !important;">
<label for="cf_consent" style="cursor: pointer; display: flex; align-items: flex-start; gap: 10px; margin: 0;">
<input type="checkbox" id="cf_consent" name="privacy-consent" required style="width: 20px; height: 20px; cursor: pointer; margin-top: 2px;" />
<span style="font-size: 0.9em; color: #555; line-height: 1.5;">
<!-- 【書き換え箇所】ご自身のプライバシーポリシーURLに変更してください -->
<a href="https://www.petit-useful.com/p/privacy-policy.html" target="_blank" style="color: #2874a6; font-weight: bold; text-decoration: none;">プライバシーポリシー</a>に同意します <span style="color: #e53935;">*</span>
</span>
</label>
</div>
<div style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;" aria-hidden="true">
<input type="text" id="cf_hp" name="hp" tabindex="-1" />
</div>
<div class="contact-form-actions" style="text-align: center; width: 100% !important;">
<button type="button" id="cf_submit" class="contact-form-button-submit">
メッセージを送信する
</button>
</div>
<!-- メッセージ表示エリア -->
<div id="cf_error" role="alert" aria-live="polite"></div>
<div id="cf_success" role="status" aria-live="polite"></div>
</form>
</div>
</div>
</article>
<style>
/* ガジェット本体を非表示に */
.widget.ContactForm { display: none !important; }
/* 入力欄の横幅とデザイン */
.contact-form-widget .contact-form-input,
.page-contact-form input[type="text"],
.page-contact-form input[type="email"],
.page-contact-form textarea {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
box-sizing: border-box !important;
padding: 14px !important;
margin: 0 !important;
border: 1px solid #ddd !important;
border-radius: 8px !important;
font-size: 16px !important; /* iPhoneズーム防止 */
font-family: inherit !important;
background-color: #fdfdfd !important;
transition: all 0.3s ease !important;
appearance: none !important;
}
.contact-form-widget .contact-form-input:focus {
outline: none !important;
border-color: #5ab4bd !important;
background-color: #fff !important;
box-shadow: 0 0 0 4px rgba(90, 180, 189, 0.15) !important;
}
/* 送信ボタンのデザイン */
.contact-form-widget .contact-form-button-submit {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 320px !important;
padding: 16px 24px !important;
border: none !important;
border-radius: 50px !important;
background: #5ab4bd !important;
color: #fff !important;
font-size: 1.05em !important;
font-weight: bold !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 15px rgba(90, 180, 189, 0.3) !important;
margin: 0 auto !important;
}
.contact-form-widget .contact-form-button-submit:hover:not(:disabled) {
background-color: #4a9ba3 !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(90, 180, 189, 0.4) !important;
}
.contact-form-widget .contact-form-button-submit:disabled {
background-color: #5ab4bd !important;
opacity: 0.6 !important;
cursor: not-allowed !important;
transform: none !important;
box-shadow: none !important;
}
/* メッセージエリア */
#cf_error, #cf_success {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
font-weight: bold !important;
text-align: center !important;
margin-top: 1.5em !important;
padding: 0 !important;
}
#cf_error { color: #e53935 !important; }
#cf_success { color: #43a047 !important; }
#cf_error:empty, #cf_success:empty {
display: none !important;
margin: 0 !important;
}
/* スマホ表示の最適化 */
@media (max-width: 480px) {
.contact-form-widget { padding: 2em 15px !important; border-radius: 8px !important; }
.consent-box { padding: 1em !important; }
}
</style>
<script>
(function () {
const $ = (s, r=document) => r.querySelector(s);
const btn = $('#cf_submit');
const ok = $('#cf_success');
const err = $('#cf_error');
const form = $('#ContactForm1');
function setState(type, msg){
if(type === 'ok'){
const clean = (msg || '送信が完了いたしました。お問い合わせありがとうございます。').replace(/。|。/g, '');
ok.textContent = clean;
err.textContent = '';
}else if(type === 'err'){
const clean = (msg || 'エラーが発生しました。入力内容をご確認ください。').replace(/。|。/g, '');
err.textContent = clean;
ok.textContent = '';
}else{
ok.textContent = '';
err.textContent = '';
}
}
btn.addEventListener('click', () => {
if ($('#cf_hp').value) return;
if (!form.reportValidity()) return;
const gadgetRoot = document.querySelector('.widget.ContactForm');
const gadgetForm = gadgetRoot && gadgetRoot.querySelector('form');
const gadgetSubmit = gadgetRoot && gadgetRoot.querySelector('.contact-form-button');
if (!gadgetForm || !gadgetSubmit){ setState('err'); return; }
gadgetForm.querySelector('input[name="name"]').value = $('#cf_name').value.trim();
gadgetForm.querySelector('input[name="email"]').value = $('#cf_email').value.trim();
gadgetForm.querySelector('textarea[name="email-message"]').value = $('#cf_message').value.trim();
const originalText = btn.textContent;
btn.disabled = true;
btn.textContent = '送信処理中...';
setState('', '');
gadgetSubmit.click();
const start = Date.now();
const TIMEOUT = 15000;
const POLL_MS = 200;
const timer = setInterval(() => {
const sEl = gadgetRoot.querySelector('.contact-form-success-message');
const eEl = gadgetRoot.querySelector('.contact-form-error-message');
let success = false;
let failure = false;
if (sEl && (sEl.textContent.trim() || sEl.offsetHeight > 0)) success = true;
if (eEl && (eEl.textContent.trim() || eEl.offsetHeight > 0)) failure = true;
const cleared =
!gadgetForm.querySelector('input[name="name"]').value &&
!gadgetForm.querySelector('input[name="email"]').value &&
!gadgetForm.querySelector('textarea[name="email-message"]').value;
if (cleared) success = true;
if (success){
clearInterval(timer);
setState('ok', sEl ? sEl.textContent : '');
form.reset();
btn.disabled = false;
btn.textContent = originalText;
} else if (failure){
clearInterval(timer);
setState('err', eEl ? eEl.textContent : '');
btn.disabled = false;
btn.textContent = originalText;
} else if (Date.now() - start > TIMEOUT){
clearInterval(timer);
setState('err');
btn.disabled = false;
btn.textContent = originalText;
}
}, POLL_MS);
});
})();
</script>コードを貼り付けたら、コード内にある「プライバシーポリシー」のURL（1箇所）をご自身のブログのURLに変更して保存（更新）すれば完成です！
☑️ 必ず送信テストを行いましょう
公開後、実際に自分でフォームに入力して「送信」ボタンを押してみてください。
無事に成功メッセージが表示され、Bloggerに登録しているご自身のGmailアドレスに通知が届けば、設定は完璧です！
公開後、実際に自分でフォームに入力して「送信」ボタンを押してみてください。
無事に成功メッセージが表示され、Bloggerに登録しているご自身のGmailアドレスに通知が届けば、設定は完璧です！
まとめ：ブログの信頼感をアップしよう
Blogger標準のフォームも、少しコードを足すだけで見違えるほど綺麗になりますね。読者が安心して連絡できる環境を整えて、ブログ運営をさらに楽しんでください！
