WPForms 使い方&設定 | お問い合わせフォームを超かんたん作成

WPFormsの使い方 | WordPressのお問い合わせフォームをドラッグ&ドロップ作成
  • URLをコピーしました!

WPForms とはドラッグ&ドロップで直感的にお問い合わせフォームを作成することができる、 WordPress プラグイン。

お問い合わせフォームは『 Conotact Form7 』を推奨するケースが多いですが、見た目をコードで整えたり、 Google reCATPCHA がサイト全体に反映されてしまったりと少し扱いづらい。

一方、 WPForms はシンプルかつプラグイン動作も軽量!コーディングによるカスタマイズいらずなので、お問い合わせフォームの作成も超〜かんたん

海外で大人気の日本語対応プラグイン『 WPForms 』の使い方とおすすめ設定を解説していきます。

※正式名称は『 Contact Form by WPForms 』

タップできる目次

WPFoms のインストール・有効化〜フォーム作成画面まで

まず、 WPForms のインストール・有効化してから、お問い合わせフォーム作成画面までの流れを解説します。

① WPFoms インストール・有効化の手順

STEP
『 WPForms 』を検索してインストールする
WPForms のインストール画面
WPForms のインストール画面
WPForms インストール手順
  1. 検索窓に『 WPForms 』と入力する
  2. 今すぐインストールをクリックする
STEP
WPForms を有効化する
WPForms の有効化画面
WPForms の有効化画面

WPForms のインストールから有効化は完了です。

続いて、フォーム作成画面を開きます。

お問い合わせフォーム作成画面までの手順

STEP
『最初のフォームを作成』をクリックする

WPForms を有効化すると、自動で以下のような画面に切り替わるので『最初のフォームを作成』をクリックして、お問い合わせフォームの作成画面に進みます。

※フォーム作成ボタン、ガイドへ進むボタン、 WPForms チャレンジ、アドオンの案内があります。

WPForms の初期画面
WPForms の初期画面
STEP
Simple Contact Form を選択する

お問い合わせフォームのテンプレート選択画面に自動で移行します。

ブログ運営のお問い合わせページ用であれば『 Simple Contact Form 』を選択すればOK!

お問合せフォームの選択画面
お問合せフォームの選択画面
STEP
簡易お問い合わせフォームのテンプレートが表示される
Simple Contact Form テンプレート
Simple Contact Form テンプレート

Simple Contact Form を開くと、簡易お問い合わせフォームのテンプレートが表示されます。

以上で、お問い合わせフォームを編集する準備が整いました。

では次に、お問い合わせフォームを編集して見た目を整えていきましょう。

WPForms の使い方 | フィールドの編集・フォーム編集画面の設定

WPForms の使い方は簡単で、『フィールド』という項目を編集するだけです。

まずは以下の動画をご覧ください。

WPForms の編集画面

このように項目をクリックしたり、ドラッグ&ドロップするだけでお問い合わせフォームを編集できます。

超かんたんですよね!

では次に、フィールドの編集方法を詳しく解説します。

フィールドの編集方法

WPForms のフィールドは、フィールドオプションを開いて右ページのプレビューを見ながら編集します。

例えば『名前』のフィールドの場合は以下のような項目があります。

WPForms フィールドの編集方法
WPForms フィールドの編集方法
名前フィールドのメニュー
  • ラベル:表示する項目名
  • フォーマット:姓名を分ける、名前を1行にするなど
  • 説明:注釈のようなものを追加できる
  • 必須:必須項目のチェック

ラベルを編集すると表示する項目名に反映されたり、フォーマットでデザインを変更することができます。

フィールドオプションの高度な設定では、項目の枠の中に文字入れ(プレースホルダー)することや、ラベルを非表示にすることが可能。プレースホルダーはどのフィールドにも共通なので覚えておくと便利です。

WPForms プレースホルダーの設定
WPForms プレースホルダーの設定

