Blogger コンタクトフォーム ページの作成方法

Bloggerは無料ブログながら、多機能でカスタマイズなどの自由度も高い優れたブログプラットフォームです。WordPressと同様にBloggerは、投稿に加えて固定ページを作成する機能を備えています。固定ページは、サイトの紹介、お問い合わせ、サイトマップ、プライバシーポリシー等のコンテンツを掲載するのに適しています。

本記事では、Bloggerの固定ページにjQuery を使用したコンタクトフォームを設置する方法を紹介します。
[post_ads]

Bloggerブログのお問い合わせページを作成する方法

ここで紹介するコンタクトフォームの作成方法は、MagOneテンプレートの製作者の記事を訳して紹介するものです。

元記事： [Contact Form for Blogger Static Page with jQuery / Sneeit ##external-link##]

jQueryを使用したコンタクトフォームの特徴

jQueryを使用したコンタクトフォームは、サイト内の自由な場所にショートコードなどを使って、コンタクトフォームをすることができる特徴があります。

事前準備：jQueryがインストールされているか確認する

MagOneの場合は、既にjQuery はインストールされているのでこの作業は不要です。

テンプレートのHTMLコードを表示させて、“https://ajax.googleapis.com/ajax/libs/jquery” を検索します。該当するコードがテンプレートのソースコードにない場合は、以下のコードを</head>の前に貼り付けます。

[<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>]

テンプレートのコードを保存します。

事前準備2：コンタクトフォーム ガジェット（ウィジェット）の設置

コンタクトフォームガジェットが予め組み込まれていないテンプレート（通常のテンプレート）の場合は、Blogger管理画面の「レイアウト」からガジェット（ウィジェット）の追加を押して、「コンタクトフォーム」を任意の場所（どこでも結構です）に追加して下さい。設置されたガジェットは、以下に記載する設定でCSSを使用して非表示にし、任意の場所（ページ）に設置したショートコードで表示する仕組みになっています。

備考：
Blogger テンプレート MagOne の場合は予めコンタクトフォームガジェットが組み込まれているため、この作業は必要ありません。

CSSとJavaスクリプトの追加

Bloggerのダッシュボードからテーマをクリックし、［HTMLの編集］ボタンを押します。

表示されるテンプレートのソースコードの表示欄内にクリックして（欄内であればどこでも良いです）、検索キーボードショートカット（コントロール＋F、またはコマンド＋F)から、"]]></b:skin>"を検索します。 "]]></b:skin>"の前に以下のコードを貼り付けます。

[.ContactForm { display: none; } .blogger-items-contact .ContactForm { display: block; } .widget.ContactForm .title { display: none; } .widget.ContactForm * { max-width: 100%; }]

続いて、</body>を検索し、</body>の前に以下のスクリプトコードを貼り付けます。

<script type='text/javascript'>
//<![CDATA[
$('.ContactForm').appendTo('.blogger-items-contact');
//]]>
</script>

テンプレートを保存します。

固定ページにお問い合わせフォームを作成する

Bloggerのダッシュボードからページをクリックして、［新しいページ］のボタンを押します。

固定ページの編集作成画面が表示されます。タイトルを入力して、［HTML]を押して編集モードを切り換えます。


HTML編集モードで入力欄に以下のコードを貼り付けます。

 <div class="blogger-items-contact"></div>

必要に応じてショートコードの前や後に説明を加えます。フォームだけでなく、例えば、入力メールアドレスの取扱いについての説明や返信は48時間以内にしますというような一言を付け加えると問い合わせフォームページイメージが向上します。

本サイトのお問い合わせページは、ここで紹介した方法で作成しています。よろしければ、ご覧下さい。

[ ##link## お問い合わせページ]