【Contact Form 7】フォームをカスタマイズして設置する方法とは?

こんにちは、ヨッチ(@miraiyotch)です。

Contact Form 7を使っていて、フォームの項目をもっと増やしたいと思ったことはありませんか?
そんな時も、直感的に操作できるのがこのプラグインの良いところです。

この記事では、Contact Form 7でフォームをカスタマイズする方法を解説しています。

カスタマイズすることで、アンケート・申し込みフォームなども設置可能です。
自由度の高いフォーム作成ができるので、覚えておくと便利ですよ。

【Contact Form 7】フォームをカスタマイズする方法

コンタクトフォームをカスタマイズする際は、以下の2つのやり方があります。

  • コンタクトフォームを新規作成する
  • 既にあるコンタクトフォームを編集する

ここでは、新規作成する方法を説明していきます。

コンタクトフォームの新規作成

まずは、新しいコンタクトフォームを作成します。
「お問い合わせ」→「コンタクトフォーム」をクリックすると、フォーム一覧が表示されます。

「お問い合わせ」→「コンタクトフォーム」をクリック

画面上部にある「新規追加」をクリックすると、フォームの追加画面が表示されます。

ポイント

既にあるフォームを編集する場合は、一覧表示されているタイトルをクリックします。

「新規追加」をクリック

まずはフォームのタイトルを入力しましょう。
ここでは、「コンタクトフォーム 2」というタイトルにしました。

フォームのタイトルを入力する

ここからは、フォームの中身をカスタマイズしていきます。

コンタクトフォームをカスタマイズする

Contact Form 7では、HTMLとショートコードというものを使ってカスタマイズします。
HTMLの基本的な知識も必要なので、本などで軽く学んでおくとスムーズに編集できます。

基本的には、HTMLをベースとして、ショートコードで項目を追加します。
テンプレートでは、以下のような内容が表示されています。

コンタクトフォームのテンプレート

labelタグで囲まれていて、その中に項目のタイトル・ショートコードが書かれています。
タイトルが不要な場合は、ショートコードだけ入力すればOKです。

不要な項目は、labelタグごと削除します。
追加したい項目は、ショートコード一覧の中から選んで入力しましょう。

ショートコード一覧

項目ごとに、生成するショートコードに必要な情報を入力できます。
各情報を入力したら、「タグを挿入」をクリックすると追加されます。

各情報を入力したら「タグを挿入」をクリック

編集が完了したら、画面下の「保存」をクリックしましょう。
これでフォームのカスタマイズが完了しました!

フォームで使用できるタグまとめ

各項目の内容は、ここですべてリストでまとめました。

テキスト・メールアドレス・URL・電話番号
各項目の入力フォームを追加
見た目はほぼ同じ
項目ごとに分けて使う
数値
数値の入力フォームを追加
スピンボックス・スライダーから選択できる
数値の下限・上限を設定できる
日付
日付の入力フォームを追加
日付の下限・上限を設定できる
テキストエリア
テキストエリアを追加
長文を入力したいときに使用する
ドロップダウンメニュー
ドロップダウンメニューを追加
選択する項目が多いときに便利
チェックボックス
チェックボックスを追加
複数選択できる
ラジオボタン
ラジオボタンを追加
複数選択できない
承諾確認
内容に同意するか確認ボックスを表示できる
クイズ
スパム対策のクイズを設置できる
Google reCAPTCHAを導入すれば不要
ファイル
ファイルの添付ボタンを追加
ファイル形式・サイズ上限を設定できる
送信ボタン
フォームの送信ボタンを追加

これだけの要素があれば、アンケート・登録・申し込みなどのフォームも作成できます。
かなり自由度が高いので、いろいろ試しながら使ってみましょう!

「メール・メッセージ・その他の設定」タブについて

フォーム以外のタブでは、さらに細かい動作を設定できます。

「メール・メッセージ・その他の設定」タブ

わかりやすくまとめると、こんな感じです。

メール
送信先・送信元・題名・メッセージ本文などを編集できる
「メール(2)」を有効にすれば、自動返信メールも作成可能
メッセージ
メール送信完了・エラーなどのメッセージを編集できる
その他の設定
カスタマイズ用のコードを入力できる
基本的には、空白のままでOK

通常の動作で問題なければ、特に変更しなくても大丈夫です。
より細かくカスタマイズしたいときだけ、設定を変更しましょう。

【まとめ】Contact Form 7はカスタマイズの自由度が高い

ここまで解説してきたとおり、Contact Form 7はカスタマイズの自由度が高いです。

設定しないまま簡単に使うこともできるし、より細かな動作を設定することもできます。
さらに、他のプラグインと連携するのも得意です。

WordPressのお問い合わせといえば、まさに「Contact Form 7」が決定版といえます。
使い方さえ覚えてしまえば、このプラグインだけで十分すぎるくらい快適ですよ。

ヨッチヨッチ

僕もブログを開設したら真っ先に入れてるよ。

太陽太陽

そんなに使いやすいんだねー。

Googleフォームを埋め込む方法もありますが、手軽さを考えればプラグインに軍配が上がります。
最初に導入するお問い合わせフォームとして、良かったらContact Form 7を試してみませんか?