会話型フォームアドオン

訪問者との対面のような会話を感じさせるフォームを作成しませんか？ WPFormsの会話型フォームアドオンを使用すると、新規または既存のフォーム用のスタンドアロンページを作成できるだけでなく、より個人的な感覚で完了率を向上させることができるユニークなエクスペリエンスを提供します。

このチュートリアルでは、WPFormsで会話型フォームアドオンを使用する方法を説明します。

---

会話型フォームとは？

会話型フォームは、対面での会話のように、より個人的なユーザーエクスペリエンスを提供します。平均的なフォームと会話型フォームを異なるものにしている主な特徴のいくつかを次に示します。

• ガイド付きエクスペリエンス: ユーザーがページに最初にアクセスしてからフォームを送信するまで、現在のステップのみに焦点が当てられます。これにより、ユーザーはフォームを通じてガイドされ、会話のようなエクスペリエンスが提供されます。
• スタンドアロンページ: フォームは、気を散らすものがない、独自のページに表示されます。
• ナビゲーションオプション: ほとんどのフォームでは、ユーザーはマウスでフィールドをクリックします。しかし、会話型フォームでは、キーボードだけでフォーム全体に入力することもできます（またはマウスを使用することもできます）。

その結果、ユーザーがフォームを体験するためのフレンドリーで魅力的な方法が得られます。多くの場合、フォームの完了率も向上します。

会話型フォームアドオンのインストール

開始する前に、まずWordPressサイトにWPFormsをインストールして有効化する必要があります。

次に、ライセンスキーを検証する必要があります。その後、会話型フォームアドオンをすばやくインストールして有効化できるようになります。

会話型フォームの作成とカスタマイズ

会話型フォームアドオンをインストールしたら、新しいフォームを作成するか、既存のフォームを編集する必要があります。

フォームビルダーを開いたら、会話型フォームに含めたいフィールドを追加およびカスタマイズします。次に、設定 » 会話型フォームに移動します。

ここで、会話型フォームモードを有効にするというラベルのチェックボックスをオンにします。

このボックスをオンにすると、追加のオプションが表示されます。これらの設定については、以下で詳しく説明します。

会話型フォームのプレビュー

編集中にいつでもフォームページの見た目を確認したい場合は、フォームを保存して、青い会話型フォームのプレビューボタンをクリックしてください。

会話型フォームのタイトルとメッセージ

まず、会話型フォームにタイトルを追加できます。これは、会話型フォームのページの先頭近くに大きなテキストで表示されます。

次に、オプションでメッセージを追加することもできます。これはタイトルのすぐ下に表示され、フォームに入力するユーザーに指示や追加の詳細を共有するのに適した場所です。

フォームのタイトルとメッセージがフロントエンドでどのように表示されるかの例を次に示します。

パーマリンク

パーマリンクは、訪問者が会話型フォームを表示できるURLです。このリンクをユーザーと共有することになるため、通常はURLを短く覚えやすいものにすることをお勧めします。

ヘッダーロゴ

オプションで、フォームのヘッダーに画像またはロゴを追加できます。この画像は、フォームページのタイトルの上に表示されます。

画像のアップロードボタンをクリックして、メディアライブラリまたはコンピューターから画像ファイルを選択すると、ヘッダーロゴのプレビューが表示されます。

大きな画像を使用したい場合は、以下のサイズに関する推奨事項を検討してください。これにより、画像がサイトのフロントエンドで最も見栄えが良くなります。

• 推奨最大ロゴの高さ: 125ピクセル
• 推奨最大ロゴの幅: 800ピクセル

ヘッダーロゴがフロントエンドでどのように表示されるかの例を次に示します。

WPFormsのブランディングを非表示にする

デフォルトでは、訪問者は会話型フォームのフッターに「WPForms提供」と表示される小さなWPFormsロゴを見ることができます。

これを表示したくない場合は、WPFormsのブランディングを非表示にするというラベルの付いたチェックボックスをオンにしてください。

カラー スキーム

選択した配色によって、会話型フォームのページの背景、テキスト、ボタンの色が決まります。

