![](https://mik2062.jp/wp-content/uploads/2022/08/fbb78db025839258a0abd0d6100df36a-150x150.png)
WordPressのサイトに問い合わせフォームを設置したいです
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
WPFormsプラグインで問い合わせフォームを作る方法を説明します
WEBサイトの問い合わせフォームについて
WEBサイトに問い合わせフォームを設置すると以下のメリットがあります。
この記事では、プラグインWPFormsを使用してお問い合わせフォームを作成する方法を説明します。
WPFormsプラグインをインストール
WordPressの管理画面でプラグイン
ー新規追加
を開いて、キーワードにContact Form by WPForms
と入力して、検索結果からContact Form by WPForms
をインストールします。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-141-1024x509.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-141-1024x509.png)
インストールが完了すると 有効化ボタンが表示されるのでクリックします。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-142-1024x620.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-142-1024x620.png)
インストールして有効化すると、WordPressの管理画面にWPForms
のメニューが追加されます。その中の新規追加
をクリックします。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-141-1024x623.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-141-1024x623.jpg)
WPFormsでフォーム画面を作成する
WPFormsの開始画面が表示されるので「フォームを作成」をクリックします。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-143-1024x695.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-143-1024x695.png)
フォームの作成画面になるので、作成するフォームの名前を入力してテンプレートを選択します。
ここでは名前は「お問い合わせ」、テンプレートはSimple Contact Form
を選択しています。
![](https://mik2062.jp/wp-content/uploads/2024/01/image-26.png)
![](https://mik2062.jp/wp-content/uploads/2024/01/image-26.png)
「空白のフォーム」を選択してゼロからフォームを作成することもできますが、問い合わせフォームを作るのであれば、英語とはいえ「Simple Contact Form」を基に作成する方が簡単です。
選択したテンプレートからフォームが作成されます。
画面項目の設定
テンプレートの項目に加えて会社名
欄も設けたいので「単一行テキスト」フィールドをドラッグして先頭の位置に配置します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-147-1024x633.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-147-1024x633.png)
選択したテンプレートを基に作成されたフォームが表示されます。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-148-1024x635.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-148-1024x635.png)
配置したテキスト欄を選択して、画面左側のフィールド設定のラベル欄を会社名
に変えます。
![](https://mik2062.jp/wp-content/uploads/2024/01/image-27.png)
![](https://mik2062.jp/wp-content/uploads/2024/01/image-27.png)
次にその下のテキスト欄を選択して、同じようにラベルをお名前
に変更します。また、フォーマットをシンプル
へと変更します。
![](https://mik2062.jp/wp-content/uploads/2024/01/image-28.png)
![](https://mik2062.jp/wp-content/uploads/2024/01/image-28.png)
次のメールアドレス欄も同様に、ラベルをメールアドレス
へと変更します。
![](https://mik2062.jp/wp-content/uploads/2024/01/image-29.png)
![](https://mik2062.jp/wp-content/uploads/2024/01/image-29.png)
最後の入力欄も同じようにラベルをお問い合わせ内容
に変更します。
![](https://mik2062.jp/wp-content/uploads/2024/01/image-30.png)
![](https://mik2062.jp/wp-content/uploads/2024/01/image-30.png)
以上で画面項目の設定は完了です。
これまでの設定内容をまとめると以下になります。
項目 | 必須 | 入力タイプ |
---|---|---|
会社名 | NO | 単一行テキスト |
お名前 | YES | 名前[シンプル] |
メールアドレス | YES | メール |
お問い合わせ内容 | YES | 段落テキスト |
次に設定
ページへと移動して「送信」ボタンの文字を英語から変更します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-153-1024x634.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-153-1024x634.png)
フォーム編集は終わりましたので、ここでフォームを保存しておきます。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-154-1024x595.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-154-1024x595.png)
フォーム送信時の通知方法を設定する
次は、フォームが送信された時の通知方法を設定します。
通知
画面を開いてデフォルト通知
のスマートタグを表示
をクリックします。
![](https://mik2062.jp/wp-content/uploads/2024/01/image-31.png)
![](https://mik2062.jp/wp-content/uploads/2024/01/image-31.png)
「メールアドレス」欄がリストに表示されるので選択します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-156-1024x542.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-156-1024x542.png)
送信先メールアドレス欄には{field_id="1"},{admin_email}
と入力します。
![](https://mik2062.jp/wp-content/uploads/2022/07/image-283-1024x545.png)
![](https://mik2062.jp/wp-content/uploads/2022/07/image-283-1024x545.png)
フォームを送信した方にも送信されるのに合わせて、通知メールの件名などを編集します。
![](https://mik2062.jp/wp-content/uploads/2024/01/image-32.png)
![](https://mik2062.jp/wp-content/uploads/2024/01/image-32.png)
メールメッセージに最初からある{all_fields}
は全ての項目の入力内容を表示するためのもので、これが無いと入力内容の確認ができないので、必ず残すようにします。
フォーム送信完了後の動きを設定する
次に、送信後に表示される内容を設定するために確認
画面を開きます。
以下の3つから送信後の動作確認タイプ
を選択できます。
項目 | 説明 |
---|---|
メッセージ | 入力フォームのページのまま確認メッセージを表示(入力フォームは見えなくなる) |
ページを表示 | このサイト内の別ページに移動 |
URLに移動(リダイレクト) | 外部サイトのページに移動 |
![](https://mik2062.jp/wp-content/uploads/2022/06/image-223-1024x384.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-223-1024x384.jpg)
ここではメッセージを選択していますが、使い方に応じて変えてください。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-159-1024x750.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-159-1024x750.png)
メッセージの場合の表示は以下のようになります。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-223-1024x307.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-223-1024x307.png)
ページに配置する時に必要なショートコードをメモしておきます。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-224-1024x510.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-224-1024x510.png)
作成したフォームをページに配置する
作成したフォームをページに配置します。
WordPressの管理メニューで固定ページ
ー新規追加
を開きます。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-160-1024x562.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-160-1024x562.png)
ページにショートコード
のブロックを配置します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-161-1024x428.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-161-1024x428.png)
作成したフォームのショートコードを入力します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-163-1024x464.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-163-1024x464.png)
編集ページではショートコードが表示されているだけですが、ページのプレビューを開くと、ページにフォームが配置されています。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-164.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-164.png)
以上でお問い合わせフォームの設置は完了です。
![](https://mik2062.jp/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://mik2062.jp/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)