Bloggerの「連絡フォーム」ガジェットをページの方に移植する

Bloggerに「連絡フォーム」ガジェットが追加されましたが、ちょっと使いにくいので使いやすくします。 このガジェットを設置するとこちらのメールアドレスを公開せずに、問い合わせフォーム経由で問い合わせを受け取ることができます。

ブログへ「連絡フォーム」ガジェットを追加する

ブログへの追加は、Bloggerの管理画面の「レイアウト」から「ガジェットを追加」をクリックし、出てきたダイアログウインドウで「その他のガジェット」タブをクリックして、その中から「連絡フォーム」ガジェットを選択します。

実際に追加すると、ブログ上ではこんな感じで表示されます。

連絡フォーム経由で送信されると、自分のブログ管理用メールアドレスにメールが送られてきます。
メールアドレスをオープンにしたくない場合はいいですね！

でも連絡フォームをページに置きたい場合は、このままではまずいのでちょっと弄ります。

テンプレートの編集

Bloggerの管理画面の「テンプレート」を選択します。
その先で、「HTMLの編集」をクリックし、「ウィジェットへ移動」から「ContactForm1」を探し、クリックします。

そうすると以下のような記述がテンプレート内に見つかるかと思います。

<b:widget id='ContactForm1' locked='false' title='連絡フォーム' type='ContactForm'>…</b:widget>

まず、「locked='false'」となっているのを「locked='true'」に書き換えて、ガジェットを消せないよう保護します。
次にテンプレートの行番号の横にある三角形をクリックし、プルダウンを展開していって全文表示させます。
全文表示したのが以下のものになります。

上の画像で選択されている箇所を削除します。

<b:if cond='data:title != &quot;&quot;'>
・・・(中略)・・・
<b:include name='quickedit'/>

削除はこの箇所ですね。
あ、削除前にテンプレートのバックアップをしておいてください。

削除したら「テンプレートを保存」をクリックして保存してください。
これでウィジェットの外枠は残しつつ、ブログから連絡フォームは削除できました。

ページの作成

新規でページを作り、HTMLモードで以下のコードを貼り付けます。
なおちょっと弄っています。あとかなりシンプルです。

<div class="widget contact-form" id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <!-- FORM -->
      <form name='contact-form'>
        <!-- NAME -->
        <p>お名前</p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' placeholder='お名前を入力してください。' value=''/>
        
        <!-- EMAIL -->
        <p>E-mail [必須]</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' placeholder='メールアドレスを入力してください。' value=''/>
        
        <!-- MESSAGE -->
        <p>メッセージ [必須]</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='10' placeholder='メッセージを入力してください。' value=''></textarea>
        
        <!-- BUTTON -->
        <br/>
        <input class='contact-form-button contact-form-button-submit contact-form-reset-button' type='reset' value='消去'/>
        <input class='contact-form-button contact-form-button-submit contact-form-send-button' id='ContactForm1_contact-form-submit' type='button' value='送信'/>
        
        <!-- VALIDATION -->
        <div style='text-align: center; max-width: 250px; width: 100%'>
          <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>
  </div>
</div>

CSSの編集

CSSで連絡フォームのスタイルを変えます。
Bloggerのテンプレートの該当部分へ適宜挿入してください。

.contact-form-widget {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px;
  /*border-radius: 5px;*/
}

.contact-form-name,
.contact-form-email,
.contact-form-email-message {
  max-width: 100%;
  margin-bottom: 10px;
}

.contact-form-name,
.contact-form-email {
  width: 100%;
}

.contact-form-email-message {
  width: 100%;
}

.contact-form-button-submit {
  background-color: rgb(193, 193, 193);
  background-image: -moz-linear-gradient(center top , rgb(77, 144, 254), rgb(71, 135, 237));
  border-color: rgb(48, 121, 237);
  color: rgb(255, 255, 255);
  width: 20%;
  max-width: 20%;
  margin-bottom: 10px;
}

.contact-form-button:hover {
  text-decoration: none;
}

このスタイルの変更で以下のようになります。

これで終わりです。
後はカスタマイズ次第です！