【Contact Form 7】WordPressで簡単に問い合わせフォームを作る

2021-02-18

この記事では「Contact Form 7」というプラグインを利用してお問い合わせフォームの作り方を解説します！

この記事をご覧くださったすべての人にとって有益な情報となりますように。

Contact Form 7とは

WordPressの初期機能ではお問い合わせフォームはついてないので自分で追加しなければいけませんが、、お問い合わせシステムを作成するには、HTMLやCSSといった専門的な知識を利用しないと作ることができません。
そこで重宝するのが「Contact Form 7」というプラグインです！

「Contact Form 7」にはこのようなメリットがあります。

プラグインのインストール方法が別の記事で解説しています！

「Contact Form 7」はこちら

POINT

有効化を忘れずに！

有効化するとこのようにWordPressのメニューに「お問い合わせ」が追加されます。

「お問い合わせ」→「コンタクトフォーム」
デフォルトで1つフォームがあります。
この「ショートコード」と言われるものをコピーします。

新規固定ページを作成してタイトルを「お問い合わせ」にして、
先程のショートコードを本文に貼り付けます。

これで完成！
デフォルトのままですが、これでフォームを実装することができました！

POINT

テスト登録をしてみましょう！
WordPressに設定しているメールアドレスに問い合わせ内容が届けば完成です！

いくら簡単に実装できると言っても、デフォルトのままではできることが制限されてしまいます。
扱っている商材や連絡方法によって、フォームでヒアリングしたい内容は変わりますので、今回は新しく作成してアレンジします！

「お問い合わせ」→「コンタクトフォーム」→「新規追加」

フォームの編集画面が表示されます。
この赤枠内の項目を設定することでフォームをアレンジできます！

下記の項目がありますので、使い方の似ているものごとに解説していきます！

テキスト	氏名など１行の短い文章に使います！
メールアドレス	「sample@sample.com」のようなメールアドレスの形式しか入力できません
URL	「https://sample.com/」のようなURLの形式しか入力できません
電話番号	数字しか入力できませんが文字数の制限はできません

以下オプションの解説です。

項目タイプ	必須項目にチェックを入れると、ここを入力しないと送信ができなくなる
デフォルト値	あらかじめ表示されている値を入力する。プレースホルダーと呼ばれるもの
Akismet	ここにチェックするとスパム送信を減らすことができます

指定した形式以外の入力で送信ボタンが押されるとこのように注意がでます。

その名の通り、数値の入力ボックスです。
テキストエリアの右側に矢印が表示され、上下にクリックでも数値を入力できます。

生年月日などの日付の入力に使用します。

POINT

挿入の時に「範囲」を決めておくと、指定した範囲内の日付しか入力できなくなる！

複数行の長文の入力に使用します。

１行に1項目を入力して挿入します。

オプション	メニューに表示する項目は１行に１つ入力します
複数選択を可能にする	デフォルトでは１つしか選択できませんが、複数選択できるようにする場合、ここにチェックをします
先頭に空の項目を挿入する	デフォルトの状態だと「空欄」が選択されている状態にします