ホーム 補助-ブログ運営 ​【コピペで完了】Bloggerのお問い合わせページをおしゃれにカスタマイズする方法

​【コピペで完了】Bloggerのお問い合わせページをおしゃれにカスタマイズする方法

2026/03/05

くらしとレビュー 補助-ブログ運営

最終更新日: 2026/03/24
Bloggerでおしゃれなお問い合わせページを作成

ブログを運営する上で、読者からの質問やお仕事の依頼を受け付ける「お問い合わせページ」は必須です。Google AdSenseの審査においても、設置が強く推奨されていますよね。

Bloggerには標準で「連絡先フォーム」というガジェット機能がありますが、そのままサイドバー等に設置すると少しデザインがシンプルすぎて、ブログから浮いてしまうことも…。かといって、Googleフォームなどの外部サービスを使うと、せっかくの読者がブログから離脱してしまいます。

そこで今回は、Blogger標準機能の安心感（強力なスパム対策やGmailへの直接通知）の「裏側の仕組み」はそのまま活かしつつ、コピペだけでスマホ対応のおしゃれなデザインに変更する方法をご紹介します！

Bloggerでおしゃれなお問い合わせページを作成
この記事でわかること
  • Blogger標準の「連絡先フォーム」を劇的におしゃれにする裏技
  • スマホでも画面幅にぴったり合うレスポンシブ設計のコード
  • コピペして3分で完了する具体的な設置手順（固定ページ）
  • 送信エラーが起きた場合のチェックポイントとFAQ

標準フォームとの比較（ビフォーアフター）

Blogger標準の「連絡先フォーム」と、今回作成するカスタマイズ版の比較です。ブログにスッと馴染むモダンなデザインに生まれ変わります！

Bloggerお問い合わせフォームのビフォーアフター

失敗しない！設置のための3ステップ

設定はとても簡単です。以下の手順を飛ばさずに進めてください。

STEP 1：標準の連絡先フォームを追加する（※最重要！）

まずは、Bloggerのシステム自体にフォームの存在を認識させるための絶対に欠かせない準備です。

⚠️ 注意：このSTEPを飛ばすと、後で送信ボタンを押しても全く機能しません！
  1. Blogger管理画面の左メニューから「レイアウト」をクリック。
  2. サイドバーなどの適当な場所にある「ガジェットを追加」をクリック。
  3. 一覧から「連絡先フォーム」を選んで追加し、右下の保存ボタンを押します。
    （※後ほど貼るコード内に、この標準ガジェットを画面から「非表示（透明化）」にする設定が組み込まれているため、ブログの見た目には一切影響しませんのでご安心ください）

STEP 2：固定ページを作成する

次に、お問い合わせフォームを表示させるための「専用ページ」を作ります。

  1. 管理画面左メニューから「ページ」をクリック。
  2. 「新しいページ」をクリックし、タイトルを入力します。
  3. エディタの左上にある鉛筆マークを押し、「HTMLビュー」に切り替えます。
💡 Blogger必須の小技：URLを綺麗にする裏技
Bloggerの固定ページは、最初のタイトルから自動でURLが生成されます。最初から日本語で「お問い合わせ」とつけると、URLが不規則な文字列（例：blog-page_12.htmlなど）になってしまいます。

まずはタイトルを「contact」として一度「公開」し、綺麗なURL（.../p/contact.html）を確定させましょう。そのあとで、もう一度記事を編集してタイトルを「お問い合わせ」に修正するのがBloggerの鉄則です！

STEP 3：コードをコピペして微調整する

以下の「コードをコピー」ボタンを押し、先ほど開いたHTMLビューにそのまま貼り付けます。


HTML / CSS / JavaScript 
<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(/&#12290;|。/g, '');
      ok.textContent  = clean;
      err.textContent = '';
    }else if(type === 'err'){
      const clean = (msg || 'エラーが発生しました。入力内容をご確認ください。').replace(/&#12290;|。/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>

コードを貼り付けたら、HTMLの真ん中あたりにある「プライバシーポリシー」のURL（★書き換え箇所）をご自身のブログのURLに変更して、固定ページを「更新（公開）」すれば完成です！

☑️ 必ず自分で「送信テスト」を行いましょう
ページを公開したら、実際に自分でフォームに入力して「送信する」ボタンを押してみてください。
画面に緑色の文字で「送信が完了いたしました」と成功メッセージが表示され、Bloggerに登録しているご自身のGmailアドレスに通知が届けば、設定は完璧です！

お問い合わせフォームに関するよくある質問（FAQ）

Q. 「送信処理中...」のまま動かなくなってしまいます。
A. 本記事の【STEP 1】で解説した「Bloggerのレイアウトから『連絡先フォーム』のガジェットを追加する」という作業を忘れている可能性が高いです。裏側で動かす標準機能のガジェットが存在しないと送信処理が完了しないため、必ずレイアウト画面を確認してください。
Q. 読者からのメールはどこに届きますか？
A. Bloggerを管理している（ログインしている）GoogleアカウントのGmailアドレスに直接届きます。Bloggerの標準機能を利用しているため、複雑なメールサーバーの設定などは一切不要です。
Q. なぜ !important をたくさん使っているのですか？
A. Bloggerのテンプレート（QooQなど）に最初から設定されているデザイン（CSS）の影響を受けて、入力欄の枠線やボタンの色が崩れてしまうのを防ぐためです。「このデザインを最優先で適用する」という強い指示を出しています。
✨ Bloggerをもっとおしゃれに、使いやすく！

当ブログで紹介しているBloggerの必須カスタマイズをひとつの記事にまとめました！デザインの最適化から収益化の基盤作りまで、コピペでできる厳選テクニック8選を完全網羅しています。ブログをさらにパワーアップさせたい方はぜひご覧ください！

まとめ：ブログの信頼感をアップして仕事を獲得しよう！

Blogger標準のフォームも、少しコードを足すだけで見違えるほど綺麗で使いやすくなりますね。

しっかりとした「お問い合わせページ」があるブログは、読者からの信頼度が上がるだけでなく、企業からのレビュー依頼などのチャンスも巡ってきやすくなります。読者が安心して連絡できる環境を整えて、ブログ運営をさらに楽しんでください！

🎬 3分でわかる！当ブログの使い方

16種類以上の無料計算ツール公開中！

自己紹介

プロフィールイラスト

暮らしの「ちょっと面倒」を減らすブログ
「Petit Useful」を運営しています。
テニス、お金・家計管理、暮らしとレビューの
3つのテーマで、日常に役立つ
小さな工夫や便利ツールを発信中。

最新情報をSNSでチェック！

このブログを検索

最新記事

読込中...

連絡フォーム

名前

メール *

メッセージ *