当サイトはWordPressで作成しているのでプラグインを使えばすぐに固定ページにお問い合わせフォームを設置できるのですが、Bloggerではそう簡単に固定ページに設置できないんですよね。
Googleアドセンスの審査にも必要らしいので、今後収益化を目指す方は早めに設置しておいたほうがよさそうです。
というわけでお問い合わせフォームを設置する2つの方法をご紹介します。
サイドバーに設置する
ダッシュボード「レイアウト」→「サイドバー」→「ガジェットを追加」。
連絡フォームを追加します。
サイドバーに表示されました。
固定ページに設置する
上記のサイドバーに設置する方法を手順通りに実行します。
次にダッシュボード「テーマ」→「HTMLを編集」。
]]></b:skin>
の直前に
CSS
div#ContactForm1 {
display: none !important;
}
を貼り付けます。
そうするとサイドバーからお問い合わせフォームが消えます。
ついでにお問い合わせフォームのCSSを貼り付けます。
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編集にする。
下記のコードを追加する。
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>
これで完了です。
設置後は必ず動作しているかを確認してください。
正常に動作すれば、メールが届くはずです。迷惑メールフォルダに届くこともあるので、届かない場合は確認するほうが良さそうです(私は迷惑メールフォルダに届いていました)。