WordPressでサイドバーにお問い合わせフォームを設置する方法を解説!

※本ページは広告を含む場合があります。

こんにちは、chieです(^^)

今回は、WordPressでサイドバーにお問い合わせフォームを設置する方法について図解入りで詳しく解説します。

 

・ついでにウィジェットの使い方も知りたい
・お問い合わせ用の記事をすでに作成している
・contactform7(プラグイン)をインストールしている

という方向けの内容になります。

 

お問い合わせフォームを設置するには、先に固定ページでお問い合わせ用の記事を作成しておく必要があります。

先にこちらの記事を参考に固定ページで記事を作ってみて下さいね。

WordPressの固定ページにコンタクトフォームを設置するプラグイン【ContactForm7】

では早速取り掛かりましょう♪

 

目次

WordPressでサイドバーにお問い合わせフォームを設置

 

まずはワードプレスにログインして、ブログの管理ページに入りましょう。

 

このページはブックマークしておきましょう。

よく見るサイトをブックマークに登録する方法【GoogleChrome】

 

今ログインしている画面の左側に、黒い背景の項目がずらーっと並んでいますね。

ダッシュボード、ホーム、更新などと文字の書いてある部分です。

今後、この項目を利用して記事を書いたり編集したりしていく事になります^^

 

外観→ウィジェット

 

サイドバーにお問い合わせフォームを設置するには、ダッシュボードから【外観】→ウィジェット】をクリック。

 

 

青色の線を付けている場所が、今回設定に使っていく場所です。
(これと全く同じ項目が並んでいる必要はありませんので、自分の画面と違っていても大丈夫です^^)

 

緑色の線を付けている場所も、使用しているワードプレスのテーマによって変わってきます。
同じ項目がなくても気にしなくてOKです。

 

ちなみに、私が今使用しているテーマはSimplicity2 です。(現在は変更しています)
カスタマイズしやすい無料テーマでSEO的にも強いのでおススメです。

【WordPress】Simplicityの無料で利用できるテンプレートのテーマ導入で簡単にSEO対策♪

 

サイドバーにお問い合わせフォームを付けるには、上の画像の青色の線を付けている部分に【テキスト】という項目を追加する必要があります。

 

テキストを追加

 

ウィジェットのサイドバーに【テキスト】を追加していきましょう。

利用できるウィジェットと書いてある下にあるのが利用できるウィジェットです。

この中のどこかに【テキスト】というウィジェットがあるので、画像のように下にスクロールして探します。

 

 

 

テキスト】のウィジェットが見つかりましたか?

任意のテキストやHTMLという表記がありますが、これは、このウィジェットを使えば自分の好きな言葉で項目を追加できるという事です。

文字の色を変えたりする事もできます。

【WordPress】タグの知識は必要なし♪簡単にテキストウィジェットの文字に装飾を付ける方法

 

次に、テキストの文字をクリック。

 

 

クリックすると、このような項目が出てきます。

 

一番上のサイドバーウィジェット
(サイドバーという文字があればOK)
が選択されている事を確かめましょう。

選択されていなかったら、サイドバーと文字がある項目をクリックして選択して下さい。

 

そして、ウィジェットを追加をクリック。

 

 

これで、サイドバーのウィジェットに【テキスト】というウィジェットが追加されました。

 

ここまで来ればもう少しで設定は完了です♪

上の画像で解説していきます。

 

この部分にはタイトルを書き込みます。

お問い合わせやお問い合わせフォームなどと記入すればOKです。

 

ここが少し分かりづらいですね。
ただ文章を入れるだけでは、お問い合わせフォームへのリンクをつける事が出来ません。
そこで、HTMLを使ってリンクを作成します。

 

 

 

←先ほどの【テキスト】をウィジェットに
追加するという手順での画像です。

ここに、任意のテキストやHTMLとありましたよね。

 

 

HTMLは、リンクを入れたり文字を強調したりなどの、文章を整理する為のものだという風に理解できれば良いと思います。

【WordPress】タグの知識は必要なし♪簡単にテキストウィジェットの文字に装飾を付ける方法

 

で使用するHTMLはこちらです。

<a href=”リンク先のURLを入れる“></a><br>
<a href=”リンク先のURLを入れる“>お問い合わせはこちら</a>

 

分かりやすいように色分けをしています。

まずは、リンク先のURLを入れると書いてある部分が二か所ありますね。

 

この二か所に、固定ページで作成したお問い合わせ用の記事のURLを入れましょう。

WordPressの記事や画像のURLの確認方法とリンクの設定方法

 

上記のHTMLの青色でマークしているお問い合わせはこちらという文字は、この部分をクリックするとお問い合わせ用の記事へと移動する事になります。

この部分には、リンクをクリックする為の誘導の文章を自分なりに入れてみて下さい。

 

そして最後に、の保存をクリック。

これであなたのブログのサイドバーにお問い合わせフォームを設置する事が出来ました^^

 

設定の確認とまとめ

 

ちゃんとサイドバーに設定が反映されたかどうかの確認をしてみましょう。

ウィジェットの使い方についても触れたので、自分なりに色々とウィジェットを設定してみて下さいね^^

 

サイドバーはブログ訪問者の目につきやすい場所です。

画像を設定したりしてオリジナルのサイドバーを作成してみましょう♪