[WPForms]簡単なフォームの作り方とカスタマイズ方法

  • URLをコピーしました!
※本サイトはアフィリエイト広告を利用しています。

筆者イチオシの問い合わせフォーム・プラグインは[WPForms]です。

今までさまざまなプラグインを使って来ましたが、最後は[WPForms]に落ち着きました。

その[WPForms]の設定方法やカスタマイズ法を解説します。

目次 タップで飛べます!

[WPForms]プラグインをインストール

まず、[WPForms]をンストールします。

STEP
プラグインを新規追加

[WPForms]を作成したいワードプレスにログインし、ダッシュボードのバーの「プラグイン」→「新規追加」と進みます。

STEP
[WPForms]を「今すぐインストール」

検索窓にWPFormsと入力し、現れた[WPForms]の「今すぐインストール」を押します。

STEP
[WPForms]を有効化

「有効化」ボタンを押します。

画像は有効化した後

[WPForms]を使って簡単な問い合わせフォームを作る方法

[WPForms]には「空のフォーム」を含めて23種のフォームが用意されています。有料版だとこれに加え216種のフォームが使えます。

が、通常はLite版(無料版)で充分です。

STEP
[WPForms]

[WPForms]を作成したいワードプレスにログインし、ダッシュボードのバーの[WPForms]を押します。

STEP
フォームを選ぶ

フォームに名前を付け(後からでもできます)、使いたいフォームを選んで押します。

「空のフォーム」は、まったく1から作っていくときに使用します。

ここでは「Simple Contact Form」を選びます。

STEP
「埋め込む」ボタンを押す

「埋め込む」ボタンを押します。

STEP
既存ページか新規ページかを選ぶ

既存ページに設定するか新規ページに設定するかを選びます。

STEP
名称を入力

新しいページを何と呼ぶか名称を付け「行きましょう」ボタンを押します。

STEP
完成!

完成です。たったこれだけで下のようなフォームが出来上がってしまいます。

ただ、このままでは英語表記だし、もっと使いやすく変えたいという人のために、次はカスタマイズ法を解説します。

[WPForms]でフォームをカスタマイズする方法

本サイトのフォームは、下のようにカスタマイズしています。

このフォームの説明をざっとします。

姓名はユーザーが入力しやすいように分離せず1マスです。

メールアドレスは、間違いのないものにするため「確認」を取るため2マスです。

メッセージの内容をまず選んでもらうスタイルです。

その内容を詳細に書いてもらう欄を設け、最後に「送信」ボタンです。

安全のためのreCAPTCHAを埋め込んでいます。

では、[WPForms]のカスタマイズ法を以上のような本サイトを例にとって解説します。

[WPForms]のカスタマイズ法

STEP
[WPForms]→「すべてのフォーム」

ワードプレスにログインし、ダッシュボードのバーから[WPForms]→「すべてのフォーム」へ進み、該当するフォームを押します。

STEP
フィールド名を日本語に変更

「フィールド」でまず「Name」を選択し、ラベル欄に「お名前」と入力。フォーマットは「シンプル」を選びます。

STEP
Emailのフィールドを選択し、ラベル名を日本語に

Emailのフィールドを選択し、ラベル名を「メールアドレス」に変更します。

STEP
Comment or Messageフィールドを選択し、ラベル名を日本語に

Comment or Messageフィールドを選択し、ラベル名を「お問い合わせ」に変更します。

STEP
チェックボックスを作る

「フィールド」→「チェックボックス」を押します。

STEP
チェックボックスの内容を入力

チェックボックスの内容を入力します。

  1. が現れるので
  2. 各チェックボックス項目に入力します。
STEP
チェックボックスを増やす
STEP
チェックボックスの位置を移動

チェックボックスをドラッグ&ドロップして位置を移動します。

STEP
「チェックボックス」→「メッセージの内容をお選びください」

「チェックボックス」を「メッセージの内容をお選びください」に変更します。

STEP
フォーム名や送信ボタンのテキストを変更

フォーム名や送信ボタンのテキストを変更するには、左バーの「設定」を押し、フォーム名、送信ボタンのテキスト、送信ボタンの処理中テキストの各欄に入力します。

STEP
保存と埋め込み

「保存」ボタンを押します。埋め込む場合はその左の「埋め込む」ボタンを押します。

セキュリティのため[WPForms]にreCAPTCHAを装備したい場合は、[reCAPTCHA導入]キーを取得し問い合わせページに実装する方法をご覧ください。

まとめ

筆者イチオシの問い合わせフォーム・プラグインは[WPForms]です。

今までの各種フォームのプラグインを使って来ましたが、[WPForms]に落ち着きました。

その[WPForms]の設定方法やカスタマイズ法を解説しました。

\WPFormsのメールが届かない場合の対処法/

\高速サーバーなら↓/

国内最速!初期費用無料の高性能レンタルサーバー【ConoHa WING】>

\ワードプレスのテーマなら↓/

SWELL – シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ>

目次 タップで飛べます!