お問い合わせフォームContact Form 7

WP情報
お問い合わせフォームContact Form 7

WordPressサイト自作の切っ掛けとして、お問合せ(専用)フォームの設置を挙げられる方は多いのではないでしょうか。

有名で完成度の高いプラグインとしてContact Form 7とTrust Formの二つがあると思います。(ダウンロード数で云うとまだ圧倒的にContact Form 7ですが)

好みの問題だと思うのですが、Trust Formは送信の前に確認ステップが存在すること、フォーム画面がビジュアルに設定可能である点が優れています。一方、Contact Form 7は、その人気がある故の情報量の多さとシンプルな設定、高い安定性が優位点です。

弊方がクライアント様にお勧めするのは、やはりネット上での情報量の多さからContact Form 7です。(Trust Formの確認ステップは魅力ですが)

そこで、今回はContact Form 7のご紹介。

Contact Form 7は意外とWordPressプラグインでは少数派の日本(人)製です。高い安定性の理由はそこにあるかもしれません。

form2

Contact Form 7をインストールして有効にすると、WordPress管理画面のメニューに「お問合せ」の項目が表示されます。その「お問合せ」の子メニューから”新規追加”を選択してクリックします。

form3

言語の選択画面が出ますから、日本語でよろしければそのまま”新規追加”を選択してクリックします。(新規追加毎に言語を選べます)

form4

フォームの設定画面が出ますから、先ずは”無題”と書かれている所にこのフォームの名前を記入します。記入したら”保存”ボタンをクリックします。

”保存”がされると先ほど名前を記入した欄の下に[ ]で囲まれたコードが現れます。これは後ほど使用します。

form5

次にフォーム自体の組み立てに入ります。

フォームの組み立ては簡単なHTMLと[ ]で囲まれたContact Form 7専用のコードで行います。

デフォルトで用意されているフォームでも十分使用できますが、追加項目が欲しい場合は右側の”タグの作成”ボタンをクリックします。メニューが開きますからその中から選びます。ここでは電話番号を選択します。

form6

電話番号の入力が必須である場合は”必須入力の項目ですか?”のチェックボックスにチェックを入れます。残りの記入欄はよく分からなければそのままで良いです。

次に、左の欄に行って、

<p>電話番号 (必須)<br />
[tel* tel-839]</p>

の記述を追加します。(<>は全角を使用しています)

[tel* tel-839]は右欄の”タグの作成”の”このコードをコピーして、左のフォーム内にペーストしてください。”の欄にあるものをそのままコピーして貼り付けたおまじないです。(お気付きだと思いますが、必須の場合は役割を示す表記にアスタリスク*が付きます)

form7

「メール」の設定はデフォルトで報告メール(サイトメールアドレスに対してお問合せフォームの内容が通知されます)が設定されています。

左の欄がアドレスやタイトルの設定です。アドレスが意図したものであることを確認してください。

また、[your-name]や[your-subject]などはフォームで使用した[ ]で囲まれたContact Form 7専用のコードから役割を示す表記(text*など)を削除したものです。

つまり、フォームのコードに記入された内容がコードを表す文字列([your-name]や[your-subject]など)に反映されるわけです。

先ほど、デフォルトのフォームに電話番号を追加しましたから右欄の”メッセージ本文”にその記述(電話番号:[tel-839])を追加します。

[ ]で囲まれたContact Form 7専用のコード以外は普通のHTMLですから、自由に報告メール本文を追加・修正してください。

form8

「メール」設定欄の下の「メール(2)」はお問い合わせフォームを送信した方へのサンキューメールの設定になります。必要なければこの欄はスキップです。

ここでは設定を行いますから、チェックボックスにチェックを入れます。

form9

作成の方法は先ほどの報告メールと同じですが、お客様へのサンキューメールですから、失礼の無い様に丁寧に仕上げます。

form10

最後に最上部に戻って”保存”ボタンをクリックして設定完了です。左側の[ ]で囲まれたコード(ショートコードと言います)をコピーしておきます。

form11

固定ページを新設して、編集のテキストモード(ビジュアルエディターではありません)にした上で先ほどコピーしたショートコードを貼り付けて更新します。

form12

表示を確認すると、はいお問合せフォームの出来上がり。

しかし、これで完成ではありません。

ご自分のスマホメールなどを使用してフォームの報告メール、サンキューメールが正しく送信されるかの確認を行ってください。

よくメーラーの迷惑フォルダーに配信されることがあるので届かない場合はご確認ください。

何回やっても、迷惑フォルダーを確認しても届かない場合は、フォームの設定記述が間違っていないか、メールサーバーとの関連付け(以前の記事で説明していますのでご参考にしてください)がなされているかの確認が必要です。

お試しください。

«
»
  • LINEで送る

音声ミュートを解除すると軽快な音楽が流れます (^^♪