ワードプレスでサイトを立ち上げたら必ず設置したいのが、お問い合わせフォーム。
定番のプラグインは『Contact Form 7』 ですが、
今回オススメする『WPForms Lite』は
より操作が感覚的にできるため、初心者にもおすすめです。
『WPForms Lite』の使い方、そしてこのプラグインを使ったお問い合わせフォーム(コンタクトフォーム)作成方法を解説します!
WordPressお問い合わせフォーム&ページ作成の概要
WordPressで作成するお問い合わせフォームは初心者にとってはややこしいポイント。
意味もわからず勧められるがままに作ることもできますが、
理解しておいたほうがすっきりするので、作り始める前に簡単に説明しておきますね!
![問い合わせページ作成の概念](https://rashiku-style.com/wp-content/uploads/2020/12/wpforms-lite16.jpg)
ワードプレスでは標準機能で問い合わせフォームを作ることができません。
なのでプラグインを使う必要があります。
プラグインで作った「フォーム」は機能であってページではありません。
問い合わせページとしてサイトに表示させるため、固定ページに埋め込みます。
この二段階が作業として必要ということを頭に入れて、では実践!
WPForms Liteをインストール&有効化
まずはプラグインをインストールします。
問い合わせフォームを作成するおすすめプラグインは『WPForms Lite』。
コードを理解していなくても、操作が直感的でサクサク問い合わせフォームを作れます。
もちろん日本語も対応!
![プラグインWPForms-Liteのインストール方法](https://rashiku-style.com/wp-content/uploads/2020/12/wpforms-lite1.jpg)
- ワードプレスの管理画面から
[プラグイン]の[新規追加]画面を開きます。 - 検索窓で「WPForms Lite」と入力。
- クマさんが目印のプラグインを[今すぐインストール]
そして[有効化]します。
WPForms LiteでreCAPTCHAの設定をする
問い合わせフォームを作る前に、セキュリティの設定をします。
WPForms LiteはreCaptchaと連携してセキュリティ機能を加えることができます。
まだreCAPTCHAの設定ができていない方は、こちらの記事をご参考ください。
![](https://rashiku-style.com/wp-content/uploads/2020/12/invisible-recaptcha-main-image.jpg)
reCaptchaの設定はWordPress管理画面の[WPForms]→[設定]から行います。
![プラグインWPForms-LiteでreCaptchaの設定方法](https://rashiku-style.com/wp-content/uploads/2020/12/wpforms-lite2.jpg)
設定画面でメニューから[CAPTCHA]を選択。
![プラグインWPForms-LiteでreCaptchaの設定方法](https://rashiku-style.com/wp-content/uploads/2020/12/recaptcha9.jpg)
- タイプ
[reCAPTCHA v3]を選択 - サイトキー
- シークレットキー
②③はGoogle reCaptchaでサイト登録した際に取得したものを入力。
Admin Consoleからも確認できます。 - 設定を保存!
WPForms Liteで問い合わせフォームを作成する
WPForms Liteを使ったお問い合わせフォーム作成&設置方法は
説明書が不要なくらい簡単にできてしまうのでですが
より分かりやすくなるよう、説明します!
![プラグインWPForms-Liteで問い合わせフォームを作成](https://rashiku-style.com/wp-content/uploads/2020/12/wpforms-lite3.jpg)
WordPress管理画面のメニュー[WPForms]→[新規追加]を選択。
![プラグインWPForms-Liteで問い合わせフォームを作成](https://rashiku-style.com/wp-content/uploads/2020/12/wpforms-lite4.jpg)
開いた時の画面はこんな感じ。まだ何もありません。
![プラグインWPForms-Lite空のフォーム](https://rashiku-style.com/wp-content/uploads/2020/12/wpforms-lite7.jpg)
フィールドから適当な項目をクリックorドラッグしてフォームに追加します。
![プラグインWPForms-Lite空のフォームに項目を追加](https://rashiku-style.com/wp-content/uploads/2020/12/wpforms-lite8.jpg)
項目名の変更などは、項目を選択した状態でフィールドオプションを開きます。
必須入力設定もここでできます。
![プラグインWPForms-Lite項目の編集](https://rashiku-style.com/wp-content/uploads/2020/12/wpforms-lite9.jpg)
順序の入れ替えもドラッグ&ドロップで感覚的にでき便利ですね^^
こんな感じで作ってみました。
![プラグインWPForms-Liteで問い合わせフォームを作成](https://rashiku-style.com/wp-content/uploads/2020/12/wpforms-lite6.jpg)
- 名前
[名前]シンプルフォーマットに変更 - メール
[メール]確認メールを有効化に変更 - 題名
[一行のテキスト入力] - メッセージ本文
[段落テキスト] - reCAPTCHA
[reCAPTCHA]を有効化
最後に保存を忘れずに!
通知先のメールアドレスや問い合わせ送信時の確認メッセージは[設定]から行えますが、
デフォルトで十分なのでここでは触れないでおきます。
フォームが保存できたら、この画面は閉じます。
固定ページに問い合わせフォームを埋め込む
問い合わせフォームは、作っただけではWEBページとして表示されません。
お問い合わせページを固定ページで作成し、フォームを貼り付ける作業を行います。
![問い合わせフォームのショートコード](https://rashiku-style.com/wp-content/uploads/2020/12/wpforms-lite12.jpg)
問い合わせフォームの貼り付けはショートコードで行います。
WPFormsの[すべてのフォーム]から、先ほど作ったお問い合わせフォームのショートコードをコピーします。
[固定ページ]→[新規作成]で新しいページを作ります。
![WPFormsのショートコード貼り付けで問い合わせページ作成](https://rashiku-style.com/wp-content/uploads/2020/12/wpforms-lite13.jpg)
タイトルを「お問い合わせ」など好きに設定し、
本文に先ほどのショートコードを貼り付けます。
そして[公開]で完成!
メニューに問い合わせページを追加する
最後の作業です!
作ったお問い合わせページはどこかにリンクを付けないと、誰もたどり着けません。
ページトップのグローバルメニューに追加しましょう。
[外観]→[メニュー]を開きます。
![メニューに問い合わせページを追加する方法](https://rashiku-style.com/wp-content/uploads/2020/12/wpforms-lite15.jpg)
メニュー項目を固定ページから追加します。
- お問い合わせにチェック
- メニューに追加
- メニュー構造にお問い合わせが追加されたらメニューを保存
できました!!
問い合わせがメニューに追加されているか、
問い合わせページが正常に機能するかテストして完了!お疲れ様です!!!!
![](https://rashiku-style.com/wp-content/uploads/2020/12/20201208_main-image.jpg)