※このブログはアフィリエイト広告を利用しています
こんにちは！キャメルコードブログのしゅんです^^
今回の記事では、プラグイン「ContactForm7」を使ってお問い合わせフォームを作る方法について解説します。
お問い合わせフォームはすべてのサイトで必ずしも設置するものではありませんが、作り方は知っておきましょう。
それほど難しい内容ではないので、ぜひ最後まで読んで理解していただければと思います^^
- ContactForm7を使ってお問い合わせフォームを作ることができる
- reCAPCHAを設置してセキュリティ対策ができる
ContactForm7の導入
ContactForm7はお問い合わせフォームを作ることができるWordPressのプラグインです。
とても簡単に導入できます^^
まずはサイドバーのプラグインから「ContactForm7」をインストールします。
「有効化」をクリックしましょう。これで導入できました。
お問い合わせフォームの設置
まずは固定ページに「お問い合わせページ」を作っておきましょう。
プラグインを有効化すると、サイドバーに「お問い合わせ」という項目が出てきます。
デフォルトでは「コンタクトフォーム1」となっています。
任意の名前に変更しましょう。今回はお問い合わせとしておきます^^
ショートコードをコピーします。
コピーしたショートコードを先程作った「お問い合わせページ」に貼り付けます。そのまま貼り付ければOKです。
下のようなシンプルなフォームが設置できているかと思います^^
まずはここまでの作り方が理解できればOKです^^
これだと味気ないので、実案件では独自のHTMLを組んでデザインを整えていくイメージです。
このあたりの詳しい話は長くなるので、また別の記事で解説をしていくのでお楽しみに^^
テンプレートから読み込んでみよう
お問い合わせフォームをテンプレートファイルから読み込む方法についても学んでいきましょう。
前述のように、管理画面にショートコードを貼り付けてお問い合わせフォームを作ることもできますが、テンプレートからショートコードを読み込む方法もあるので、そのやり方について解説をしていきます。
現在のお問い合わせページのスラッグは「contact」なので、page-contact.phpを作っておきましょう。
まずは管理画面に貼り付けたときと同様に、ショートコードをコピーします。
page-contact.phpにショートコードを読み込むためのコードを書いていきます。
ショートコードを読み込むには、do_shortcode()という関数を使います。
以下のように、do_shortcode()の中にコピーしたショートコードを貼り付けます。
これでショートコードが読み込まれます。do_shortcode()はショートコードを呼び出すだけなので、do_shortcode()の前にechoを付けて出力しましょう。
これで完了です。簡単ですね^^
reCAPTCHAを導入しよう
お問い合わせフォームを作成したら、reCAPTCHAを導入してセキュリティ対策を行っていきます。
reCAPTCHAはグーグルが提供するセキュリティ保護サービスで、スパムメールをブロックしてくれたり、不正なユーザーから保護してくれます。
ContactForm7でお問い合わせフォームを設置したときは必ず設定しておきましょう。
サイドバー「お問い合わせ」のインテグレーションをクリックします。
「インテグレーションのセットアップ」をクリックします。
以下のような画面になるので、リンクをクリックしてreCAPTCHAのサイトを開きます。
「使ってみる」をクリック！
以下のような登録画面になるので、以下のように入力していきます。
キャメルコードブログであればドメインはこのようになりますね^^
最後に「送信」をクリックすると、サイトキーとシークレットキーが出てくるのでコピーします。
そして再度「インテグレーションのセットアップ」を開きます。
コピーしたサイトキーとシークレットキーを貼り付けて、「変更を保存」します。
サイトを開いて以下のようなreCAPTCHAのバッジが表示されていればOKです！
まとめ：お問い合わせフォームを作ってみよう！
いかがでしたか？今回はContactForm7を使ってお問い合わせフォームを作る方法について解説をしてきました！
インプットして終わりではなく、学んだことをアウトプットして自分でやってみることがとても大切です。
今回の記事を見ながら、実際にWordPressでお問い合わせフォームを作ってみましょう！
WordPressの構築方法についてはこちらの記事で書いてるので、まだWordPressを使える環境が整っていない人は今すぐLocalを使って環境を整えましょう！
今回は以下のことを学びました^^
- ContactForm7を使ってお問い合わせフォームを作れる
- reCAPCHAを設置してセキュリティ対策ができる
実案件ではもう少し工夫をしていく必要があるので、また別の記事で解説をするのでお楽しみに^^
それではまた！！
