ワードプレスでお問い合わせフォームを設置する方法【初心者にもわかりやすく】

カフェオーナーさんカフェオーナーさん

お店のサイトにお問い合わせフォームを作りたいんですが、
どうやったらいいんですか?教えてください。

サクラチカサクラチカ

Contact Form 7」というプラグインを使えばカンタンに設置できますよ。

特に難しい専門知識など必要なくて、

初心者でもカンタンお問い合わせフォーム(メールフォーム)が作成→設置ができます。

 

Contact Form 7とは

「Contact Form 7」でWordPressにお問い合わせメールフォームを設置するやり方を解説します

Contact Form 7」は、お問い合わせのメールフォームを作成できる日本製のプラグインです。

無料で利用できるし、日本語でわかりやすいので多くの利用者がいます。

(アプリは基本的に英語のものが多く、日本語対応されているのものとされていないものがあります。)

サクラチカサクラチカ

何も難しい操作はいらないので、初心者さんにぜひ使ってもらいたいです。

 

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

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

WordPressの管理画面(ダッシュポート)の左側の黒枠の中から「プラグイン」を見つけてください。

コンセントプラグの形のアイコンが目印です。

この中の項目から「新規追加」をクリックします。

 

「Contact Form 7」は無料でお問い合わせフォームが設置できるプラグインです

プラグイン追加画面になったら、右上のキーワード検索ボックスに「Contact Form 7」(←これをこのままコピペしてください。)と入力します。

いますぐインストール」のボタンをクリックします。

 

「Contact Form 7」のインストールと有効化

インストールが完了すると、ボタンが「有効化」という青色のものに変わるので、これをクリックします。

 

Contact Form 7でお問い合わせフォームを作成する方法

サクラチカサクラチカ

では、さっそくお問い合わせフォームを作成していきましょう。

「Contact Form 7」の使い方

プラグインを有効化すると、サイドバー(左側の黒枠)に「お問い合わせ」という項目が追加されるので、

お問い合わせ」→「新規追加」をクリックします。

 

コンタクトフォームに題名をつける

コンタクトフォームにはお問い合わせなどカンタンですぐにわかる名前をつけましょう

「コンタクトフォームを追加」という画面が出てきます。

まずは、一番上の空欄にお問い合わせフォームのタイトル(名前)をつけましょう。

サクラチカサクラチカ

シンプルに日本語でメール、お問い合わせ、などで良いと思います。
わかりやすい事が一番大事です。

 

コンタクトフォームの設定は基本デフォルトで間に合います

フォーム」「メール」「メッセージ」「その他設定」というのがあります。

 

最初は「フォーム」のタブが開いている状態になっています。

このまま特に何もいじらなくてもOKだと思います。

デフォルトで設定されているもの
  • 名前
  • メールアドレス
  • 題名
  • メッセージ本文

この4項目があれば大抵は事足りるのではないでしょうか。

電話番号、住所、なども加えることができますので、それは別の記事でやり方を説明しようと思います。

(初心者さんには少し難しいと思います。)

 

メールの設定

コンタクトフォームのメールアドレスは間違いの無いようにコピぺしましょう

次に「メール」タブをクリックします。

ここに、お問い合わせフォームが届いて欲しいメールアドレスを登録します。

初期設定では、WordPressをインストールする時に登録したアドレスが表示されているはずです。

このままでもOKですし、別のメールアドレスを使いたい場合はそちらを入力してください。

 

「Contact Form 7」でコンタクトフォームを設置するやり方の解説

メッセージ」と「その他の設定」は特に設定を変える必要はありません。

 

「Contact Form 7」で作ったコンタクトフォームのショートコードをコピーしてメモ帳に保存しましょう

サクラチカサクラチカ

これでコンタクトフォーム(お問合せフォーム)の「コード」ができあがりました。

 

青い枠で囲まれた文字列が「コード」です。

コピーしてメモ帳に貼り付けておきましょう。

 

Windowsのメモ帳アプリについてまとめた記事です。

↓ ↓ ↓ ↓

 

固定ページ(お問い合わせフォームの置き場所)を作成する

サクラチカサクラチカ

お問い合わせフォームのコードができたら、次に固定ページを作ってそこにコードを貼り付けます。

 

固定ページにお問い合わせフォームを設置します

左側のサイドバーにある「固定ページ」→「新規追加」をクリックします。

 

固定ページは投稿ページとほぼ同じ作りになっています。更新されていかないのが特徴です。

 

これでプレビュー画面を確認します。

 

「Contact Form 7」で作ったお問い合わせフォーム

このようにお問い合わせフォームが表示されていればOKです。

 

「Contact Form 7」で作ったコンタクトフォームを固定ページに設置して公開します

これで「公開」ボタンをクリックすれば、お問い合わせフォームのページが完成します。

しかし!

固定ページで作った記事は、そのままだとサイト上に表示されません。

なので、

このお問い合わせフォームのページのURLをコピーしてサイトの上に表示させましょう。

 

サイト上にお問い合わせページのリンクを設置する

サクラチカサクラチカ

固定ページはトップページにリンクを貼らないとサイト上に表示されません。

「Contact Form 7」で作ったお問い合わせフォームをグローバルメニューとフッターにに設置する方法

お問い合わせフォームを置く場所として一般的なのは、

  • グローバルメニュー
  • フッター

この2つです。

 

賢威8でグローバルメニューにお問い合わせフォームを設置する

賢威8でお問い合わせフォームをグローバルメニューに設置する方法

 

賢威8でグローバルメニューの設置する方法についてはコチラの記事にまとめました。