ちなみに、無料版の WPForms では以下のようなフィールドがあります。

無料版 WPForms のフィールド種類
  1. 一行のテキスト入力
  2. 段落テキスト
  3. ドロップダウン
  4. 多項選択式
  5. チェックボックス
  6. 数値
  7. 名前
  8. メール
  9. 番号スライダー
  10. reCATPCHA

必要な項目を選択したら、フィールドをプレビューぺージにドラッグ&ドロップして追加・編集しましょう。

フィールドの削除方法

フィールドの削除は簡単で、フィールドの右上にある赤いゴミ箱マークをクリックすればOK。

WPForms フィールドの削除方法
WPForms フィールドの削除方法

ゴミ箱マークのクリック後に表示されるポップアップで『OK』をクリックすれば、プレビュー画面から当該フィールドが削除されます。

フォーム編集画面の各種設定方法

無料版 WPForms のお問い合わせフォーム設定には、以下の3項目があります。

フォーム編集画面の設定項目
  • 一般:作成したお問い合わせフォームの基本設定
  • 通知:お問い合わせ内容を通知するメール受信設定
  • 確認:フォーム送信後の画面表示メッセージ

一般

お問い合わせフォームの一般設定
お問い合わせフォームの一般設定
『一般』の設定項目
  1. フォーム名
    ⇒ わかりやすいフォーム名にする
  2. フォームの説明
    ⇒ フォームの説明を表示しないなら未入力でOK
  3. 送信ボタンのテキスト
    ⇒ デフォルトでOK
  4. 送信ボタンの処理中テキスト
    ⇒ デフォルトでOK
  5. スパム対策保護を有効化
    ⇒ チェックしておく
  6. Google reCAPTCHA を有効化
    ⇒ チェックしておく

通知

お問い合わせフォームの通知設定
お問い合わせフォームの通知設定
『通知』の設定項目
  1. メールアドレスへ送る
  2. メールの件名
  3. 送信者名
  4. 送信元メールアドレス
  5. 送信先メールアドレス
  6. メールメッセージ

②・③はわかりやすい表示名にする。それ以外はデフォルトでOK!

確認

お問い合わせフォームの確認設定
お問い合わせフォームの確認設定

お問い合わせメッセージ送信後の確認メッセージを表示する設定。

ご連絡ありがとうございます。内容を確認次第、あらためてご連絡いたします。

当サイトでは以上のような文言に設定しています。確認メッセージを表示すればユーザーに安心感が生まれるので、ぜひ確認メッセージを編集しておきましょう。

自動返信メールを設定している場合は、『お問い合わせを受け付けました』と簡潔なメッセージでも良いです。

WPForms のおすすめ設定 | スパム対策【 Google reCAPTCHA 】

WPForms のプラグイン設定は、一般、メール、reCAPTCHA、検証という設定項目が4つあります。

なかでも、もっとも重要な設定は『 reCAPTCHA(リキャプチャ)』。

お問い合わせフォームからのスパム送信(迷惑メール)を防ぐことができるセキュリティ対策なので、ぜひ設定しておきましょう。

【 Google reCAPTCHA 設定手順】

STEP
reCAPTCHA にアクセス

reCAPTCHA トップページにアクセスします。

STEP
v3 Admin Console をクリックする
Google reCAPTCHA コンソールへのログイン
Google reCAPTCHA コンソールへのログイン
STEP
右上の『+』をクリックする
reCAPTCHA の追加ボタン
reCAPTCHA の追加ボタン
STEP
必要項目を入力する
Google reCAPTCHA の詳細設定
Google reCAPTCHA の詳細設定
reCAPTCHA の設定項目
  1. ラベル
    ⇒ reCAPTCHA の管理名なので、わかりやすい名前を設定する
  2. reCAPTCHA タイプ
    ⇒ reCAPTCHA v3 を選択する
  3. ドメイン
    ⇒ reCAPTCHA を使用するドメイン名を入力する
  4. オーナー
    ⇒ 自分のメールアドレス(自動挿入)
  5. reCAPTCHA 利用条件に同意する
    ⇒ チェックを入れる
  6. アラートをオーナーに送信する
    ⇒ reCAPTCHA が異常を検知した時の通知設定

