Bloggerでお問い合わせフォーム(お問い合わせページ)を追加するにはどうすればよいですか?

公開: 2020-11-10

Bloggerでお問い合わせフォームを追加するのは、WordPressのようなプラグインをサポートしていないため、面倒な作業です。

Blogspotのブロガーのほとんどが行うことは、サードパーティのサイト(foxyform、jotform、123contactformなど)の助けを求めることです。

Bloggerお問い合わせフォームページしかし、今日は、Bloggerに公式のお問い合わせページを追加する方法を学習します。

前にも言ったように、公園を散歩するように、サードパーティのコードを新しいページに挿入することができます。 それでも、公式の連絡フォームはそれらよりはるかに優れています。


公式ブロガーフォームのメリット

  1. メッセージを送信するとすぐにメッセージが届きます。 また、配信可能性も100%です。
  2. シンプルなインターフェースにより、訪問者は簡単にあなたに連絡できます。
  3. カスケードスタイルシート(CSS)の言語を知っている場合は、好みに応じてフォームを簡単にカスタマイズできます。
  4. メッセージを送信するためにページ全体が再ロードされることはありません。

このチュートリアルを3つのセクションに分け、連絡先ガジェットを追加し、非表示にして、新しいページに公式コードを実装しました。

パート1:連絡先ガジェットの追加

以下の手順に従って、ブログに連絡先ガジェットを追加してください。

ステップ1 :blogger.comにアクセスして、アカウントにログインします。 複数のブログを運営している場合は、リストから目的のブログを選択する必要があります。

ステップ2 :左側のサイドバーから[レイアウト]をクリックして、ガジェットを追加するオプションを取得します。

blogger-layout-option
  • セーブ

ステップ3 :右側のメインパネルに[ガジェットの追加]リンクが表示されます。 それをクリックすると、ガジェットのリストが表示されます。

ブロガー-ガジェットを追加
  • セーブ

ステップ4 :次に、左側から[その他のガジェット]を選択します。 これで、お問い合わせフォームが表示されます。 同じものを追加するだけです。

お問い合わせ-フォーム-ガジェット-ブロガー
  • セーブ

パート2:ガジェットを非表示にする

次に、連絡先ガジェットを非表示にする方法を学習します。

ステップ1 :ここでテンプレートセクションを試す必要があります。 したがって、左側のメニューから[テンプレート]をクリックします。

Blogger-テンプレート-設定
  • セーブ

ステップ2 :次に、[ HTMLの編集]をクリックすると、ブログのコード全体が大きなフィールドに表示されます。

Blogger-テンプレート-編集-HTML
  • セーブ

ステップ3]]> </ b:skin>を検索し、その直前に次のコードを配置します。

div#ContactForm1 {
表示:なし!重要;
}

Contact-Form-Code-Blogger
  • セーブ

次に、[保存]をクリックして変更を保持します。

3番目の手順を実行すると、ブログに連絡先ウィジェットが表示されなくなります。

パート– 3:ページへの連絡フォームの追加

カスタマイズされた公式ブロガー連絡フォームコードがここに追加され、別のページに表示されます。

ステップ1 :[ページ]に移動し、[新しいページ]をクリックします。

New-Page-in-Blogger
  • セーブ

ステップ2 :次のコードをすべて削除した後、HTML投稿エディターに貼り付けます。

Blogger-Contact-Us-Page-Code
  • セーブ

<div id =” custom_ContactForm1” class =” widget ContactForm”>
<div class =” contact-form-widget”>
<p>以下のフォームに記入してご連絡ください。</ p>
<div class =” form”>
<form name =” contact-form”>
<p> </ p>
名前
<br>
<input type =” text” value =”” size =” 30” name =” name” id =” ContactForm1_contact-form-name” class =” contact-form-name”>
<p> </ p>
Eメール
<span style =” font-weight:bolder;”> * </ span>
<br>
<input type =” text” value =”” size =” 30” name =” email” id =” ContactForm1_contact-form-email” class =” contact-form-email”>
<p> </ p>
メッセージ
<span style =” font-weight:bolder;”> * </ span>
<br>
<textarea rows =” 5” name =” email-message” id =” ContactForm1_contact-form-email-message” cols =” 25” class =” contact-form-email-message”> </ textarea>
<p> </ p>
<input type =” button” value =” Send” id =” ContactForm1_contact-form-submit” class =” contact-form-b​​utton contact-form-b​​utton-submit”>
<p> </ p>
<div style =” text-align:center; 最大幅:222px; 幅:100%”>
<p id =” ContactForm1_contact-form-error-message” class =” contact-form-error-message”> </ p>
<p id =” ContactForm1_contact-form-success-message” class =” contact-form-success-message”> </ p>
</ div>
</ form>
</ div>
</ div>
<div class =” clear”> </ div>
<span class =” widget-item-control”>
<span class =” item-control blog-admin”>
<a title =” Edit” target =” configContactForm1” onclick =” return _WidgetManager._PopupConfig(document.getElementById(“ ContactForm1”));” href =” // www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1″ class =” quickedit”>
<img width =” 18” height =” 18” src =” // img1.blogblog.com/img/icon18_wrench_allbkg.png” alt =””>
</a>
</ span>
</ span>
<div class =” clear”> </ div>
</ div>

ステップ3:タイトル(お問い合わせなど)を追加してから、以下のように設定を変更します。

Contact-Us-Page-Blogger
  • セーブ

ステップ4:最後に、[公開]ボタンをクリックします。 それで全部です。

このお問い合わせフォームから送信されたメッセージは、管理者の電子メールに配信されます。 ブログに複数の管理者がいる場合は、すべての管理者がブログを取得します。


➜その他の便利なBlogspotチュートリアル:

  • BloggerでカスタムRobots.txtファイルを追加する方法は?
  • BloggerサイトマップをGoogleSearch Consoleに送信する方法は?

まとめ

ブロガーにお問い合わせページを追加する方法をご存知だと思います。 成功メッセージを表示した後でも配信不能などの問題が発生した場合は、連絡先ウィジェットを再インストールすることをお勧めします。

そうですね、CSSとJavaScriptスニペットの取り扱いについて十分な知識がある場合は、ページをカスタマイズして視覚的な魅力を高めることができます。

この投稿をブロガーの友達と共有することを忘れないでください。