アドセンス審査にも必要 ブロガーにお問い合わせフォームの設置

ブロガーにお問い合わせフォームを初心者でも手軽に設置が出来る方法

ブロガーには標準でカジェットの追加で連絡フォームがあります

試しにサイドバーの追加から連絡フォームを追加してみるとトップページに現れる
見た目があまり良くはないので、個別のページに移動させます。

サイドバーの連絡フォームを消すCSS

1. div#ContactForm1 {
2. display: none !important;
3. }

CSSをコピーして]]></b:skin>の手前に貼り付けます。
HTMLの編集はバックアップを取ってから行ってください。

するとサイドバーの連絡フォームは消えます

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

1. .contact-form-name, .contact-form-email, .contact-form-email-message {
2.     display: block;
3.     margin-bottom: 20px;
4.     background-color: #eff1f5;
5.     border: 0;
6.     border-radius: 3px;
7.     box-shadow: none;
8. }
9. .contact-form-email-message {
10.     width: 100%;
11. }
12. .contact-form-button {
13.     color: #ffffff; /* ボタンの文字の色 */
14.     background-color: #6088c6; /* ボタンの背景色 */
15.     height: 45px; /* ボタンの縦の大きさ */
16.     width: 110px; /* ボタンの横の大きさ */
17.     vertical-align: middle;
18.     border-radius: 5px;
19. }
20. .contact-form-button:hover {
21.     background-color: #aec4e5; /* マウスオーバーした際のボタンの背景色 */
22. }
23. .contact-form-error-message-with-border, .contact-form-success-message {
24.     margin: 1em 0;
25.     font-weight: bold;
26.     font-size: 1.2em;
27.     border: solid 3px #faaaaa;
28.     padding: 1em;
29.     display: inline-block;
30. }

次にコントロールパネル→ページで新しいページのボタンを押して新規作成

左上にある入力を切り替えhtml編集にする。下記のHTMLをコピーして貼り付ける。

1. <div class="contact-form-widget page-contact-form">
2. <div class="form">
3. <form name="contact-form">
4. お名前<br />
5. <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
6. E-mail<span id="required">*</span><br />
7. <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
8. メッセージ<span id="required">*</span><br />
9. <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
10. <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="送信する" />
11. <br />
12. <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
13. </div>
14. <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
15. </div>
16. </form>
17. </div>
18. </div>

お問い合わせには、コメントは必要は無いので右下にあるオプションを選択、許可しない。に設定
これで完了です。

設置後は必ず動作しているかを確認してください。
正常に動作すれば、メールが届くはずです。

ブロガーのブログにドメイン設定方法 アドセンスにも必要なドメイン

ブロガーのブログにドメイン設定方法

tuckershop.blogspot.com