必要項目を入力したら『送信』をクリックします。

STEP
サイトキー・シークレットキーをコピーする
reCAPTCHA v3 のキー
reCAPTCHA v3 のキー

reCAPTCHA v3 の『サイトキー』と『シークレットキー』が生成されます。

2つのキーは WPForms の設定画面で使用するので、コピーしておきましょう。

STEP
WPForms の『設定』>『 CAPTCHA 』を設定する
WPForms 内の reCAPTCHA 設定画面
WPForms 内の reCAPTCHA 設定画面
CAPTCHA の入力項目
  1. reCAPTCHA を選択する
  2. タイプ
    ⇒ reCAPTCHA v3 を選択する
  3. サイトキー/シークレットキー
    ⇒ 取得したキーをそれぞれコピペ
  4. 失敗メッセージ
    ⇒ デフォルトでOK

※スコアしきい値、無競合モードはデフォルトでOK

すべて入力して『設定を保存』をクリックすると、reCAPTCHA をお問い合わせフォームに設定する準備が整いました。

STEP
フィールド編集画面の『フィールドを追加で、 reCAPTCHA を追加する
Google reCAPTCHA をフォームに設定

お問い合わせフォームを作成するフィールド画面、『フィールドを追加』にある『 reCAPTCHA 』をクリックすると追加・削除することができます。

設定が完了すると、お問い合わせページの右下に『プライバシー・利用規約』と表示が出ます。

reCAPTCHA の画面表示
reCAPTCHA の画面表示

以上で、お問い合わせフォームのセキュリティ対策が完了しました。

無料版 WPForms には、 reCAPTCHA 以外に『一般』『メール』『検証』『その他』の項目がありますが、基本的にデフォルトでOKです。

WPForms で作成したフォームで、お問い合わせページを作る

WPForms で作成したお問い合わせフォームで、サイト内のお問い合わせページを作成してみましょう。

WPForms のブロック追加・編集
お問い合わせページ作成手順
  1. 固定ページを開く
  2. ページ内に WPForms ブロックを追加する
  3. 作成したフォームを選択する

あとは固定ページを公開するだけで、お問い合わせページを作成することができます。

クラシックエディターの場合は、ページ内にお問い合わせフォームのショートコードを挿入します。

他お問い合わせプラグインからワンクリックで WPForms に引っ越しできる

WPForms は、他のお問い合わせプラグインからワンクリックでデータ移行することができます。

他のプラグインからのインポート画面
インポート対応プラグイン

WordPress メニュー > WPForms > ツール > 他のフォームプラグインからのインポート > プラグインを選択 > インポート

以上の手順で、 WPForms にデータ移行が完了します。

WPForms の使い方まとめ

WPForms の使い方と設定方法を解説しました。

コーディング知識・技術がない初心者でも直感的に操作できる上に、UI(ユーザーインターフェイス)の良いお問い合わせフォームが作成可能。

お問い合わせフォームを通して企業から商品紹介や仕事の依頼がくることもあるので、ぜひこの記事を参考にして WPForms を使ってフォームを作ってみてください。

その他おすすめプラグインを紹介しているので、『 WorPress おすすめプラグイン6つ 』も参考にしてください。

当サイト使用テーマ【 SWELL 】

000000053838impression?a id=3074583&p id=3885&pc id=9646&pl id=53838

ブロックエディター完全対応
直感的なドラッグ&ドロップ編集テーマ

>> SWELL デモサイトを見てみるimpression?a id=3074583&p id=3885&pc id=9646&pl id=53849

役に立った!と思ったら他の人にシェアしよう
  • URLをコピーしました!

コメント

コメントする

目次
タップできる目次
閉じる