WPFormsの使い方!お問い合せページがドラッグ&ドロップですぐできる!

WPFormsの簡単にお問い合せフォームを作れるWordPressのプラグインです。

WPForms

正式名は「Contact Form by WPForms – WordPress 用のドラッグ & ドロップフォームビルダー」。

Contact Form by WPForms

名前の通り、欲しい項目をドラッグ & ドロップで追加できる非常に使いやすいコンタクトフォームプラグインです。

しかも超簡単。

基本的な項目だけなら1クリックで出来てしまうのです。

日本では「Contact Form 7」が何となく定番のような感じですが、この記事で紹介する「WPForms」は世界中で使われ、すごい高評価を受けています。

Contact Form 7も使い勝手のよいプラグインですが、レイアウトに難ありという感じ。

一方WPFormsプラグインはもうそのままできれいなフォームが出来上がります。

当サイトのテーマ「SWELL」でも推奨プラグインとして紹介されています。

WPFormsの大まかな紹介
  • 基本的な項目なら1クリックで作成完了
  • 項目はドラッグ & ドロップで位置が自由自在
  • 初回作成時は手順の案内あり
  • 細かい部分まで行き届いた仕様
  • セキュリティ機能も簡単設定
  • Contact Form 7より操作が簡単
  • Contact Form 7からのインポート機能

基本的な項目しか必要ないなら1クリックで出来上がる簡単バージョンが用意されて、私はほぼコレ!

※紹介の画像はWPForms Lite バージョン 1.6.0.2です。

記事の内容(もくじ)

WPFormsのインストールから有効化まで

左メニュー → プラグイン → 新規追加 → キーワード「Contact Form by WPForms」で検索

WPForms インストール
  1. 「Contact Form by WPForms」で検索
  2. 今すぐインストール
  3. 有効化

これでWPFormsが使えるようになります。

有効化した直後にWPFormsプラグインの案内ページが表示されます。

WPForms 初期画面
▲ 使い方案内ページ

この案内ページには

  • フォーム作成画面に飛ぶボタン
  • ガイドページへのボタン
  • WPForms チャレンジに挑戦
  • アドオンの案内

などです。

WPFormsの使い方

WPFormsを使ってお問い合せフォーム(コンタクトフォーム)を作り始めます。

上の画像の「最初のフォームを作成」ボタンをクリックする

または

左の管理メニュー → WPForms → 「新規追加」

上記どちらかの方法で新規追加画面に入ります。

WPFormsを使い始めた最初の1回だけ、作り方の手順を(オレンジの丸)が移動しながら教えてくれます。

1クリックで簡単なフォームを作る

名前、メールアドレス、メッセージくらいの簡単なフォームしか必要ない場合は、1クリックでできちゃいます。

WPForms フォーム作成

「簡単なお問い合わせフォームを作成」ボタンをクリックすると、一気に下記の画面となります。

フォーム名を入力しないと、ボタンと同じタイトル「簡単なお問い合わせフォームを作成」になります。

WPForms 簡単フォーム

もちろんここにフィールドを追加したり削除したり自由に編集できます。

「空のフォーム」から独自のフォームを作る

セットアップで「空のフォーム」を選ぶと下記の画面になります。

WPForms 空のフォーム

ドラッグ & ドロップで必要な項目(フィールド)を右の空欄に入れてください。

WPForms フォーム作成

カーソルで移動するだけなので、めちゃくちゃ簡単です。

フィールドの編集

順番の入れ替えはカーソルでズリズリっと上下に移動。

フィールドを削除

追加したフィールドの削除は、フィールドにオンマウスすると右上に現れるゴミ箱マークをクリック

WPForms 編集画面

フィールドの細かな編集

追加したフィールドの内容を編集するのは「フィールドオプション」。

フィールドオプションを選択後、右の編集対象のフィールドをクリック。

両方とも薄水色の背景になるので、わかりやすいですね。

WPForms 編集画面

「名前」の部分で説明すると…

ラベル(項目名)を変えたり、説明文を追加したり…。

フォーマットのデフォルトは1枠ですが、姓名を分ける2枠、ミドルネームを追加できる3枠が選べます。※2枠・3枠は名・姓と欧米式の順です。

確認用のメールアドレス欄も簡単に設置できます。メールアドレスを間違えて記入されてしまうと連絡の取りようがないので一番重要な部分かもしれませんね。

メールアドレスと確認用メールアドレスが一致しない場合有効なメールアドレスを入力してください。」とアラートが表示されます。

編集画面の各種設定

設定の項目は「一般」「通知」「確認」があります。

(それ以外はPROの機能なので有料アップデートの必要があります)

一般

フォームの初期画面を編集。例えば「送信」を「送信する」などに変えられます。

通知

問い合せを受けるメールの設定です。メールのタイトルなどが編集できます。

確認

下の画像の通り送信後の文言などが編集できます。

WPForms 編集画面

個人的には「ご返信させていただきます」とか嫌いだなぁ。「返信いたします」でいいじゃん!「ご」の多用と、何でも「させていただきます」はおかしいと思うんだけどなぁ~、日本語としても気持ち悪い(と思うおばあさん)。

脱線してしまいました。

reCAPTCHAの設定

reCAPTCHAはセキュリティー対策です。

WordPressは良くない人たちにすごく狙われているので、用心が必要です。

いろいろ難しいやり方もありますが、WPFormsのreCAPTCHAは簡単に設置できます。

管理メニュー → WPForms → 設定 → reCAPTCHA ※編集画面の「設定」ではありません。

Googleからサイトキーと秘密鍵を取得してください。

reCAPTCHAにアクセス

reCAPTCHA

画面右上の「Admin console」をクリック

reCAPTCHA

画面右上の「+」をクリックすると登録画面に移動します。

reCAPTCHA

赤枠をそれぞれ選んだり、入力して「送信」

reCAPTCHA

Googleからサイトキーとシークレットキーを取得完了。

WPForms → 設定 → reCAPTCHAに進み、取得した「サイトキー」「秘密鍵」の欄にコピペしてください。

WPForms reCAPTCHA

WPForms reCAPTCHA

すべての設定を保存。

最終的にお問い合せページの送信ボタン前にチェックボックスが表示されます。

WPForms reCAPTCHA

スパム除けはもちろんですが、フォームに書き込むユーザーにも安心感を与えると思います。

お問い合せページを作る

作ったフォームをお問い合せページとして使うには…

STEP
WPForms 画面

左メニュー → WPForms → すべてのフォーム → フォーム[ショートコード]をコピー

STEP
新規固定ページ

左メニュー → 固定ページ → 新規追加 → 本文エリアにペースト

  • ブロックエディターの場合
    ブロックツールバーの「ショートコード」にWPFormsのショートコードをコピペ
  • クラッシックエディターの場合
    テキスト編集画面にコピペ

「お問い合せ」など任意のタイトルをつけて保存。

これで出来上がりです!

公開して確認してください。reCAPTCHAも表示されていますよね。

Contact Form 7からの引っ越しツールあり

左メニュー → WPForms → ツール → インポート →「他のフォームプラグインからのインポート」→ 「Contact Form 7」選択 → インポート

ワンクリックでサードパーティのフォームをインポートできるため、切り替えが簡単になります。

  • Contact Form 7
  • Ninja Forms
  • Pirate Forms

上記3ファームが対象です。便利なうえに、気が利いています。

Contact Form by WPForms

記事の内容(もくじ)