WordPressにお問合せフォームを簡単に設置できるプラグインは数多くありますが、個人的にはContact Form 7 (コンタクトフォーム7)が一番おすすめです。
その理由はおしゃれで機能的なレスポンシブデザインのお問合せフォームを作りたいと考えた時、装飾可能なプラグインはContact Form 7しかなかったからです。
初心者の方には優しくない。古臭いUIで他のお問い合わせフォームに劣っているContact Form 7ですが、フォーム部分をHTMLタグにて直接書き換えられる。細かくカスタマイズ出来るのは掛け替えのないメリットにもなります。
今回の記事では初心者の方がつまづきやすい。分かりづらい。悩みそうな基本的な使い方を解説し、他の記事にてスマホに完全対応したレスポンシブデザインのカスタマイズ方法を解説しますので、今回の記事では基本的な使い方をしっかりと覚えていきましょう。
Contact Form 7をインストール
先ずプラグインContact Form 7を検索してインストールしましょう。
Contact Form 7の設定画面へ
Contact Form 7をインストールするとサイドバーにお問い合わせのリンクが追加されますので、そちらをクリックして設定画面を開きましょう。
初期フォームを編集
上のメッセージボックスは非表示にして構いません。
必要なプラグインがあればご自身で好きなのを入れて構いませんが、後のカスタマイズ記事にておすすめプラグインを紹介しておりますので、そちらも参考にして下さい。
編集リンクまたはフォーム名をクリックしてコンタクトフォーム 1の編集画面に移動しましょう。
編集画面の説明
この画面にてお問い合わせフォームの表示部分をカスタマイズ出来ます。
メール
メールのタブではお問い合わせフォームの送信先や送信内容をカスタマイズできます。
また自動返信メールを行いたい場合はメール (2)を使用する必要があります。
その説明は別記事にて解説したいと思いますので記事完成までしばらくお待ち下さい。
メッセージ
このタブは問い合わせフォームで正常に問い合わせができた時、またはエラーが出た時に表示する文章をカスマイズ出来る項目です。
オリジナル性を出したい。文章が気になる方はお好きに変更して下さい。
その他の設定
お問合せフォームに特殊な動作を実行させる際に使用する項目です。
記入するコードは独自タグとなっておりacceptance_as_validation: onなど、特殊なコードとなりますので、意味が分からない人は触る必要はありません。
特殊なコードを知りたい。カスタム設定をしたい方は公式解説ページをご覧ください。
基本的にはフォームとメールの部分を連動してカスタマイズする必要があります。
しかし適当にカスタマイズしてしまうと正常にフォームが動かないというトラブルに見舞われるため、意味が分からないうちは分からないと開き直りましょう。
本記事では順番通りに作業すると問題ないように説明を心がけておりますので、分からない人ほど説明を読み飛ばさずに理解しながら編集作業を行って下さい。
基本的な編集作業
フォームに挿入した[]で囲まれたタグ[text* your-name autocomplete:name]のyour-nameがメールタブで使用できるタグになります。
上記のフォームでは以下のタグがメールタブで使用可能となります。
- youre-name
- your-email
- your-subject
- your-message
このタグはメールタブの方でも確認できます。
youre-nameやyour-emailにautocompleteの値が記載されていますよね。
これはフォームの自動補完機能です。
ブラウザの設定によっては、過去にユーザーが入力したデータを記憶し自動補完をすることが出来ます。
自分も使いたいと思う方は公式サイトのautocompleteの仕組みを一読してみると良いでしょう。
HTML属性のautocompleteをそもそも知らない。という方はMDNの解説ページをご覧ください。
メールタグの確認
一番上の項目に現在使用可能なタグ一覧が表示されています。
ここに書かれているタグを[]で囲みメールタブ内にて記載すると、問い合わせフォームに記載された内容に置換されます。
メールタグの記述場所
題名や追加ヘッダー、メッセージ本文などにメールタグが含まれているでしょう。
このタグが記載されている箇所が、問い合わせフォームから送信された内容に置換されます。
フォームにて記載していない_siteから始まる[_site_admin_email]などは特別なメールタグとして別途実装されているタグです。
実装されている特別なメールタグは公式サイトにて確認できますので、必要であれば使用してみると良いでしょう。
メールタグのエラー発生時の対処法
初期フォームではメールタグがyour-という接頭辞から全て始まります。
これを自分の覚えやすい、使いやすいメールタグに書き換えてみましょう。
今回の例では問い合わせの英語enquiry-に置換して問い合わせされた部分と分かるようにしてみます。
メールタグをenquiryに書き換え
yourの部分をenquiryに書き換えると一時的にエラーが発生します。
これはメールタブ内のReply-To:項目が正常に動かない、メールタグの書き換えによるエラーです。
メールタグの修正作業
追加ヘッダー項目のReply-To:に記載している[your-email]が存在しないメールタグのためエラーが発生しています。
存在しないメールタグを正しい[enquiry-email]に修正するとエラーが消えます。
修正すると直ぐにエラー文章が消えます。
一度保存をすると使用可能なメールタグが更新されます。
どの様なタグが使えるか確認しながら編集したい方は、一度保存してから作業すると良いでしょう。
フォームタグの新規追加方法
フォームタグを挿入したい箇所をクリックしてカーソルを選択状態にしておきましょう。
挿入したいフォームタグをクリックして生成画面を開きましょう。
生成画面がポップアップ画面で表示されます。
この画面の設定を修正しながらフォームタグを作成します。
この画面にて必要な項目を編集します。
今回の例ではテキストフォームを必須項目にし、名前をfuriganaに変更しました。
変更したフォームタグのプレビューは下のテキストボックスでリアルタイム確認できます。
作成したフォームタグに問題がなければ「タグを挿入」をクリックして編集作業を終えましょう。
最初に選択した場所にフォームタグが挿入されました。
この繰り返しで必要なフォームタグを挿入し、問い合わせフォームを完成させましょう。
フォームタグの細かい設定を確認したい方はフォームタグタイプの一覧をご確認下さい。
管理しやすいフォーム名に変更
自分が管理しやすいフォームタイトルに変更しておきましょう。
表には出力されないデータですので、どこに使っているのか判別しやすい名前にすると良いでしょう。
タイトルを変えて問題なければ、保存をクリックしてデータを更新しましょう。
無事データの更新が出来ましたら、上にコンタクトフォームが保存されました。と表示されます。
またショートコードの内部も新しいフォーム名に変更されているのが確認できます。
作成したフォームの挿入方法
無事問い合わせフォームが作成できましたら、記事や固定ページ内に挿入してみましょう。
ショートコードで挿入
コンタクトフォームの管理画面TOPにてショートコード一覧が確認できます。
コピーしたいショートコードをマウスでクリックすると選択可能状態になるため、簡単にショートコードをコピーすることが出来ます。
後は挿入したい場所にショートコードを貼り付ければ終了です。
フォームの編集画面上部からでもショートコードのコピーが可能です。
ショートコードは投稿記事や固定ページだけでなく、ウィジェットにも記載できるのがメリットでしょう。
例えばウィジェットでコンパクトな問い合わせフォームをサイドバーに設定したり、フッターに固定したりなど使い方は様々です。
ブロックエディタで挿入
Contact Form 7のブロックはウィジェット項目の中にあります。
ウィジェット項目の一番下にContact Form 7のブロックが追加されているので選択します。
プレビュー画面は無いので、気にせずそのまま記事内に挿入しましょう。
ブロックを挿入したら、コンタクトフォームを選択という項目があります。
このセレクトボックスの中から、挿入したいコンタクフォーム名を選びましょう。
コンタクトフォーム名の選択を終えましたら、Contact Form 7のブロック挿入は無事完了です。
あとがき
Contact Form 7の基本的な使い方、フォームの設定方法を初心者の方でも分かるように丁寧な説明を心がけました。画像もふんだんに使用したので、これで分からないことは無いはずです。
細かいカスタマイズをしたいとなれば、HTMLタグの知識やフォームタグのパラメーターを調べるなどの手間が掛かりますが、とりあえず最低限使えれば良いと言う方は、この記事の知識だけで十分です。
この基本的な知識を踏まえ、別記事にて紹介しているレスポンシブデザインのコードをコピペして自分好みの問い合わせフォームを作って頂ければなと思います。
コメント