Bloggerのお問い合わせフォームをページに設置する方法

Bloggerのお問い合わせフォームをページに設置する方法Blogger
スポンサーリンク

当サイトはWordPressで作成しているのでプラグインを使えばすぐに固定ページにお問い合わせフォームを設置できるのですが、Bloggerではそう簡単に固定ページに設置できないんですよね。

というわけでお問い合わせフォームをサイドバーに設置する方法と固定ページに設置する方法です。

ちなみに当サイトではお問い合わせフォームを用意せずに、メールアドレスを掲載しています。

入力事項がメッセージだけなので、わざわざフォーム形式にする必要はないと思いました。

サイドバーに設置する

ダッシュボード「レイアウト」→「サイドバー」→「ガジェットを追加」。

連絡フォームを追加します。

サイドバーに表示されました。

固定ページに設置する

上記のサイドバーに設置する方法を手順通りに実行します。

次にダッシュボード「テーマ」→「HTMLを編集」。

]]></b:skin>

直前に

div#ContactForm1 {
display: none !important;
}

を貼り付けます。

そうするとサイドバーからお問い合わせフォームが消えます。

ついでにお問い合わせフォームのCSSを貼り付けます。

.contact-form-name, .contact-form-email, .contact-form-email-message {
    display: block;
    margin-bottom: 20px;
    background-color: #eff1f5;
    border: 0;
    border-radius: 3px;
    box-shadow: none;
}
.contact-form-email-message {
    width: 100%;
}
.contact-form-button {
    color: #ffffff; /* ボタンの文字の色 */
    background-color: #6088c6; /* ボタンの背景色 */
    height: 45px; /* ボタンの縦の大きさ */
    width: 110px; /* ボタンの横の大きさ */
    vertical-align: middle;
    border-radius: 5px;
}
.contact-form-button:hover {
    background-color: #aec4e5; /* マウスオーバーした際のボタンの背景色 */
}
.contact-form-error-message-with-border, .contact-form-success-message {
    margin: 1em 0;
    font-weight: bold;
    font-size: 1.2em;
    border: solid 3px #faaaaa;
    padding: 1em;
    display: inline-block;
}

次にダッシュボード「ページ」→「新しいページ」を作成。

入力をhtml編集にする。

下記のコードを追加する。

<div class="contact-form-widget page-contact-form">
<div class="form">
<form name="contact-form">
お名前<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail<span id="required">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
メッセージ<span id="required">*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="送信する" />
<br />
<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>
完成例

これで完了です。

参考Create a Contact Page on Blogger | Georgia Lou Studios

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)
Amazonで調べる

コメント

  1. 匿名 より:

    お問い合わせフォームの作成方法を探していて参考になりました。ありがとうございます。

    • mightymighty より:

      参考になったようで何よりです。コメントまでしていただき、本当にありがとうございます!

  2. ZziN より:

    お世話になります!今回の記事で無事お問い合わせフォームを追加することができました!ありがとうございます。

    しかし、僕は見逃したら大変失礼ですが、テストで送信はできるようですが、どこに届いているからわかりません。

    確認はどこでできるのでしょうか…(泣)

    • mightymighty より:

      コメントありがとうございます。
      メールの受信は、Bloggerユーザープロフィールに設定されているメールアドレスになります。
      確認方法は、Blogger管理画面→左側メニューにある設定→ユーザープロフィール(一番下にあります)→ユーザー情報[メールアドレス]で確認できると思います。
      そのメールアドレスの受信ボックスにあるか、迷惑メールボックスに振り分けられているかもしれません。
      よろしくお願いします!

タイトルとURLをコピーしました