↓    ↓    ↓    ↓

 

賢威8でフッターにお問い合わせフォームを設置する

賢威8でフッターにお問い合わせフォームを置く方法

 

フッターは意外と「見られている場所」なので、特に見て(読んで)もらいたいコンテンツや、お問い合わせフォーム、

お店のアクセス方法などを設置します。

 

サクラチカサクラチカ

賢威8でフッターにお問い合わせフォームを設置する方法を動画、画像&文字でまとめました。
動画を見るのが一番わかりやすいと思いますが、
再生できない環境にいる人は画像と文章を読んでくださいね。

※動画は音声が出ますので注意してください。

 

動画その1

↓    ↓    ↓    ↓

 

動画その2

↓    ↓    ↓    ↓
動画を見られない人はコチラを読んでください。

↓    ↓    ↓    ↓

フッターにコンテンツを入れるには、外観→ウィジェットをクリックします

 

WordPress管理画面(ダッシュポート)から「外観」→「ウィジェット」を選びます。

サクラチカサクラチカ

ウィジェット」って何だ?と思うかもですが、「そういう名前なんだな」でOKです。使っているうちに理解できます。基本的にパソコンやWeb関連は専門用語のせいで難しく感じるけど、やってみると単純な事が多いです。

 

賢威8でフッターはウィジェットで管理します

 

賢威8のウィジェット管理画面が出てきます。

右側の方に「フッター1」「フッター2」「フッター3」というのがありますね。

 

賢威8のフッターはデフォルトで3つ用意されています

フッターとはサイトを一番下までスクロールすると見える部分です。

左から「フッター1」「フッター2」「フッター3」と並んでいます。

 

フッターにテキストウィジェットをドラッグ&ドロップします

 

左下にある「テキスト」というウィジェットをフッターにドラッグ&ドロップで移動させます。

1でも2でも3でもお好みのところでOKです。(後から直せます)

サクラチカサクラチカ

この流れは上にある動画で見てもらった方がわかりやすいです。音声が出せない場所ならイヤホンを付けて見てください。

 

フッターにテキストウィジェットが入ったら右側にある三角をクリック

フッターにテキスト(という名のウィジェット)が入りました。

テキストの右横にある逆三角形のマークをクリックしてください。

 

フッターにテキストとテキストリンクが設置できます

鎖マークのアイコンにマウスのポインタを当ててください。

 

リンクの挿入編集ができる鎖のアイコンをクリックします

「リンクの挿入/編集」という文字が出てくるのでクリックしてください。

 

お問い合わせフォームを設置した固定ページのURLを貼る

お問い合わせフォームを設置した固定ページのURLを貼り付けます。

 

サクラチカサクラチカ

URLのコピーは右クリックでカンタンにできます。

 

URLのコピーは右クリックでカンタンにできる

URLにマウスのポインタ(矢印)を当てて、右クリックしてください。

 

右クリックでリンクをコピーを選ぶ

色々な項目が出てきます。中から「リンクをコピー」を選んでクリックしてください。

これでURLがコピーできました。

マウスでなくノートパソコンのタッチパッドを使っている場合は、

↓    ↓    ↓    ↓

タッチパッドで右クリックする方法がわからない

 

右下をクリック、もしくは2本指でどこで場所はどこでもいいのでクリック、この二つの方法で行います。

(二本指でクリックが使えるのは最近のWindows10のパソコンです。古いノートPCだとできないかもです。)

 

URLを貼ったら歯車アイコンをクリックする

先ほどの「リンクの挿入/編集」にコピーしたURLを貼り付けます。

(右クリックで「ペースト(貼り付け)」の項目を選んでください。)

 

URLを貼り付けたら、右にある歯車の形のアイコンをクリックします。

↓    ↓    ↓    ↓

リンクの文字を決める

この画面が出てくるので、

「リンクの文字列」という部分に日本語で「お問い合わせ」や「メールする」など、

お問い合わせフォームであることがわかりやすい文字を記入しましょう。

入力が完了したら、

右下にある「更新」の青いボタンをクリックして下さい。

 

フッターにテキストリンクが作れました

「お問い合わせ」という文字にお問い合わせフォームのリンクが貼られた状態になります。

左下にある「完了」という青い文字をクリックしましょう。

 

サクラチカサクラチカ

これでお問い合わせページのリンクがフッターに設置できました。

 

フッターにお問い合わせフォームが設置できました

実際にフッターにお問い合わせフォームが設置できているか、自分のサイトを表示させて確認しましょう。

図は「フッター3」に設置した図です。

 

※お問い合わせフォーム以外をフッターに設置していない状態だと、

フッターにお問いわせフォームを置く方法がわからない

「フッター2」でも「フッター3」でも一番左端に設置されます。

後から「フッター2」「フッター3」に何かコンテンツを入れるとお問い合わせフォームは右端に移動します。

 

これでお問い合わせフォームの設置が完了しました。

 

お問い合わせフォームが実際に使えるか確認しましょう

サクラチカサクラチカ

設置が完了したら、実際に使えるかの確認も忘れずに行いましょう。

自分でお問い合わせフォームに実際に入力して、登録したメールアドレス宛に届くかどうか確認の作業を必ず行って下さい。

無事にメールが届けば成功です。

届かない場合はメールアドレスの貼り間違いの可能性があるので、よく確認して直して下さいね。

サクラチカサクラチカ

長い時間の作業お疲れさまでした。

 

コチラの記事も合わせて読んでんでくださいね。

↓    ↓    ↓    ↓

 

この記事が役に立ったらソーシャルメディアで共有してくださいね