はじめに
コーポレートサイトやランディングページなど、多くのサイトの目的やサイトにある機能として「お問い合わせ用のフォーム」というのがあります。
今回は、お問い合わせフォームをWordPressのプラグインを使用して実装する方法を解説していきます。
プラグインを使ってフォーム機能を実装する理由
お問い合わせなどのフォームを作成する際には、次のようにいくつかやり方があります。
- GoogleFormなどの外部サービスを利用する
- PHPなどのプログラムを自分で記述して作成する
- WordPressのプラグインを使用する
などなど、いろいろなやり方があります。
それぞれメリットデメリットがありますが、WordPressのプラグインを利用する特性として、次の３つが挙げられます。
- セキュリティ面がある程度保障されている
- 難易度が比較的低い
- ただし、カスタマイズ性が下がる
フォームには個人情報を入力することが多いですが、慣れていない人がフォームを自作するとセキュリティ周りに不安を抱えることになります。その点、プラグインを利用すれば、対策されていることが基本ですので、安心できます。
GoogleFormなどの外部サービスを利用するのも手ですが、外部サービスがダウンした時に影響を受けるリスクも抱えることになります。（2021年12月にAWSという有名なサービスがダウンして、多くの被害が出ました。）
その点を踏まえると、フォームを実装する選択肢の一つとして、WordPressのプラグインを利用するというのは有効な選択肢と言えます。
ContactForm7を使う
今回はフォームのプラグインとして「ContactForm7」というものを使っていきます。
ContactForm7は、日本語のフォーム作成プラグインです。有名で使いやすいプラグインのため、使用する際やエラーが発生したとき、カスタマイズをしたい時に多くの参考記事があります。
ContactForm7の基本的な使い方
まずは、CotactForm7の基本的な使い方から解説していきます。
CotactForm7をインストール・有効化する
サイドバーに現れる「お問い合わせ」を選択する
新規追加を選択する
コンタクトフォームの名前をつける
コードを記述する（※記述方法は後述します）
「保存」ボタンを選択する
ショートコードをコピーして、固定ページや投稿ページなどに貼り付ける
フォーム用のコードを書く
CotactForm7において、書き換える部分としては、
- ユーザーが入力する
input,textareaタグ - 送信ボタン（
inputタグ）
が主となります。
使用するエリアとして、次のボタンを使ってタグを書き換えていきます。
例えば、次のinputタグをCotactForm7用に書き換えていきます。
<input type="text" class="contact_form_input" />type属性に注目するとtype="text"となっているので、フォーム編集画面の「テキスト」というボタンを使います。
「テキスト」ボタンを選択する
入力欄の名前、クラス属性など必要な項目を入力する
※入力欄の名前は任意で、例えば「お名前」を入力する箇所なら「your-name」のようにする。
HTMLタグを、出力されたタグに置き換える
このようにして、各タグを書き換えていきます。
各種タグについてはこちらのサイトが参考になります。
さいごに
今回は、CotactForm7について扱ってきました。
冒頭でも触れた通り、さまざまなフォームの実装方法があり、それぞれ一長一短ですので、選択肢の一つとして、提案・使用ができると良いでしょう。
また、CotactForm7は他のプラグインと合わせることで、さらに拡張できたりもするので、必要に応じて調べてみても良いと思います。
