Elementor Pro フォームウィジェットシリーズ『ステップフォーム』の作り方

『フォーム』ウィジェットとはお問い合わせフォームなどを作るウィジェットのことで、『ステップフォーム』と言うのは、フォームの記入項目が多岐にわたる場合に、記入するパートごとに段階(ステップ)を設ける方法のことです。

最初からフォームに記入項目がたくさん表示されると閲覧者側の意欲をそぎ、顧客を逃す可能性にもつながりますし、ステップフォームを使用することによりフォームの見た目がすっきりするのと同時に使用するスペースも節約することができます。

ステップフォームはフォームウィジェット内での設定が必要になります。
この記事ではフォームウィジェットでステップフォームを作る方法を紹介します。

また、フォームウィジェットの基本的な使い方を解説した【Elementor Pro『フォーム』ウィジェットの使い方】、
フォームのセキュリティを強化する【Elementor Pro フォームウィジェット『reCAPTCHA V3』の設定方法】の記事もありますので合わせてお読みください。

『ステップフォーム』の作り方を動画でご覧になりたい方はこちらからどうぞ!

フォームのステップを作る

はじめに。
この記事のサンプルではステップを3段階にしステップフォームを以下の様な構成にします。

  1. 名前 / Email
  2. 郵便番号 / 住所 / 電話番号
  3. メッセージ
新しい項目を追加し、ドラッグ&ドロップで一番上に順序を入れ替える

初めに『+項目を追加』をクリックし、新しいフィールドを追加します。

次に、新しく追加したフィールドをドラッグ&ドロップで一番上に持って来ます。

新しい項目のタイプで『Step』を選択

『項目#1』をクリックし、項目#1のタブを開きます。

タイプで『Step』を選択します。

1つのステップが出来上がった時の表示画面

すると、『Step』の下にあるフィールドが全てひとくくりになり画面上で『①』と表記されます。

次のステップを作る

冒頭で説明の通り、こちらのサンプルでは3ステップの構成にしたいのでステップ『②』を作ります。

2つ目のステップの作成・項目を追加→ドラッグ&ドロップ

『+項目を追加』をクリックし、新しいフィールドを追加します。

新しく追加した項目をドラッグ&ドロップで次のステップで表示させたいフィールドの上に持っていきます。
※こちらのサンプルでは『Message』の上に『項目#5』を移します。

新しい項目のタイプをStepに変更