選択できるデフォルトの色のオプションがいくつかあります。

または、スポイトアイコンをクリックして任意のカスタムカラーを選択することもできます。

プログレスバー

会話型フォームのフッターでは、ユーザーはフォーム内での進捗状況を確認できます。この進捗状況をパーセンテージまたは割合の形式で表示することを選択できます。

パーセンテージ形式では、「完了率42%」のように、完了した割合が表示されます。

割合形式では、完了したフィールドの数とフォームの合計フィールド数が、「7件中2件完了」のように表示されます。

会話型フォームの設定を構成したら、ビルダーを終了する前に必ずフォームを保存してください。

よくある質問

このセクションでは、会話型フォームに関する最もよく受ける質問の詳細を共有します。

WPFormsの会話型フォームはTypeformのようなものですか？

はい、Typeformは会話型フォームに最も似たフォームエクスペリエンスです。ただし、WPFormsの会話型フォームはWordPressサイトでの使用に特化して設計されており、WPFormsの他の強力な機能と組み合わせることができます。

キーボードで会話型フォームを操作するにはどうすればよいですか？

会話型フォームはマウスまたはキーボードで操作できますが、そのユニークな機能の1つは、必要に応じてキーボードだけでフォームに入力できるオプションです。さまざまな操作に使用できるキーは次のとおりです。

一般的なフォームキー

• 次のフィールドに移動: Enterキー
• 前のフィールドに戻る: 上矢印
• 次のサブフィールドに移動: （例: 名から姓のサブフィールドに移動する場合）下矢印またはTabキー
• 前のサブフィールドに戻る: 上矢印またはShift + Tab

フィールド固有のキー

• チェックボックス、複数選択、評価、およびネットプロモータースコアフィールド
  • オプション間を移動: 右矢印および左矢印
  • オプションを選択: フィールドオプションに表示されている文字または数字キーを押すか、目的のオプションに移動してEnterキーまたはSpaceキーを押します
• リッカート尺度フィールド
  • オプションを選択: フィールドオプションに表示されている文字キーを押します
• ドロップダウンフィールド
  • オプションを選択: 入力を開始して一致するオプションを検索するか、下矢印を押して利用可能なオプションを移動します
  • ドロップダウンを閉じる: Escapeキー
•  段落テキストフィールド
  • 新しい行を作成: Shift + Enter

会話型フォームが標準の埋め込みフォームと異なるのはなぜですか？

会話型フォームは、すべてのWordPressテーマでユーザーにシームレスなエクスペリエンスを提供するために、独自の特別なスタイルセットが与えられています。

会話型フォームに日付ピッカーが表示されないのはなぜですか？

会話型フォームはキーボードで簡単に入力できるように設計されているため、訪問者は日付フィールドに日付ピッカーを表示しません。代わりに、ユーザーは次のようにフィールドに入力して日付を入力できます。

ただし、より視覚的でインタラクティブなエクスペリエンスのために日付ピッカーを有効にしたい場合は、設定方法に関する開発者向けドキュメントを参照してください。

複数選択およびチェックボックスフィールドに表示されるショートカットキーのテキストをパーソナライズできますか？

はい、会話型フォームでは、カスタムCSSスニペットを使用して、複数選択およびチェックボックスフィールドのオプションに表示されるショートカットキーテキストをカスタマイズするオプションがあります。コードスニペットは、WPFormsコードスニペット ライブラリで利用できます。

この変更を実装する方法の詳細については、開発者向けドキュメントを参照してください。

会話型フォームでレイアウトフィールドを使用できますか？

いいえ、フォームにレイアウトフィールドが含まれている場合、会話型フォームを有効にすることはできません。会話型フォームモードを有効にしようとすると、このメッセージが表示されます。

これで完了です！サイト用にカスタム会話型フォームを作成できるようになりました。

次に、フォームをマーケティングサービスに接続して、リードをより簡単に収集し、フォローアップできるようにしますか？Mailchimp、Constant Contact、AWeber、Drip、Campaign Monitor、GetResponseなどのマーケティング連携のチュートリアルを確認してください。