WP Formsでお問い合わせフォームを作ってみた!

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 13 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

お問い合わせやアンケートと言えばフォームなのですが、 WordPressの中では多くの方が プラグインを使って作成しますね
その中でも操作が難しいなどの声が多く
今回は、海外でも多く使われているWP Formsを使ってフォームを作成してみようと思います。

wp forms
ドラッグアンドドロップだけで作れると評判ですが、実際にどうなのかやってみます。

 

目 次

WP Formsとは

プラグイン新規追加
WP Formsとは、ドラッグアンドドロップだけでフォームが作成できる プラグインです。
詳しくは下記の記事を参考にしてください。

WP Froms
【詳細】 WordPressの連絡フォームを作成するために開発者を雇う必要はないと思います。 それが、私たちがWPFormを構築した理由です...

 

設定

設定
7項目について設定がわかれています。
WP Formsすべて無料ではなく一部で有料部分があります。
正式にはWPForms Liteということになりますね
有料版は、Proに変わるくらいですが・・・
上記画像のタブではGDPRの設定くらいですね
GDPRとは

GDPR(General Data Protection Regulation:EU一般データ保護規則)は、EUにおける個人データ保護に関する法律です。1995年に施行された「Data Protection Directive 95(EUデータ保護指令)」(以下、「現行法」という)に代わる法規制として2016年4月に制定、2018年5月25日に施行されます。

これは WordPressの場合は、プライバシーポリシーに入れておくといいと思います。
そういう意味ではこの一般というタブはスルーしてOKですね。

メール

設定 メール
メールの設定の中にHTMLメールがあるのですが、正直お問い合わせフォームとかでHTMLメールが必要なのかという感じもします。
多くの方が今の4Gでの回線の状態で5Gを使い出す時代になればそれでも差し支えないと思いますが、まだまだ時期尚早かなって思いますね。
テキストメールで十分だと思ってます。
テキストメールを選択したらその他の設定って必要ないですよ
ユーザーが入力した値を送信するだけでHTMLメールって必要ないですね

reCAPTCHA

reCatcha
GoogleのreCAPTCHAがすべて WPForms 内でサポートされています。
reCAPTCHAは、Googleでまず設定しておく必要があります。

サイトキーとシークレットキーをコピペしないと動作しません。
v2 Checkbox reCAPTCHA
v2 Checkbox reCAPTCHAの場合に上記のようになります。

v2 Invisible reCAPTCHA
v2 Invisible reCAPTCHAの場合に上記のようになります。
v3 reCAPTCHAは、筆者もまだ見たことないですね
下記のサイトでは英語ですがGoogle翻訳などを使って参考にしてください。

reCAPTCHAサイトにreCAPTCHAを導入する
GoogleのreCAPTCHAを導入しているサイトあるけどどこで登録すればいいの? って質問が結構多いのですが・・・ 今回は、Google reCAPTCHA...

検証

検証
ここでは、エラーの時に表示されるメッセージを変更することができます。

連携

連携
Constant Contact、MailChimp、Zapier などの人気プロバイダとの統合を管理します。
こちらはあまりおすすめしないです。

アクセス

アクセス
アクセスでは、アカウントごとにアクセスできる機能を制限することが可能です。
1人で使っている方は、基本的に必要ないですね

その他

その他
こちらの設定も特に必要というわけでもないのでスルーしても大丈夫です。

 

フォームを作成してみる

フォーム作成
設定が終わったので実際にフォームを作ってみます。
管理画面の左のメニューに「新規追加」がありますね
クリックしたら上記画像の画面になります。
実際にお問い合わせのフォームを作ってみようと思います。
その中でもテンプレートを使ってみたいと思います。

簡単なお問い合わせフォーム
ほぼ出来上がってますね
後はセキュリティのために何をするかくらいですね
このままでも正直、機能するほどです。
あまりにも簡単すぎます。
こんなかんじです。

[wpforms id=”8949″]

ここまで片手しか動かない筆者が3分ほどでやってしまいましたよ

 

WP Mail SMTP by WPFormsを設定する

WP Mail SMTP Lite
WP Mail SMTP by WPFormsは、 WordPressのSMTPではなく外部サーバーのSMTPを使ってメール送信するための プラグインになってます。
 WordPressのSMTPを使うよりメールが届きやすくなります。

WP Mail SMTP by WPForms詳細
WordPressサイトがメールを送信しないことに問題がありますか?あなたは一人じゃない。 100万を超えるWebサイトがWPMail SMTPを使用して、電子メールを確実に送信しています。
私たちの目標は、電子メールの配信を簡単かつ信頼できるものにすることです。メールが確実に受信トレイに届くようにします。
WP Mail SMTPは、電子メールを送信するときに適切なSMTPプロバイダーを使用するようにWordPressを再構成することにより、電子メールの配信可能性を修正します。

上記は、詳細に書かれていた英語を翻訳したものです。

WP Mail SMTP by WPForms設定
設定については、いろいろタブもあったりしますが、基本的に設定するのは一般のタブだけでOKです。
メールの項目をしっかりと設定することでドメインのメールアドレス
もしくは、Gmailなどにメールを振り分けることが可能です。

メール設定
ここでメールアドレスの設定が可能です。

メール設定
メーラーのところ、デフォルトのままであればこの プラグインは、必要ないでしょう。
ここは、Gmailもしくはその他のSMTPを選ぶのが普通だと思います。
その他のSMTPの場合は、例えば筆者の場合ならht908@wp908.comのような自分のドメインのメールアドレスの場合ですね。
今回は、その他のSMTPを選択した場合の事例をみてみます。

SMTP設定
ここからの設定にはメール設定と同じ設定が必要になります。
それを準備して設定していきます。
ポート番号は、サーバーやプロバイダによって決められている番号を使う必要があります。
587とか結構多かったりしますが・・・

SMTP設定
ユーザー名とパスワードはかなり重要です。
当然のことながら間違えているとメールはお問い合わせがあっても届きません。

 

WPFormsに送信者のIPアドレスを追加する方法

IPアドレス
海外からの英語SPAM送信が多く.htaccessでアクセス制限するにしても送信者のIPアドレスが分からないと、httpdのアクセスログ辿るしかないので簡単にわかるようにしておきたいということです。

フォーム設定
作成したフォームを開くと上記画面ですが、左側にあるメニューの設定を開きます。

通知
上記画像のように「通知」を選択します。
そしてメッセージのところにある「スマートタグを表示」をクリックします。

スマートタグを表示
表示されたらスクロールして「ユーザーIPアドレス」を選択

ユーザーIPアドレス
メッセージ部分にタグが追加されているのわかりますか?
これで保存すると送信者のIPアドレスが記録されるようになります。
拒否したい場合は、.htaccessに記載することになります。

.htaccessは、文字コードをUTF-8にして保存することを忘れないでください。
失敗するとサイトが表示できなくなります。

 

まとめ

WPFormsの使い方
いかがでしょうか?
簡単だったと思いませんか?
インストールするのに予期しないエラーが出にくい
それでいてフォーム作成が簡単
Contact Form 7から引越しツールで簡単に移行できる
この3つが揃っているというのは他にないですね
類似の プラグインNinja Formsがあるのですが、必須の WordPressバージョンなどが高く1部のサーバーでは気をつけないとエラーが出ることもあります。
それを考えるとWP Formsは、手軽で初心者にやさしいフォームビルダーの プラグインということになりますね

 


 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!