先ほど移動した新しい項目(このサンプルでは項目#4)をクリックし、タイプの『Step』を選択します

すると画面上にStep『②』ができ、

  • ①:名前 / Email
  • ②:Message

という様にステップを分けることができます。

この様に項目を追加し、新しい項目のタイトルや種類、新しいステップで分けることにより好きなステップ数、フィールドを追加・削除でステップフォームを構成することができます。

各フィールドのタブの編集方法につきましては【Elementor Pro『フォーム』ウィジェットの使い方】の記事で詳しく説明をしていますのでそちらを参考にしてください。


以下は冒頭で申し上げた通りのステップの構成通りにフィールドを作成した時の表示画面です。

全3ステップの完成図

編集タブのForm Fieldsの構成は以下の通りです。

  1. 項目#1(ステップ①)
  2. 名前
  3. Email
  4. 項目#4(ステップ②)
  5. 電話番号
  6. 郵便番号
  7. 住所
  8. 項目#8(ステップ③)
  9. Message
ステップ1(項目#1)
ステップ①の表示画面

※画面上の『Next』ボタンをクリックすると次のステップ画面に移行します。

ステップ2(項目#4)
ステップ②の表示画面
ステップ3(項目#8)
ステップ③の表示画面

ステップ項目の編集

ステップにラベルを付けたり、Next / Previousボタン等の編集の仕方です。

Label

『Label』は各ステップナンバーの下に付くラベル(題名)を追加することができます。

※こちらのサンプルではわかりやすくする為に『ステップ+数字』でLabelを表記します。

Next Button

Next Buttonの説明

『Next Button』はフォームで次のステップに進行させる時の『Next』(次へ)ボタンの表記を変更することができます。

※デフォルトは編集タブは未記入ですが『Next』という表示になります。

Next Buttonの表記変更

上記はNext Buttonの表記を『次へ』に変更した時の表示画面です。

Previous Button

Previous Bittonの説明

『Previous Button』(前へ)はステップ1以外で表示されます。
※デフォルト(未記入)では『Previous』と表示されます。

上記は『ステップ2』の表示画面で、Previous ButtonとNext Button両方の設定あります。

こちらのサンプルの『ステップ1』ではNext Buttonの表記を『次へ』としましたが、ステップ1で設定したからといって他のステップでその設定が連動する訳ではありません。
各ボタンの表記設定を変更し統一させるには各ステップのPrevious Button / Next Buttonの表記変更が必要になります。

または、全ての『Previous / Next』のボタン表記を統一させたい場合はここのエディターでボタン表記を変更せず、実はもう一箇所別の場所にある同ボタンのエディター『Step Bottuns』での変更がオススメです。

 Previous Buttonの表記変更

上記は各ボタンを以下の様に変更した時の表示画面です。

  • Previous Buttonを『戻る』
  • Next Buttonを『次へ』

Previous / Next Buttonの統一は『Step Buttons』で編集した方が良い

コンテンツタブ・Buttons

Previous ButtonとNext Buttonにはコンテンツタブの『Button』の編集タブにも同じエディター『Step Bottuns』というセクションがあります。

尚、こちらの『Step Bottuns』の項目は既にデフォルトで以下の様に設定されています。

  • Next Button : Next
  • Previous Button : Previous

    つまりはステップの各項目内のPrevious Button / Next Buttonが未記入時にPrevious / Nextと表示がされていたのは、ここのエディターのデフォルトが反映していたからということです。
Step Buttons・Next / Previousで表記変更

こちらのStep Bottunsで変更したボタン表記は、全てのステップの該当ボタンにて変更が反映し統一されます。

アイコン

アイコンの説明

『アイコン』は、デフォルトで表示されている①②③などのステップを表す数字の部分を以下のツールで表示の変更を行うことができます。

  • なし
  • SVGアップロード
  • アイコンライブラリー:★(デフォルト)

ステップの編集タブ内に『アイコン』の編集セクションがあり、デフォルトで『★』のアイコンが挿入されていることになっていますがフォーム画面上で全く反映していません。
それは編集タブ上に英語で記載をされている『Visible only if selected step type contains ”Icon”』(選択されたステップタイプに”Icon”が含まれる場合のみ表示されます。)とあるように、Iconを変更したい場合はコンテンツタブ・ Step Settingsで『タイプ(Icon)』の設定変更が必須になります。

コンテンツタブ・Step Settings

コンテンツタブ・Step Settings

タイプ

タイプ一覧

『タイプ』はフォーム上部の数字やLabelの部分のタイプを以下より選択します。

  • None
  • Text
  • Icon
  • Number
  • Progress Bar
  • Number & Text(デフォルト)
  • Icon & Text

None

タイプ・None

『None』を選択するとフォーム上部の数字やLabelの表示がなくなります。

Text

タイプ・Text

『Text』を選択するとフォーム上部の表示がLabelのみになります。

Icon

タイプ・Icon

『Icon』はアイコンのみの表示になります。
このアイコンはコンテンツタブ・Form Fieldsのステップ項目のタブ内の『アイコン』のセクションで選択したものが反映されます。

Number

タイプ・Number

『Number』は数字のみの表示になります。

Progress Bar

タイプ・Progress Bar

こちらは『Progress Bar』を選択した時の表示画面です。

Icon & Text

タイプ・Icon & Text

『Icon & Text』は数字部分がアイコンになり、ラベルの表示もあります。

形状

  • Icon
  • Number
  • Number & Text
  • Icon & Text

『形状』は『タイプ』で上記のいずれかを選択した時にのみ編集タブが表示されます。

『形状』では、アイコン又は数字を囲む枠線の形状を以下より選択し、変更することができます。

  • Circle(デフォルト)
  • Sruare
  • Rounded
  • None

Circle

形状の一覧(IconまたはNumbers選択時のみ)・Circle

こちらは形状で『Circle』(円)を選択した時の表示画面です。
※デフォルトはCircleに設定されています。

Square

形状・Square

上記は『Square』(正方形)を選択した時の表示画面です。

Rounded

形状・Rounded

上記は『Rounded』を選択した時の表示画面です。
Squareの角が少し丸くなったような形状です。

None

形状・None

上記は『None』を選択した時の表示画面です。
枠線がなくなり、アイコン又は数字のみが残ります。

スタイルタブ・Steps

スタイルタブ・Steps

書体

Label・書体の変更

『書体』では数字の下部のテキストをタイポグラフィにて編集することが可能です。
詳しいタイポグラフィの編集の仕方については【Elementorの『テキストエディター』ウィジェットの使い方】の記事の同セクションを参考にしてください。

スペース

スペースの変更(Label、フィールド間)

『スペース』では数字 / アイコン・Labelとステップ内の最初のフィールドの間のスペースをカーソルを左右にスライドさせることにより拡張、縮小することができます。
上記はスペースの値を『100』(最大値)に設定した時の表示画面です。
※デフォルトの値は『20』に設定されています。

パディング

パディングの説明

『パディング』は数字 / アイコンとそれらを囲む枠線の間のスペースをカーソルを左右にスライドさせることにより拡大、縮小することができます。
上記はパディングの値を『100』に設定した時の表示画面です。
※デフォルトの値は『30』に設定されています。

メインカラー / サブカラー

メインカラー/サブカラーの説明・INACTIVE時/ ACTIVE時
  • メインカラー:枠線 / 数字又はアイコン / Labelの色
  • サブカラー:枠線の中の色

をカラーピッカーより自由に変更することができます。

また、フォームの進行状況に合わせてメインカラーとサブカラーの色を以下でそれぞれ変更することができます。

  • INACTIVE:有効になっていない状態
  • ACTIVE:有効時
  • COMPLETED:完了時
メインカラー/サブカラー・COMPLETED時

ただし、『COMPLETED』の時のみメインラーとサブカラーの組み合わせが若干異なります。

  • メインカラー:枠線の内側 / Labelの色
  • サブカラー:枠線 / 数字又はアイコンの色

Inactive

INACTIVEの説明

『INACTIVE』とは、有効になっていない状態のことを指します。
ここでは未完了かつ、表示されていないステップの箇所のことです。

ACTIVE

 ACTIVEの説明

『ACTIVE』は有効になっているステップのフォームが表示されている時のことを指します。

COMPLETED

COMPLETEDの説明・フォーム入力し次へをクリック

『COMPLETED』はフォームの入力が完了した時のことを指します。
フォームを完了させるとは、必要事項を入力し、『次へ / NEXT』をクリックして初めて『完了』したことになります。

COMPLETED時の表示画面

こちらはステップ1のフォームの入力を完成させ、ステップ2に移行した時の表示画面です。
ステップ1の数字・Labelの色がCOMPLETED時の色に変化したのがお分かりいただけると思います。

Divider Width

Divider Widthの説明

『Divider Width』はステップとステップを繋いでいる線の太さを最小0〜最大100の値の間で変更することができます。
上記はDivider Widthの値を『10』に設定した時の表示画面です。
※デフォルトの値は『1』に設定されています。

Divider Gap

Divider Gapの説明

『Diveder Gap』はステップとステップを繋いでいる線の間のスペースを最小0〜最大100の値の間で変更することができます。
上記はDivider Gapの値を10』に設定した時の表示画面です。
値を0にするとスペースは完全になくなり、線とステップ全てが繋がります。
※デフォルトの値は『10』に設定されています。

Progress Bar選択時のスタイルタブの編集

Progress Barの説明


こちらはコンテンツタブ・Step Settingsのタイプで『Progress Bar』を選択した時の表示画面です。

スタイルタブ・Stepsの説明

色 / 背景色

 Progress Bar・色/背景色
  • 色:ACTIVE(有効時)とCOMPLETED (完了時)のProgress Barの色
  • 背景色:INACTIVE(有効になっていない状態)

高さ

Progress Bar・高さ

『高さ』はProgress Barの縦幅をカーソルを左右にスライドさせることにより拡張、縮小することができます。
上記は高さの値を『100』(最大値)にした時の表示画面です。
※デフォルトの値は『20』に設定されています。

ボーダーの丸み

Progress Bar・ボーダーの丸み

『ボーダーの丸み』では、値を大きくすることによりProgress Barの角に丸みをつけることができます。
値を調節するカーソルは最小値0〜最大値100の間で調節が可能ですが、前セクションの『高さ』をデフォルトの値の『20』に設定している場合、ボーダーの丸みの最大値は『10』になり、いくら10以上に値を変更してもボーダーはそれ以上に丸みを帯びません。

したがって、高さの値によりボーダーの丸みの最大値は変動します。

Percentage / 書体・色

Percentageの書体と色の変更

『Percentage』(パーセンテージ)とはProgress Barの○○%と表記してある部分の『書体』と『色』を自由に変更することができます。

書体・タイポグラフィの編集の仕方については【Elementorの『テキストエディター』ウィジェットの使い方】の記事の同セクションを参考にしてください。


『ステップフォーム』はフォームを何段階かに分けて閲覧者に入力させることにより、見た目がスッキリするのと同時にスペースの節約にも繋がります。
また、フォーム入力者の入力する心理的な意欲も削ぎにくくなります。

UIの整った、閲覧者にとって親切なサイト作りにステップフォームを取り入れてみてはいかがでしょうか?

この記事ではフォームウィジェットの基本的な設定の仕方を紹介しましたが、

フォームウィジェットの応用したステップフォームの作り方、reCAPTCHA V3の設定方法などを以下の記事よりご覧頂けます!

>>【Elementor Pro フォームウィジェットシリーズ『ステップフォーム』の作り方
>>【Elementor Pro フォームウィジェット『reCAPTCHA V3』の設定方法

是非参考にしてください!

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通