Contact Form7より簡単!WPFormsでお問い合わせフォームを作る方法

つぐみのアイコン画像つぐみ

こんにちは、つぐみ(@_tsugumi293)です。

ブログにお問い合わせフォームを置いていますか?

お問い合わせフォームはブログを訪問してくれた人とブログ運営者をつなぐ連絡手段のひとつです。

お仕事の依頼や読者からの感想など、訪問者の声を聞きたいという人はぜひ設置しておきたいですよね。

また、お問い合わせフォームはGoogleアドセンス対策としても必要なツールと言われています。

Googleアドセンス合格を目指していてお問い合わせフォームをまだ設置していない人は、この機会に設置してはいかがでしょうか。

この記事ではお問い合わせフォームの定番『Contact Form7』から『WPForms』に乗り換えたわたしが、フォーム作成からスパム対策まで20分でできるお問い合わせフォームの設定方法をご紹介します。

WPFormsをおすすめしたい人
  • お問い合わせフォームをはじめて設置する人
  • HTML知識なしで、お問い合わせフォームをカスタマイズしたい人
  • シンプル好き
目次

プラグインをインストールする

WPFormsのプラグインをインストールします。

プラグインの正式名称は『Contact Form by WPForms』です。

プラグイン→新規追加

  1. “WPFroms”でキーワード検索
  2. 『Contact From by WPFroms』をインストール
  3. 有効化

お問い合わせフォームを作る

テンプレートを使ってお問い合わせフォームを作る

テンプレートを使ってお問い合わせフォームを作ります。

WPForms→新規追加

  1. フォーム名:(例)お問い合わせフォーム
  2. テンプレートを選択:簡単なお問い合わせフォーム

フィールドを編集する

お問い合わせフォームを少しカスタマイズします。

ひつじさんのアイコン画像ひつじさん

テンプレートをそのまま使う人は先へ進んでください。

WPForms→すべてのフォーム→編集→フィールド

フィールドの追加・編集方法
  • 追加:左側のタブ(フィールドを追加)で追加したいフィールドをクリック
  • 編集:右側のフォームプレビューで編集したいフィールドをクリックし、左側のタブ(フィールドオプション)で編集
  • 移動:右側のフォームプレビュー内でドラッグ

名前欄を編集する

タブ:フィールドオプション
STEP
名前欄の項目名を変更する

ラベルの値を変更

STEP
名前欄を1行にする

フォーマットのプルダウンから“シンプル”を選択

STEP
名前欄に初期値を追加する

プレースホルダーに任意のテキストを入力

つぐみのアイコン画像つぐみ

プレースホルダーは、送信者にわかりやすくするために、あらかじめ“ハンドルネームOK”などのメッセージを表示させる機能です。

チェックボックスを追加する

チェックボックスのフィールドを使って、送信前確認メッセージを追加します。

タブ:フィールドを追加
タブ:フィールドオプション
STEP
チェックボックスのフィールドを追加する
  • フィールドの追加
    左側のタブ(フィールドを追加)でチェックボックスをクリック
  • フィールドの移動
    右側のフォームプレビュー内でドラッグ
STEP
項目名を変更する

(例)上記の内容で送信してもよろしいですか?

STEP
選択肢を変更する

(例)はい

STEP
使わない選択肢を削除する

“-”をクリックして削除

STEP
入力必須項目に設定する

“必須”にチェック

送信完了メッセージを編集する

送信後に表示されるメッセージを編集します。

WPForms→すべてのフォーム→編集→設定→確認

あらかじめセットされているメッセージをそのまま使う場合は、何もすることはありません。

ひつじさんのアイコン画像ひつじさん

送信完了メッセージの画面です。
シンプルなWPFormsに突然あらわれる黄緑色の背景は、CSSで変更できます。

送信完了メッセージ画面
CSS
.wpforms-confirmation-container-full {
 	background: #カラーコード;
 	border: 1px solid #カラーコード;
}

自動返信メールを設定する

送信者と管理者(自分)に問い合わせ内容をメール送信する設定です。

WPForms→すべてのフォーム→編集→設定→通知

WPFormsの設定
こんなメールが届きます
  1. 自動返信メールの送信先
    送信先が複数ある場合は“,”で区切ります。メールの送信先に自分以外のメールアドレスは表示されません
    {admin_email}:WordPressに登録している管理者アドレス
    {field_id=“1”}:フォームのメールアドレス欄(ここではフィールドID #1)に入力されたアドレス
  2. 自動返信メールの件名
  3. 自動返信メールの送信元の名前
  4. 自動返信メールの送信元アドレス
  5. 問い合わせの返信先
    フォームのメールアドレス欄(ここではフィールドID #1)に入力されたアドレス
  6. フォームに入力された内容

お問い合わせフォームを設置する

固定ページにお問い合わせフォームを設置します。

STEP
ショートコードをコピーする

WPForms→すべてのフォーム

ショートコード[ wpforms id="****" ]をコピーする

STEP
固定ページにフォームを設置する

固定ページ→新規追加

コピーしたショートコードを新しい固定ページに貼り付ける

reCAPTCHAを設定する

お問い合わせフォームにreCAPTCHA v3を設定します。

reCAPTCHAはGoogleが提供している無料スパム対策サービスです。

ブログのコメント欄やメールフォームでメッセージを送るときに、読みづらーい文字の入力を求められたり、数枚の画像の中から指示に合ったものを選ばせる、あれですね。

WPFormsには文字認証や画像認証のいらないreCAPTCHA v3を設定できるので、送信者に手間をかけることはありません。

サイトキーとシークレットキーを取得する

Google reCAPTCHAにブログを登録してサイトキーとシークレットキーを取得します。

Google reCAPTCHA

(作成):ブログを登録
(設定):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を使ってみてください。

コメント

コメントする

目次
閉じる