【WPFormsの使い方】ドラッグ&ドロップできれいなフォームができる!

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

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

WPForms

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

Contact Form 7も使い勝手のよいプラグインですが、レイアウトに難ありというか、見栄えを整えるのに少しHTMLの知識が必要です。

一方WPFormsプラグインはもうそのままできれいなフォームが出来上がります。おまけに操作がすごく簡単。

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

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

画像はWPForms Lite バージョン 1.6.0.2です。

目次

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

新規プラグインのインストール手順そのままですが、念のため流れを…。

WPForms インストール
  1. プラグイン → 新規追加
  2. キーワード欄に「Contact Form by WPForms」と入れ検索
  3. 今すぐインストール
  4. 有効化

これでインストール完了。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

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

お問い合せフォームの表示は次で説明します。

お問い合せフォームを使う

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

管理メニュー → WPForms → 「すべてのフォーム」に制作済みのフォームが並んでいます(1つかもしれないけれど)

目的のフォームの右側にあるショートコードをコピーします。

管理メニュー → 固定ページ → 新規追加の編集画面の本文エリアに

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

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

これで出来上がりです!

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

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

管理メニュー → WPForms → ツール → インポート → 「他のフォームプラグインからのインポート」

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

  • Contact Form 7
  • Ninja Forms
  • Pirate Forms

上記3ファームが対象です。

便利なうえに、気が利いていますねぇ。

目次
閉じる