Jetpack のコンタクトフォームをカスタマイズする方法(コンタクトフォーム挿入編)
あまりにも有名な 「Jetpack by WordPress.com」ですが、そのたくさんの機能の中に「コンタクトフォーム」の機能があることはあまり知られていません。
今回はそんな脚光を浴びていない「Jetpackのコンタクトフォーム」のカスタマイズ方法を紹介していきたいと思います。
そもそもJetpack コンタクトフォームとは
「Jetpack コンタクトフォーム」はJetpackのプラグインの中にある一つの機能です。では、「Contact Form 7」の違いはなんでしょうか。私としてはあまりないと思います。
しいていうならば、「Contact Form 7」には、コンタクトをとってきた人に自動で返信メールを送ることがあるのがよい面ではないかなと思います。でもそれ以外のことは「Jetpack コンタクトフォーム」でも同じように使えますし、何しろ新しくプラグインをインストールしないでいいというところが利点ではないかと思います。
コンタクトフォームの有効化
「Jetpack by WordPress.com」をインストールしていない方は是非ともインストールしていただいた方がいいと思います。詳しいインストール方法は、たくさんのサイトで紹介されているのでここでは割愛しますが、コンタクトフォームの有効化はちょっと一癖あるので、そこを紹介したいと思います。
まず、Jetpackの設定画面を探してもコンタクトフォームについての有効化の設定画面が出てきません。
有効化するにはちょっとした技を使わないといけません。まず、「Jetpack」の「設定」の一番下にある「Debug」と 書いてあるところをクリックします。
すると「Jetpack デバッグセンター」が開きます。そこの下の方にある「お使いのサイトで使用可能な Jetpack モジュールの全一覧にアクセスします。」をクリックします。
そうするとJetpackのすべての機能が出てきます。ここの「コンタクトフォーム」の欄が水色になっていなければ、「有効化」をクリックして有効にします。
これでコンタクトフォームを利用することができるようになりました。
コンタクトフォームの使い方
それでは、早速コンタクトフォームを使ってみましょう。コンタクトフォームはだいたい「固定ページ」で作られると思いますので、「固定ページ」の「新規追加」をクリックしてみましょう。
すると、「お問い合わせ(コンタクト)フォームを追加」という項目ができていると思います。
ここからはビジュアルモードで作業するのが何かと楽なので、ビジュアルモードで説明します。
まず、「お問い合わせフォームを追加」をクリックします。
すると、名前、メースアドレス、ウエブサイト、メッセージ、送信のフォームが挿入されます。
ここのフォームを変更することもできます。
フォーム上をクリックすると、
のボタンが表示されるので、鉛筆のマークをクリックします。
そうするとフォームを変更することができます。
それでは、もう少し詳しく見ていきましょう。
まず、上の方に「お問い合わせフォームの情報」があると思います。ここでは、お問い合わせがあったときにフォームから自分宛にメールを送信してくれます。(ちなみに送信アドレスは「wordpress@自分のサーバー名」です。)
フォームの情報には
- 「メールの件名はどのようにしますか ?」
- 「どのメールアドレスにフォームを送信しますか ? 」
の2つの欄がありますので、それぞれに記入していけばいいと思います。
私は、「メールの件名」には「HoBoFoToお問い合わせフォーム」、「メールアドレス」には普段使っているメールアドレスを入力しています。
記入が終わると次は、「お問い合わせフォームのフィールド」の編集です。ここでは「フォームのフィールド」を追加したり削除したり、移動させたりすることができます。
それぞれのフォームをドラッグすると順番を入れ替えることができますし、マークをクリックすると削除をすることができます。
また、下の方にある「フォームを追加」をクリックすると新しいフォームを追加することができます。
フィールドの種類は、
- 「テキスト」
- 「名前」
- 「メールアドレス」
- 「ウエブサイト」
- 「テキストエリア」
- 「チェックボックス」
- 「複数項目のあるチェックボックス」
- 「ドロップダウン」
- 「ラジオボタン」
- 「日付」
の10種類です。
さらに、そのフィールドが必須項目かどうかを決めることができます。この項目にチェックを入れると必ず入力しないといけないフィールドになります。
フォームが完成したら下にある「フォームを更新」を必ずクリックしましょう。でないと編集したフォームが変更されません。
これで一通りのフォームが完成しました。後はページを「公開」するとコンタクトフォームが完成します。
あまりにも長くなったので、今回はこれくらいにしておきます。次回はこのコンタクトフォームに色々とカスタマイズをしていこうと思います。