デジタル作画のYOU TUBEチャンネル開設しましたー

ど素人がContact form 7→WPFormsにしてみました

目次

プラグインの見直し

今日新しくブログを設定したばかりなんですが、ブロックエディタに慣れるまでもう少しかかりそうです(汗)
こうやって記事を書いていろんな機能に慣れていければいいなと思います。

さて、ワードプレスのSWELLを入れてからまずプラグインの見直しをしました。
テーマによって相性があると思うのでまずは公式さんのマニュアルを読みまくりです。

こちらの公式サイトを参考にしました

他にセキュリティなども見直ししたのですが、まずはメールフォームです。

Contact form 7からWPFormsへ

私は仕事でこのブログの他にサイト型のブログをやってるのですが、お問い合わせフォームは必須。
なので、こちらのブログともう1つの方も同時にメールフォームを同時に変更しました。

ワードプレスを始めてからずっと使ってたのはContact form7
素人な私でもこれは使いやすかったんですが今回見直した理由として…

  • シンプルなものにしたかった
  • 簡単に扱いたかった
  • セキュリティも一緒に見直したかった
  • これは無料版で十分に行けそうと思った

時代の流れか、今の自分の心境か、ほんとシンプルでいいかなと思ったのがきっかけでした。(チェックボックス、ラジオボタンもいらないかなと)結果新しく入れたWPFormsは、ドラッグ & ドロップで操作が簡単でした。

こちらを参考にさせていただきました

私がやった工程

  1. 「WPforms」で検索。
  2. インストール後、「有効」に。
  1. 「ダッシュボード」→「WPForms」→「新規追加」
  2. 「フォーム名に名前を入れる」私は「お問い合わせ」にしています。
  3. 「テンプレートを選択」で真ん中の「簡単なお問い合わせフォームを作成」をポチッとしました。

簡単にできました!

あとはこの左の項目で好きなものをドラッグ&ドロップだな…と直感的にわかりました。

メールのスパム対策

Contactform7ではスパム防止のためにチェックボックスをつけていましたが、今回色々調べてみたらreCAPTCHAというものがいいらしいので導入してみました。

とりのアイコン画像とり

reCAPTCHAって何??(汗)

reCAPTCHAとは

reCAPTCHA(リキャプチャ)とはGoogleが提供している無料のサービスで、ウェブサイトをスパム行為やbotなどの不正行為から保護してくれるようです!こういうのを設置しないと迷惑メールがずっと入ってきます^^;

↓要はメールフォームの下にこんなのをつけます。

種類がある?

種類というかバージョンが色々あるようです(汗)

のアイコン画像

ひえ…!種類もわからんけど英語じゃん!

ちなみにいつも英語表記のところは翻訳サイトを使って調べながらやってますよ。

Google翻訳

こんな感じでね(笑)


私は先ほどの参考サイト様の説明をみながらやったつもりが間違えるという、超素人丸出しをやってしまいました。何を間違えたかというと、チェック型のCheckbox reCAPTCHA v2というのを使いたかったのにv3を登録してきてしまいました。Googleからサイトキーとシークレットキーを取得してきて初めて使えるのですが、どれでも同じだろうとワイルドに考えて失敗。ちなみにv3が最新らしいので後でかえるかもしれません。

とにかくわかんないのでreCAPTCHA v2で

無駄なくストレートに「私はロボットではありません」ってやつをつけたかったらこれですね。

  1. GoogleのアカウントにログインしてreCAPTHのページで「Admin console」を押す
  1. 登録用に何か名前つけます。私適当…(わかりやすいのはサイト名かもです)
  2. 自分のブログのドメインを入れます。私はついでに仕事用のサイトのも入れときました
  3. チェックを入れる
  4. 送信

無事に取得!

WPFormsにサイトキーとシークレットキーを登録

今度はダッシュボードを開いて「WPForms」→「設定」

「reCAPTCHA」→タイプを選ぶ「Checkbox reCAPTCHA v2
そして先ほど取得してきたサイトキー、シークレットキーをコピペして入力。

右上にこんな感じで出たらOK!

固定ページに設置

あとはダッシュボードから「WPForms」を開き「ショートコード」をコピー。

「固定ページ」に貼り付けて終わりです。メニューの中に「お問い合わせ」を追加しました。

できたー!

万年ワードプレスの初心者、ど素人の私でもできました(笑)

のアイコン画像

こんなの知ってるわ!

のアイコン画像

もっとちゃんとしたやり方があるぞ!

…というご意見もあるかと思いますが、失敗しながらもとりあえずできた!という自分の経験をこうやって書いていこうと思います。

余談:ContactForm7から引っ越しもできる

コンタクトフォーム7でフォームを作り込んでる場合は簡単に設定を引き継げるみたいなんですが、私はWPFormsの無料版なので「画像を添付する」などの設定が引き継げなかったので結局手動にしましたがこちらが参考になりました。

まだまだカスタムは続く…

さて、導入したてのテーマ「SWELL」なんですが、自分でわけわからないCSSをいじらなくとも着せ替えができるのがありがたいです。。。さすが最新の有料テーマ!まだまだいろんな便利機能があって結局沼にはまりそうです(笑)



のアイコン画像

ランキングに参加しています。よかったら応援お願いします♪

ブログランキング・にほんブログ村へ  

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URL Copied!
  • URL Copied!

コメント

コメントする

目次
閉じる