Bloggerにコンタクトフォームを設置する

1. コンタクトフォーム

ネットで検索するとGoogleフォームを埋め込むという方法が多く表示されると思いますが、こちらの記事ではその方法は利用しません。

ガジェットとして用意されているフォームを固定ページへと移植していきます。修正する箇所は「ブログID」のみ。 メッセージなどは必要であれば書き換えてください。

お名前

Email

お問い合わせ内容

2. コンタクトフォームの設置方法

• Blogger専用設計
  Googleフォームなどの外部サービスを使わず、Bloggerの標準機能をカスタマイズしています。
• ブログIDの確認
  コード冒頭の ブログId をご自身のものに書き換えます。
  → ブログ管理画面で表示される「https://draft.blogger.com/blog/posts/数字の羅列がブログID?hl=ja」 この数字の羅列がブログIDとなります。
• 固定ページの作成
  Blogger管理画面の「ページ」から新規作成し、HTMLビューでコードを貼り付けます。
• 動作確認
  公開後、実際にテスト送信を行い、メッセージが届くか確認してください。

3. 紹介コード

HTML・CSS JavaScript

<div class='contact-form-wrapper'>
  <form name='contact-form'>
    <div class='form-group'>
      <label for='ContactForm1_contact-form-name'>お名前</label>
      <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' placeholder='山田 太郎'/>
    </div>

    <div class='form-group'>
      <label for='ContactForm1_contact-form-email'>Email</label>
      <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' placeholder='example@mail.com'/>
    </div>

    <div class='form-group'>
      <label for='ContactForm1_contact-form-email-message'>お問い合わせ内容</label>
      <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='10' placeholder='こちらにお問い合わせ内容をご記入ください'></textarea>
    </div>

    <div class='button-container'>
      <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='送信する' onclick="sendEmailMsg()"/>
    </div>

    <div class='form-status'>
      <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
      <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
  </form>
</div>

<style>
  .contact-form-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    padding: 30px;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    box-sizing: border-box;
    font-family: sans-serif;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
    font-size: 0.95rem;
  }

  .contact-form-name,
  .contact-form-email,
  .contact-form-email-message {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
    background-color: #fff;
  }

  /* --- メッセージエリアの高さ指定 --- */
  .contact-form-email-message {
    min-height: 250px; /* 最小の高さをしっかり確保 */
    resize: vertical;  /* ユーザーが縦方向にサイズ調整可能に */
  }

  .contact-form-name:focus,
  .contact-form-email:focus,
  .contact-form-email-message:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
    outline: none;
  }

  .button-container {
    text-align: center;
    margin-top: 25px;
  }

  .contact-form-button-submit {
    background-color: #333 !important;
    color: #fff !important;
    border: none !important;
    padding: 15px 50px !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    transition: background-color 0.3s, transform 0.2s !important;
    width: auto !important;
    min-width: 200px;
  }

  .contact-form-button-submit:hover {
    background-color: #000 !important;
    transform: translateY(-2px);
  }

  .form-status {
    margin-top: 15px;
    text-align: center;
  }

  .contact-form-success-message { color: #28a745; }
  .contact-form-error-message { color: #dc3545; }
  
  .blog-pager.custom-pager{
  display:none;
  }
  .form-status {
    margin-top: 15px;
    text-align: center;
    display: none;
}
  .blog-pager.custom-pager,
  #blog-pager,
  .paging-control {
    display: none !important;
  }
</style>
  

<script>
var blogId = '********************';//ここをご自身のブログIDに変更してください
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Sending...';
var contactFormMessageSentMsg = 'Your message has been sent.';
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
var contactFormEmptyMessageMsg ='Message field cannot be empty.';
var contactFormInvalidEmailMsg = 'A valid email is required.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>