SWELLサイトにお問い合せフォームを追加
当ブログサイトはSWELLにて作成していることはこれまでの投稿にも記事にしてます。
前回紹介したプラグインにてお問い合せフォーム(コンタクトフォーム)を作成したので記事に残しておきます。
お問い合せフォームの定番といえば「Contact Form 7」がよく聞くけど、SWELL公式サイトにあるとおり(開発者の了さんが使っている事もあり)、SWELLと非常に相性が良さそうな「Contact Form by WPForms」使って作成してみました。
WP Formを設置していく
早速「WP Forms」をプラグインとして使うので、お問い合せフォームをサイトに追加していきます。
設置の手順はこんな感じ↓
- プラグインを追加 → 有効化
- お問い合せフォーム作成
- 作成ページを固定ページで公開
- フッターにリンク作成
でわ以下より順番に説明していきます。
1.プラグインを追加 → 有効化
まず「WP Forms」のプラグインをインストールして追加し、有効化しないと話が始まらないんで、前回の記事を参考にインストールから有効化までをサクッと行います。
ちなみに追加したいプラグイン「WP Form」はコレ↓
2.お問い合わせフォーム作成
プラグインを有効化できたら早速、お問い合わせフォームを作成してどんどん進めていきます。
ダッシュボードの左メニューの WPForms > 新規作成 をポチっと開く。
フォーム名に「お問い合わせフォーム」などでわかりやすい名前を入力。
で、好みのテンプレートを選択。
今回、当ブログでは「簡単なお問い合わせフォーム」を使用してみた。
必要に応じて好みの項目(フィールド)を左側にあるフィールドを追加より追加していきます。
フィールドオプションで細かいカスタムなどもできるので好みの設定でカスタマイズしていきます。
3.作成したページを固定ページで公開
ある程度思い通りに作成できたら(またいつでも編集できるんで、はじめのうちはテキトーに…)
作成したお問い合わせフォームを固定ページにサイトに表示されるよう公開していく。
まず作成したお問い合わせフォームの右上にある「埋め込む」をクリックして新規で固定ページを作成しお問い合わせページを埋め込みます。
作成した固定ページに移動してレイアウトなど念のため確認。
この時ついでにURLも確認しパーマリンクを「contact」に変更しておいたのでお好みでカスタム。
そして右上の「公開」をポチっとな
4.フッターにリンク作成
以上の手順でWEB上には公開されるけど、自分のサイトからせっかく作成したページにたどり着けないのでフッターメニューなんかにリンクURLを追加させて表示させておく。
コレで一応完了だけど忘れずに自分のメールアドレスで、念のため送信テストをしておく事おススメします。
スパムメール対策
ここまでの手順で基本的なお問い合わせページは完成だけど、作成後に当ブログサイトでは迷惑メールがバンバン届いたので、最後にその対策をした記録を残しておきます。
WPFormsでの「reCAPTCHA V3」設定ですごく簡単に設定できました。
サイトキーとシークレットキーを作成
まず、reCAPTCHA設定ページへアクセスし必要情報を入力してキーを取得します。※Googleアカウントは必須
ラベルにはサイト名などわかりやすいモノを入力し、reCAPTCHAタイプはV3を選択。
ドメインにドメインを入力して自身のメールアドレスも入力。
そして送信をクリックしてキー取得します。
WPFormsと紐づける
先ほど取得したキーをWPFormsと紐づけていく。
ダッシュボード WPForms > 設定 から「CAPTCHA」→「reCAPTCHA」を選択。
下の方にスクロールして、先ほど取得したサイトキーとシークレットキーを入力して設定を保存。
これで紐づけが完了して「reCAPTCHA v3」が機能してスパムもほとんどなくなりました。
長くなったので今回は以上。
でわまた☆ヨロシク
