$type=carousel$columns=4$cat=hide$show=home

$hide=page-404-mobile

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## お問い合わせページ]

コメント

BLOGGER: 5
  1. この通りにHTMLを編集したのですが
    新しいページ作成しても問い合わせフォームが表示されません。
    『MagOne』にしか対応していないのでしょうか?

    返信削除
    返信
    1. MagOne以外のテンプレートの場合は、「レイアウト」からガジェット(ウィジェット)の追加を押して、「コンタクトフォーム」を任意の場所(どこでも結構です)に追加すると、作成したページでお問い合わせフォームが表示されるようになると思います。試してみて下さい。

      Bloggerの標準テーマ、Contempoでは以下の様に表示されます。https://blogginglifetest.blogspot.com/p/contact-form.html

      削除
    2. 3Qなんぶしんさん、

      一部、コードの記述に不具合がある(改行がされていなかった)ことが判明したため、記事を修正しました。「コンタクトフォーム」のガジェットの追加に加えて、コードの方も、もう一度設定し直して下さい。お手数をおかけしますが、よろしくお願い致します。

      削除
  2. できました!
    修正ありがとうございます(^O^)♪
    また一つレベルアップしました!

    返信削除
    返信
    1. 3Qなんぶしんさん、

      更新情報のご連絡、ありがとうございます。こちらからの返信が遅くなり、誠に申し訳ございません。

      無事にできたとのこと、良かったです!!

      削除
コメントは承認後、表示されます。

関連記事とスポンサーリンク

名前

AdSense,4,Blogger SEO,11,Blogger 活用法,21,Bloggerの基本機能と使い方,11,Bloggerの基本設定,7,MagOne,4,SNS,4,お勧め記事,14,お知らせ,1,
ltr
item
Blogger101@ブロギングライフ : Blogger コンタクトフォーム ページの作成方法
Blogger コンタクトフォーム ページの作成方法
https://3.bp.blogspot.com/-2mEPt6QYfac/WodzwWTofpI/AAAAAAAACGI/nnXt_OOOzTU2e7f53LAq0ECLU_SIqeAawCK4BGAYYCw/s400/Create%2Bcontact%2Bpage.png
https://3.bp.blogspot.com/-2mEPt6QYfac/WodzwWTofpI/AAAAAAAACGI/nnXt_OOOzTU2e7f53LAq0ECLU_SIqeAawCK4BGAYYCw/s72-c/Create%2Bcontact%2Bpage.png
Blogger101@ブロギングライフ
https://blogger101.blogging-life.com/2018/02/create-blogger-contact-page.html
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/2018/02/create-blogger-contact-page.html
true
6719002676499593843
UTF-8
Loaded All Posts Not found any posts 全てを見る さらに読む 返信 返信をキャンセル 削除 By Home ページ 投稿 全てを見る 関連記事 ラベル アーカイブ SEARCH 全ての投稿 お探しのページが見つかりませんでした。 ホームに戻る Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network コードを全てコピー コードを全ての選択 全てのコードをクリップボードにコピーしました Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy 目次