お問い合わせフォーム、作った方がいいとよく言われていたのですが、スパムメッセージが届くのが嫌で設置していませんでした。
下記の理由からContact Form 7を導入しようと思っていました。
- 昔からあって有名
- 日本人が作成した
- 使っている人が多い
使っている人が多いのはヒトデさんの記事に設置方法が掲載されていたからだと思います。他の人のブログを調べたところ、20のブログのうち14のブログでContact Form 7を導入していました。
20のブログうち2つのブログでWPformsを導入していて気になっていたんですよね～。
なかじさんがTwitterで、WPforms lite簡単とおっしゃっていたのでWPformsを導入することにしました。
導入方法を書いておきます。
プラグインのインストール
まずは、プラグインをインストールします。
私は心配性なので、プラグインをインストールする前にバックアップとっておきました。
WPログインした状態で左メニューのプラグインをクリックして「新規追加」をクリックします。
右上の検索ボックスに「WPforms」と入力すると一覧が表示されますので、WPforms横の「今すぐインストール」をクリックします。
インストールが終わったら「有効化」をクリックします。
▲ 目次に戻る
フォームの作成
有効化すると、ようこその画面がでました。
使ったことがなかったので「WPformsチャレンジを始める」をクリックしてみます。
「最初のフォームを作成」をクリックしても大丈夫です。
画面に沿ってクリックや入力をしていきます。
フォームの名前を任意に入力します。
好きなテンプレートを選択します。
私は「Simple Contact Form」を選択しました。
名称が英語表記なので日本語表記に変更していきます。
submitボタンをクリックすると別タブが表示されるので、「ボタンのテキスト」と「ボタン処理テキスト」を変更します。
初期値だとWordPressに登録してあるメールアドレスに送信されるので、変更したい場合は変更します。
お問い合わせした人にもメールが届くようにするには「スマートタグを表示」をクリックし、表示された「メールアドレス」項目をクリックします。
{field_id=”1″}が問い合わせした人のメールアドレスです。
管理者にも届くようにするには、{field_id=”1″}の後にカンマで区切り、管理者のメールアドレスを入力してください。
例）{field_id=”1″},XXXXXX@gmail.com
確認タブに切り替えて、確認メッセージを編集します。
初期設定のままだと英語です。送信後に表示されるメッセージです。
すべての入力が終わるとページに埋め込むか聞かれます。新規ページに埋め込みたかったので「新規ページを作成」をクリックします。
任意の名前をつけます。
ページが公開されました。
新規ページ名を入力した時の名前がcontactだったので、タイトルも英語表記になってしまいました。
わかりにくいので日本語に修正しておきます。
新規でフォームを追加したい場合は、左サイドメニュー「WPFroms」をクリックして「新規追加」ボタンでフォーム作成が可能です。
▲ 目次に戻る
reCAPTCHAの設定
このままだとスパムメールが届くのでreCAPTCHAを設定します。
WPformsはreCAPCHAを導入できるようにプラグイン側で用意してくれているのが、導入決定ポイント！
reCAPTCHAを取得
まずはgoogleでreCAPTCHAを登録します。
Google’s reCAPTCHA admin console. に移動します。
ラベルは自分でわかる任意のものを入力してください。
当ブログではAMPを利用しているのでreCAPTCHA v3を使うことにします。
必要なものにチェックをいれて「送信」をクリックしてください。
キーが生成されました。
これは後ほどWordPress側の設定で使います。
WordPress側でreCAPTCHA設定
WordPress左サイドにある「WPFroms」-「設定」をクリックします。
「CAPTCHA」をクリックします。
「reCAPTCHA」をクリックします。
reCAPTCHA v3を選択し、先ほど取得したサイトキーとシークレットキーを入力して「設定を保存」をクリックします。
最初に作成したフォーム側でreCAPTCHAを利用するように設定します。
左サイドメニュー「WPFroms」をクリックします。
フォーム一覧がでてくるので、reCAPTCHA設定したいフォームをクリックします。
WPformsの編集画面が表示されるので、左メニューの「設定」をクリックし「Google v3 reCAPTCHAを有効化」をクリックして有効にします。
「保存」をクリックします。
他にも修正したいところがある時は、WPformsの設定画面から修正してください。
▲ 目次に戻る
送信テスト
送信テストをします。
送信テストしてみると修正が必要な箇所がでてきますので、その時は、適宜修正してください。
届いたんですけど、迷惑メールフォルダに入っていました。
▲ 目次に戻る
導線を設定する
問い合わせフォームの固定ページは作成されましたが、このままでは導線がありません。
好きなところに設定すればいいんですが、私が設定した方法を明記しておきます。
左サイドメニューの「外観」-「メニュー」をクリックします。固定ページの「お問い合わせ」にチェックをいれて「メニューに追加」をクリックします。
メニューに追加されていることを確認し「メニューを保存」をクリックします。
以上で完了です。
テーマによっても導線の設定方法が異なりますので、お好きなところに設定してください。
▲ 目次に戻る
無料版と有料版について
下記ブログに無料版と有料版の違いが載っていました。
下記の理由から、私の場合は無料版でいいと判断しました。
- 個人ブログである
- 送信者と管理者に同じメールが届いても問題ない
- バリデーションへはこだわりがない
- 確認画面はいらない
クライアント案件であれば却下します。
送信者と管理者に同じメールが届くというのがNGな気がするんですよね。
確認画面をつけたいクライアントもNGです。
最近は、確認画面必須のクライアントも減りましたが、昔は絶対必要だったんです。
▲ 目次に戻る
WPformsおすすめ点
WPforms導入は簡単でした。
設定方法に従っていくと、固定ページまで設定して公開してくれるので便利です。
このプラグインは、reCAPTCHA設定もできるのが一番のメリット！他のプラグインだと別途、reCAPTCHA設定しないといけないのがデメリットです。
個人用ブログならこれで十分です。
▲ 目次に戻る