つぐみこんにちは、つぐみ(＠_tsugumi293)です。
ブログにお問い合わせフォームを置いていますか？
お問い合わせフォームはブログを訪問してくれた人とブログ運営者をつなぐ連絡手段のひとつです。
お仕事の依頼や読者からの感想など、訪問者の声を聞きたいという人はぜひ設置しておきたいですよね。
また、お問い合わせフォームはGoogleアドセンス対策としても必要なツールと言われています。
Googleアドセンス合格を目指していてお問い合わせフォームをまだ設置していない人は、この機会に設置してはいかがでしょうか。
この記事ではお問い合わせフォームの定番『Contact Form7』から『WPForms』に乗り換えたわたしが、フォーム作成からスパム対策まで20分でできるお問い合わせフォームの設定方法をご紹介します。
- お問い合わせフォームをはじめて設置する人
- HTML知識なしで、お問い合わせフォームをカスタマイズしたい人
- シンプル好き
プラグインをインストールする
WPFormsのプラグインをインストールします。
プラグインの正式名称は『Contact Form by WPForms』です。
プラグイン→新規追加
- “WPFroms”でキーワード検索
- 『Contact From by WPFroms』をインストール
- 有効化
お問い合わせフォームを作る
テンプレートを使ってお問い合わせフォームを作る
テンプレートを使ってお問い合わせフォームを作ります。
WPForms→新規追加
- フォーム名：(例)お問い合わせフォーム
- テンプレートを選択：簡単なお問い合わせフォーム
フィールドを編集する
お問い合わせフォームを少しカスタマイズします。
ひつじさんテンプレートをそのまま使う人は先へ進んでください。
WPForms→すべてのフォーム→編集→フィールド
- 追加：左側のタブ(フィールドを追加)で追加したいフィールドをクリック
- 編集：右側のフォームプレビューで編集したいフィールドをクリックし、左側のタブ(フィールドオプション)で編集
- 移動：右側のフォームプレビュー内でドラッグ
名前欄を編集する
ラベルの値を変更
フォーマットのプルダウンから“シンプル”を選択
プレースホルダーに任意のテキストを入力
つぐみプレースホルダーは、送信者にわかりやすくするために、あらかじめ“ハンドルネームOK”などのメッセージを表示させる機能です。
チェックボックスを追加する
チェックボックスのフィールドを使って、送信前確認メッセージを追加します。
- フィールドの追加
左側のタブ(フィールドを追加)でチェックボックスをクリック - フィールドの移動
右側のフォームプレビュー内でドラッグ
(例)上記の内容で送信してもよろしいですか？
(例)はい
“－”をクリックして削除
“必須”にチェック
送信完了メッセージを編集する
送信後に表示されるメッセージを編集します。
WPForms→すべてのフォーム→編集→設定→確認
あらかじめセットされているメッセージをそのまま使う場合は、何もすることはありません。
ひつじさん送信完了メッセージの画面です。
シンプルなWPFormsに突然あらわれる黄緑色の背景は、CSSで変更できます。
.wpforms-confirmation-container-full {
background: #ｶﾗｰｺｰﾄﾞ;
border: 1px solid #ｶﾗｰｺｰﾄﾞ;
}自動返信メールを設定する
送信者と管理者(自分)に問い合わせ内容をメール送信する設定です。
WPForms→すべてのフォーム→編集→設定→通知
- 自動返信メールの送信先
送信先が複数ある場合は“,”で区切ります。メールの送信先に自分以外のメールアドレスは表示されません
｛admin_email｝：WordPressに登録している管理者アドレス
｛field_id=“1”｝：フォームのメールアドレス欄(ここではフィールドID #1)に入力されたアドレス - 自動返信メールの件名
- 自動返信メールの送信元の名前
- 自動返信メールの送信元アドレス
- 問い合わせの返信先
フォームのメールアドレス欄(ここではフィールドID #1)に入力されたアドレス - フォームに入力された内容
お問い合わせフォームを設置する
固定ページにお問い合わせフォームを設置します。
WPForms→すべてのフォーム
ショートコード[ wpforms id="****" ]をコピーする
固定ページ→新規追加
コピーしたショートコードを新しい固定ページに貼り付ける
reCAPTCHAを設定する
お問い合わせフォームにreCAPTCHA v3を設定します。
reCAPTCHAはGoogleが提供している無料スパム対策サービスです。
ブログのコメント欄やメールフォームでメッセージを送るときに、読みづらーい文字の入力を求められたり、数枚の画像の中から指示に合ったものを選ばせる、あれですね。
WPFormsには文字認証や画像認証のいらないreCAPTCHA v3を設定できるので、送信者に手間をかけることはありません。
サイトキーとシークレットキーを取得する
Google reCAPTCHAにブログを登録してサイトキーとシークレットキーを取得します。
Google reCAPTCHA
(作成)：ブログを登録
(設定)：reCAPTCHAキーを取得
WPFormsにサイトキーとシークレットキーを設定します
WPForms→設定→reCAPTCHA
- タイプ：reCAPTCHA v3
- サイトキー：コピーしたキーコードを貼り付ける
- シークレットキー：コピーしたキーコードを貼り付ける
- お問い合わせフォームのページ右下にreCAPTCHAのアイコンが表示される
Contact Form7から変更する方法
わたしはContact Form7を使っていました。
使い方はとっても簡単だけど、カスタマイズするにはHTMLの知識が必要なんですよね。
HTMLの知識がないわたしはあっさりとWPFormsへのお引越しを決めました。
WPForms→ツール→インポート→他のフォームプラグインからのインポート
プルダウンから『Contact Form 7』を選択してインポート
2020年10月現在のインポート可能なプラグイン
- Contact Form 7
- Ninja Forms
- Pirate Forms
【まとめ】シンプルで簡単！お問い合わせフォームはWPFormsで作ろう
WPFormsは、はじめてお問い合わせフォームを作る初心者でも直感的に操作できるプラグインです。
テンプレートそのままで十分な機能を備えています。
また、お問い合わせフォームに個性を出したい人にもWPFormsはおすすめです。
簡単なCSSを追加するだけで、サイトの雰囲気に合わせたお問い合わせフォームのページを作ることができますよ。
つぐみHTMLがわからなくても大丈夫！
お問い合わせフォームにこだわりたい人はWPFormsを使ってみてください。
コメント