X

WordPressでHP(ホームページ)に連絡先(問い合わせフォーム)を載せる方法。

スポンサーリンク

こちらは超初心者向けに発信をしております。お店などのHP(ホームページ)やサイトを作った場合、連絡先を載せることは重要になってきます。問い合わせをしたくても、電話番号やメールで連絡が取れない状態のサイトだと、信用がありませんよね。連絡先の設定をすることで、注文の電話や問い合わせのメールで予約につながることもあります。連絡先を載せていたとしても、分かりにくい場所にあったら何の意味もありません。目立つような配置をすることが大事です。連絡先は画面右上と、左下に設定することが可能です。

まずは問い合わせフォームを用意する

メールでの問い合わせも受け付ける場合は、問い合わせフォームを用意します。連絡先は住所と電話番号だけでいいという場合は、この項目を飛ばしていただいてかまいません。

プログラミングで作っていくのは初心者向けではないので、プラグインを使って簡単にしていきます。

Contact Form 7をインストールする。

 

○WordPress管理画面のプラグインにカーソルを合わせ、新規追加をクリックします。

○検索窓にContact Form 7と入力して検索する。

今すぐインストールをクリックします。

プラグインを有効化をクリックします。

○WordPressの管理画面左側にメールのアイコンが出てきました。ここからお問い合わせフォームを作っていきます。

○先ほど追加されたお問い合わせにカーソルを合わせ、コンタクトフォームをクリックします。

コンタクトフォーム1をクリックします。

○お名前、メールアドレス、メッセージ本文など基本的なものは始めから設定されていますが、追加したい場合は増やすことができます。ただ、項目が多いと面倒になって問い合わせが減る原因にもなりますので、項目は最小限を抜粋しておきます。

○チェックボックスは複数選択が可能なボタンです。例えば、興味のあるもの複数をチェックさせたり、資料請求で複数チェックさせたい場合ですね。ラジオボタンは1つしか選択できないボタンです。例えば、性別だったり、希望のプレゼントを一つ選んでくださいなどに使えますね。

チェックボックスとラジオボタンの設定方法を説明していきますが、方法は同じなので、ラジオボタンを例にとって説明します。

○挿入する部分にスペースを空けておきます。

ラジオボタンをクリックします。

○名前の部分は自動的に決まるので、入力する必要はありません。

○設定する選択肢を改行して入力していきます。

 

 

○名前に入力されているコードをコピーしておきます。

○入力したのはオプションの部分だけです。タグを挿入をクリックします。

 

○タグを挿入をクリックしたときに、黄色の部分のコードが入ってきますので、一段上に<p> 項目名 <br /> (項目名以外は半角で入力すること、<br />にはスペースが入っているので間違えないように。)黄色部分のお尻に</p>を入力します。

○上部にあるメールをクリックします。

○宛先に、問い合わせフォームのメールが送信されてくるメールアドレスを入力します。WordPressに登録したメールアドレスでもかまわない場合は自動的に入力されていますので、アドレスが間違いないか確認します。

○下にスクロールしていくと、メッセージ本文がありますので、先ほどコピーした(名前に入力されているコード)を貼りつけ [名前に入力されているコード] のように半角の[]で囲います。貼りつける場所は好きな場所でかまいません。

保存をクリックします。

○コンタクトフォーム1の下の方に薄くコードが表示されていますので、このコードをコピーします。

 

○WordPress管理画面から固定ページにカーソルを合わせ、新規追加をクリックします。

○タイトルは、「お問い合わせ」でも「お問い合わせフォーム」でも好きなものをどうぞ。

○パーマリンクをhttp://サイト名/contact/に変更しておきます。

○本文には、「ご質問やご要望は下記フォームからご連絡ください。」や「必須事項を記入の上、[送信]をクリックしてください。」など、ちょっとした説明を入力します。その下に先ほどコピーしたコードをはりつけます。

○画面右側にあるページ属性のテンプレートを「ページ下部問い合わせなし」か「Don`t show contact at the bottom of the page 」を選択します。

公開をクリックします。

○固定ページのURLをコピーしておきます。

○固定ページを表示するをクリックして、問い合わせフォームの全体を確認します。メールの送信テストを行って、正しく送信されているかも確認します。

スポンサーリンク

連絡先を設定する

今回もBizVektorを使って設定をしていきます。

○WordPressの管理画面から外観にカーソルを合わせ、テーマオプションをクリックします。

連絡先をクリックします。

○お問い合わせメッセージ、電話番号、受付時間を入力します。この3つはヘッダー(画面上部)右側に表示されます。

○フッター左下とフッターコピーライトに表示させるサイト名(あるいは企業名・店舗名・サービス名)を入力します。未記入の場合はサイト名が表示されます。

○住所を入力します。ここには住所だけでなく電話番号も入力しておくといいです。

○問い合わせページのURLに先ほどコピーした固定ページのURLを貼りつけます。URLは手入力でもできますが、入力ミスのないように気をつけます。

○変更を保存をクリックします。

○WordPress管理画面から外観にカーソルを合わせ、ウィジェットをクリックします。

○利用できるウィジェットの中に、「BizVektor_問い合わせボタン」がありますので、それを「サイドバー(トップページ)」にドラック&ドロップします。

○サイトを表示して、連絡先の内容がきちんと表示されているか確認します。

 

*テーマを変更すると、設定した連絡先が表示されなくなるので注意してください。

 

なんらかの問題で問い合わせボタンが表示できない場合には、あくまで一時的な処置になりますが、

○WordPress管理画面から外観にカーソルを合わせ、カスタマイズをクリックします。

○ウィジェットをクリックします。

○サイドバー(トップページ)をクリックします。

○ウィジェットを追加をクリックします。

○固定ページをクリックします。

○タイトル(お問い合わせとか)を入力します。入力がない場合には、固定ページと表示されます。

○保存して公開をクリックします。

問い合わせ先は、あまりコメントとか連絡とかしたくない場合は設定しなくてもいいでしょう。どのくらいネット上で繋がりたいか、で判断すればいいと思います。Google adSenseを申し込む場合には、設置が必要になってきます。

スポンサーリンク

co-da :種族  人科頑固族。メス。熊本在住アラフォー30代。5人家族。 誰とでもすぐ仲良くなれそうと言われるが、かなりの人見知り。人付き合いはとても苦手でなかなか打ち解けない。めだたないようにするのが好き。誰も見ていないところで頑張るのが好き。打たれ弱く、短気のダメダメ人間だが、鍛えれば人は伸びると信じて行動中。将来は子供に尊敬される人になる。2015年からミニマリストに憧れて、家をキレイにし始める。 趣味 : 美容、節約、未来を考える。 好きな言葉 : 信じれば道は開ける。 嫌いな言葉 : 無理だと思うよ、あきらめよう。