ワードプレスプラグインContact Form 7の項目を追加してみよう

ワードプレスプラグインContact Form 7の項目を追加してみよう
ワードプレスプラグインContact Form 7の項目を追加してみよう

ワードプレスプラグインContact Form 7の項目を追加してみよう

ワードプレスプラグインContact Form 7の項目を追加してみよう
最終更新日:2018.08.10

Contact Form 7はデフォルトの設定のままでも十分な機能を備えてはいますが、企業ページや店舗のページなどではその他にも必要な項目があると思います。

今回は以前このWordPressプラグインContact Form 7で問い合わせフォームを作る記事で紹介したワードプレスプラグイン「Contact Form 7」の項目の追加方法を紹介したいと思います。

一部HTMLタグを入力する必要があったりはしますが難しく考えずにすすめて行きましょう。

Contact Form 7の項目を追加する方法

管理メニューの「お問い合わせ」を選択し「新規追加」または以前作成したフォームの設定が画面を開いてください。

024
デフォルトの設定では「名前」「メールアドレス」「題名」「メッセージ本文」が配置されていると思います。
今回はここに「電話番号」の項目を追加していきます。

ワードプレスプラグインContact Form 7の項目を追加してみよう1

024
Contact Form 7は投稿や固定ページのエディタと似ているので初めて操作する人でも使いやすいと思います。
項目の追加方法は赤枠のボタンを押すことによって新たな項目の追加が行えます。さっそく「電話番号」を押してみましょう。

ワードプレスプラグインContact Form 7の項目を追加してみよう2

024
電話番号を押すと下記のような設定画面が開きます。重要なのは①と②の箇所です。今回はそのままで「タグを挿入」ボタンを押してみましょう。

ワードプレスプラグインContact Form 7の項目を追加してみよう3

項目タイプ

設置する項目を入力必須にするかどうかの設定です。チェックを入れると必須となり、フォーム入力時にチェックが付けられていない場合はフォームの送信が行えません。

メールタグ

メールタグといい、フォームを送信した際の通知用メールに使用したり、フォームを送信したユーザーに自動返信する際のメールに使用します。

024
タグを挿入するとこのように、任意の場所にタグが設置されます。

ワードプレスプラグインContact Form 7の項目を追加してみよう4

024
最上部の「お名前」と同じように電話番号とテキストとHTMLタグを入力し保存を押してContact Form 7を設置しているページを確認してみましょう。

ワードプレスプラグインContact Form 7の項目を追加してみよう5

これで電話番号の入力項目の追加は完了です。

しかしこのままでは入力項目の追加はできましたが、送信されるメールにはフォームに入力された情報は挿入されません。
024
タブメニューの「メール」を開いてメールタグの追加が必要になるんです。メールタブを開くと先程作成した電話番号のIDと同じタグが表示されているのがわかります。
このタグをコピーして任意の場所にペーストしましょう。

ワードプレスプラグインContact Form 7の項目を追加してみよう6

「追加ヘッダー」の下の「メッセージ本文」の箇所に電話番号で追加した時のメールタグを設置すれば、メールの送信時にフォームへ入力された番号が挿入されます。
この作業をしていなければメール本文には挿入されないので注意が必要です。

ワードプレスプラグインContact Form 7の項目を追加してみよう7

ワードプレスプラグインContact Form 7の項目を追加してみようまとめ

今回は電話番号の項目の追加方法を紹介していきましたがいかがでしたでしょうか。
少しHTMLタグを使用する箇所がありましたがそれもコピペで簡単にできるのでそこまで難しくはないと思います。

Contact Form 7で設置できる項目はまだまだあります。テスト用のフォームを作ってしまえばミスで保存してしまっても大丈夫なので、いろいろ試してみてください。

最後までお読みいただきありがとうございました。