WordPress（ワードプレス）のコンタクトフォームとしては、「Contact Form 7」が有名ですが、ワードプレス公式プラグインのJetpackにもコンタクトフォーム機能があります。今回はその設置と設定方法について初心者向けにできるだけ図を使いながら簡単に解説したいと思います。※Jetpackのインストールについては下記記事をご覧ください。
ワードプレスに Jetpack のコンタクトフォームを設置・設定する方法 初心者図解
今回は固定ページに名称を「Contact」としてコンタクトフォームを設置・設定し、ヘッダーのグローバルメニューに設置することにします。
１．コンタクトフォームを設置する
 | 固定ページを新規追加し、ページのタイトルを「Contact」とします。 |
本文領域で「＋（ブロックの追加）」をクリックし、表示されるメニューからの下の方に
 | 「Jetpack」という項目があるので、それを選択し、さらに表示されるメニューから「Form」を選択します。 |
下記のようなFormの追加画面が表示されるので、「Email address」の枠に、送信先となるあなたのメールアドレスを入力し「Add form」をクリックします。
 | 「Email subject line」（メールの件名）は空欄にしておくと投稿またはページのタイトルが入力され送信されます。今回は作成した固定ページのタイトルを「Contact」としているので、それがメール送信時にセットされます。 |
下記のようにコンタクトフォームがページに追加されます。
 | デフォルトのままでは枠の表記が少しシンプルすぎるので変更したいところですが、とりあえず完成したので、先にメニューに設置することにしましょう。 |
作成したページを開きなおした際には再度「メールアドレス」の設定画面がまず表示されます。「Add form」を再度クリックすると編集した画面が表示されます。
２．Contactフォームをヘッダーのメニューに設置する
 | ワードプレスのダッシュボードの「外観」＞「メニュー」をクリックします。 |
 | 「既に作成されているメニューに先ほど作成した固定ページ「Contact」を追加します。（※ヘッダーメニューの作成方法を参照） |
メニュー構造に「Contact」が追加されるので、「メニュー設定」の「トップメニュー」にチェックをつけて、「メニューを保存」をクリックします。
下図のようにヘッダーメニューに「Contact」が追加されます。
コンタクトフォームの編集画面では英語で表記されていましたが、Webサイトで表示させると下記のように、表示した言語に合わせた表記に変更され表示されます。
 | サイトで内容を入力し「送信」をクリックすると、右記のようにメッセージが表示され、メールを送信できます。 |
以上でシンプルなものではありますが、サイトにコンタクトフォームを設置することができました。
以下では補足としてJetpackフォームの機能詳細を説明します。
３．Jetpackフォームの各機能
１）各機能の追加方法
 | Jetpackのフォームには左記のように「Text、Name、Email、Website、Date Picker、Telephone、Message、Checkbox、Checkbox Group、Radio、Select」の各機能があります。 |
 | 各機能を設置するにはフォーム内の「ブロックの追加」をクリックします。 |
あるいは下図のように、すでに設置されているブロックの左上の「ブロックタイプまたはスタイルを変更」をクリックします。
２）各ブロックを入力必須とする
各機能ブロックの入力を必須とするには、下記のように、設置した各ブロックの「Required」をクリックして、スイッチを入れます。
３）各ブロックの入力サンプルの設定
下図の左側のように、設定画面で各機能の枠にテキストを入力すると、サイト上では左側のようにボックス内に入力サンプルとして表示させることができます。
 |  |
４）各ブロックの項目名称の変更
各ブロックの項目名をクリックすると編集可能です。日本語で変更した内容で表示させることができます。
５）各機能の詳細
下記の各機能は左をワードプレスの設定画面、右をサイトでの表示内容としています。
（１）Text
Textは１行のテキスト入力枠を設置します。送信されるメール本文に「テキスト：・・・」として表示されます。
 |  |
（２）Name
Nameは名前の入力枠を設置します。送信されるメールの氏名として利用され、本文にも「名前：・・・」として表示されます。
 |  |
（３）Email
Emailはメールアドレスの入力枠を設置します。送信されるメールの本文に「メールアドレス：・・・」として表示されます。
| |
（４）Website
Websiteはサイトアドレスの入力枠を設置します。 送信されるメールの本文に「サイト：・・・」として表示されます。
 |  |
（５）Date Picker
Date Pickerは日付の入力枠を設置します。設置される入力枠では日付をカレンダー表示にて選択できます。送信されるメールの本文に「日付：・・・」として表示されます。
 |  |
（６）Telephone
Telephoneは電話番号の入力枠を設置します。送信されるメールの本文に「電話：・・・」として表示されます。
 |  |
（７）Message
Messageはメッセージの入力枠を設置します。送信されるメールの本文に「メッセージ：・・・」として表示されます。
 |  |
（８）Checkbox
Checkboxはチェックボックスの入力枠を設置します。チェックボックスの「Write label…」に項目名を入力して設置します。送信されるメールの本文に「項目名：はい」として表示されます。
 |  |
（９）Checkbox Group
Checkbox Groupはチェックボックスグループのボックスを設置します。送信されるメールの本文に「複数選択：○○○,○○○」として表示されます。「Add option」をクリックすることで、複数のチェックボックスを表示させられます。
 |  |
（10）Radio
Radioはラジオボタングループのボックスを設置します。送信されるメールの本文に「一つ選択：○○○」として表示されます。「Add option」をクリックすることで、複数のラジオボタンを表示させられます。
 |  |
（11）Select
Selectはセレクトボックスを設置します。送信されるメールの本文に「一つ選択：○○○」として表示されます。「Add option」をクリックすることで、複数のセレクト条件を表示させられます。
 |  |
６）フィードバック（メールの記録）
 | フォームから送信されたメールは「フィードバック」に記録されます。ワードプレスのダッシュボードの「フィードバック」から表示できます。 |
４．普及しているContact Form 7とどちらが良いのか？
「Contact Form 7」は、Jetpackのコンタクトフォームより歴史があります。柔軟性があります。入力相手へのメール自動返信機能もあります。しかし、Jetpackはワードプレスとともに進化しています。どちらが優れているとはもう言えないでしょう。
 | 私としてはJetpackは必ず入れるので、それに付属しているなら使いましょう。必要十分な機能はあると思っています。 |
