WordPress でタイプフォーム風のフォームを作成する

WordPress で会話型フォームを作成する方法 (2 つの方法)

WordPressで会話形式のフォームを作成する方法をお探しですか?

ユーザーが会話をしているかのようにフォームに入力できるようにすることは、フォームの放棄を減らし、フォームの完了率を高めるための優れた方法です。

この記事では、2つの異なる方法を使用してWordPressでインタラクティブなフォームを作成する方法を説明します。

会話形式のフォームをページに埋め込みたいですか?リードフォームアドオンのチュートリアルにジャンプしてください。リードフォームは、会話形式フォームのすべてのメリットを提供し、フォームを投稿またはページに埋め込むこともできます!

会話形式のオンラインフォームのメリットとは?

実際の会話を模倣したフォームを作成することには、多くのメリットがあります。

  • 入力が簡単で迅速なため、フォームの完了率が向上します
  • ユーザーにとってパーソナルで魅力的です
  • キーボードのみを使用して入力できるため、フォームのアクセシビリティが向上します
  • インタラクティブな性質がユーザーエクスペリエンスを向上させます

今すぐ会話型フォームを作成する

WordPressで会話形式のフォームを作成する方法

さまざまなWPFormsアドオンを使用して会話形式のフォームを作成するには、2つの方法があります。

  • 会話形式フォーム:このアドオンを使用すると、WordPressでTypeformスタイルのフォームを再現できます。フォームは、気を散らすことのないエクスペリエンスのために新しいウィンドウで開きます。会話形式フォームの主な欠点は、既存のページに埋め込むことができないことです。
  • リードフォーム:このアドオンを使用すると、任意の投稿またはページに埋め込むことができる会話形式フォームを作成できます。リードフォームアドオンは、より多くのリードを獲得したい場合、または通常のフォームを置き換える魅力的なマルチステップフォームを公開したい場合に最適です。

これは、リードフォームアドオンで作成されたフォームの例です。

リードフォームの例

このチュートリアルでは、Typeformの代替としてのクラシックなエクスペリエンスを提供する会話形式フォームの使用に焦点を当てます。

ステップ1:WordPressで新しいフォームを作成する

まず、WPFormsプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressにプラグインをインストールする方法に関するこのステップバイステップガイドを参照してください。

次に、新しいフォームを作成する必要があります。WPFormsとその2,100以上のWordPressフォームテンプレートを使用して、任意の数のオンラインフォームを作成できます。

左側のパネルから右側のパネルにドラッグすることで、フォームにフィールドを追加できます。

WPFormsで顧客フィードバックアンケートをカスタマイズする

次に、フィールドをクリックして変更を加えます。フォームフィールドをクリックしてドラッグし、オンラインフォームの順序を並べ替えることもできます。

どのタイプのオンラインフォームを作成する場合でも、フルページ会話形式の連絡先フォームレイアウトを提供できることを忘れないでください。

ステップ2:会話形式フォームアドオンをインストールする

WordPressフォームの準備ができたら、WPForms会話形式フォームアドオンをインストールしてアクティブ化する必要があります。

このアドオンは、新しく作成したWordPressフォームをインタラクティブなフォームに変換する方法です。

これを行うには、WPForms » Addons に移動し、Conversational Forms Addon というラベルのものを探します。

Install Addon をクリックしてインストールし、有効化します。

会話形式アドオンのインストール

Conversational Forms アドオンはこれで使用準備が整いました。しかし、まず、気を散らさない会話形式のフォームを作成する前に設定しておきたい一般的なフォーム設定を簡単に見てみましょう。

ステップ3:フォームの設定を構成する

フォームを希望の外観にカスタマイズしたら、設定できる設定はたくさんあります。

一般設定

まず、設定 » 一般に移動します。

フォームの一般設定にアクセスする

ここでは、フォームの名前、説明、送信ボタンのコピーなどを変更できます。

また、追加のスパム防止機能を有効にすることで、ウェブサイトを不正なフォーム送信から保護することができます。フォームタグを追加することも可能です。

フォーム通知

通知は、ウェブサイトでフォームが送信されるたびにメールを送信するための優れた方法です。

フォームの通知設定にアクセスする

実際、この機能を無効にしない限り、サイトでフォームが送信されるたびに、その通知を受け取ることになります。

この手順については、WordPressでフォーム通知を設定する方法に関するドキュメントをご覧ください。WordPressでフォーム通知を設定する方法

たとえば、自分自身、チームメンバー、サイト訪問者に複数の通知を送信する必要がある場合は、WordPressで複数のフォーム通知を送信する方法に関するステップバイステップのチュートリアルをご覧ください。

さらに、メール全体のブランディングを統一したい場合は、メールテンプレートにカスタムヘッダーを追加する方法に関するこのガイドをご覧ください。

カスタムメールヘッダー

フォーム確認

フォーム確認は、サイト訪問者がウェブサイトでフォームを送信した後に表示されるメッセージです。これにより、フォームが処理されたことをユーザーに知らせ、次のステップを伝える機会を提供します。

アンケートフォームの確認設定を開く

WPFormsには3種類の確認タイプがあります。

  1. メッセージ。ウェブサイトでフォームが送信されたときに表示される簡単なメッセージで、感謝の意を表し、次のステップを伝えます。
  2. ページの表示。サンキューページなど、ウェブサイトの別のページにユーザーをリダイレクトします。
  3. URLに移動(リダイレクト)。サイト訪問者を別のウェブサイトに送信します。

訪問者の行動に基づいて異なる確認メッセージを表示したい場合は、条件付きフォーム確認を作成する方法を必ずお読みください。

フォームの設定が完了したら、フォームビルダーの右上にある Save をクリックします。

ステップ4:会話形式フォームの設定を構成する

フォームの一般設定が構成されたので、会話形式フォームの設定を構成する時間です。

これを行うには、フォームビルダーで Settings » Conversational Forms に移動し、Enable Conversational Form Mode オプションをオンにします。

会話形式モードのオン

これをオンにすると、ニーズに合わせてカスタマイズできる多くの設定が表示されます。

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

まず、サイト訪問者に表示されるフォームのタイトルを付けます。これは、フォームが何についてのものか、そして訪問者にどのような行動をとってほしいかを知らせるのに役立ちます。

会話形式のフォームタイトルとメッセージの設定

次に、サイト訪問者向けの短いメッセージを追加できます。これにより、追加情報を提供し、フォームに入力する際に何を期待すべきかをユーザーに知らせることができます。

パーマリンク

オンラインフォームで会話形式フォームモードを有効にすると、Conversational Forms アドオンは自動的に一意のパーマリンクを作成します。

会話形式のパーマリンク設定

必要に応じてこのパーマリンクを変更することも、そのままにしておくこともできます。

いずれにしても、これは、会話型フォームのリンクをクリックしてサイトにアクセスしてもらいたい場合に、メールキャンペーン、内部リンク、ソーシャルメディア投稿で使用するURLです。

設定が非常に簡単なので、WPFormsは最高のTypeform代替です。

ヘッダーロゴ

インタラクティブなフォームランディングページをカスタマイズするために次にできることは、ロゴを追加することです。画像をアップロードをクリックし、フォームランディングページに追加したい画像を選択します。

会話形式にヘッダーロゴを追加する

WPFormsブランディングを非表示にする設定をオンにすることで、WPFormsのブランディングを削除することもできます。

配色とプログレスバー

WPForms会話型フォームアドオンの最も優れた点の1つは、会社のブランディングに合った配色でインタラクティブなフォームランディングページをカスタマイズできることです。

選択した配色によって、フォームのランディングページの背景色とフォームのボタンの色が決まります。

青い配色を使用した会話形式のフォーム

皆様の便宜を図るため、どのような場合でも見栄えの良い、いくつかの優れた配色をご用意しました。

カラーピッカーを使用して会話形式の配色を設定する

プリセットカラーがお好みでない場合は、カラーピッカーを使用してカスタムカラーを選択することもできます。

プログレスバーのスタイルも2種類から選択できます。

  1. パーセンテージ:ユーザーがフォームに入力する際の進捗状況をパーセンテージで表示します。
  2. 割合:ユーザーが完了したフォームフィールドの数を示し、あといくつ質問に答える必要があるかを知ることができます。

WPFormsの会話形式のプログレスバーのスタイル

会話型フォームランディングページのすべての設定を構成したら、上部近くにある会話型フォームのプレビューボタンをクリックして、フォームが公開されたときの見た目を確認できます。

すべてが希望どおりに見えたら、保存をクリックします。

これでフォームは公開され、送信の受付準備が整いました!

今すぐ会話型フォームを作成する

次に、フォーム放棄を減らす

これで完了です!WordPressでインタラクティブなフォームを作成する方法がわかりました。これで、ユニークなURLまたはインタラクティブなフォームランディングページへのリンクを持つ人々は、それを表示して入力できるようになります。

フォーム放棄と戦い、売上を伸ばすための他の方法を探している場合は、フォーム放棄を減らし、売上を伸ばす方法に関するこの記事をご覧ください。

では、何を待っていますか?今日から最も強力なWordPressフォームプラグインを使い始めましょう。

そして忘れないでください、この記事が気に入ったら、FacebookTwitterでフォローしてください。

開示:当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPFormsがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかをご覧ください

編集チーム

WPForms編集チームは、WordPressの専門家と中小企業の成長スペシャリストで構成されています。私たちは、起業家やウェブサイト所有者の成功を支援することに情熱を注いでいます。 もっと詳しく

最高のWordPressドラッグアンドドロップフォームビルダープラグイン

簡単、高速、安全。WPFormsを信頼する600万人以上のウェブサイト所有者に加わりましょう。

WordPressで会話型フォームを作成する方法(2つの方法)」に関する4件のコメント

  1. 少し混乱しています。構築中のサイトにシンプルなフォームが必要でした。WPフォームは完璧に見えました。最初のものを数分で作成しました。テストのために記入して送信しました(管理者のメールアドレスとWPサイトの唯一のユーザーとして私のメールアドレスが記載されています。他のメールアドレスを入力できる場所が見つからなかったので、完了したフォームの送信を受け取るだろうと思いました。)メールで受け取ることを期待していました。届きません。何が足りないのでしょうか?

  2. 会話形式を、作成されたパーマリンクを使用する代わりに、サイトの別のページに埋め込むことはできますか?埋め込もうとすると、タイプフォームのような会話形式ではなく、従来の形式に変わってしまいます。

    また、「このフォームを完了するには、ブラウザでJavaScriptを有効にしてください」という自動追加メッセージを削除する方法はありますか?

    1. Briさん、こんにちは。現在、会話形式を通常のページに埋め込む機能はありません。これは素晴らしい機能だと思いますので、機能リクエストトラッカーに追加します。それまでの間、回避策としてLeads Formsアドオンを検討してみてください。

      表示されているJavaScriptエラーを修正するには、こちらのドキュメントをご覧ください。

コメントを追加

コメントを残していただきありがとうございます。コメントはすべて、当社のプライバシーポリシーに従ってモデレーションされます。また、すべてのリンクはnofollowとなります。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。

このフォームはCloudflare Turnstileによって保護されており、Cloudflareのプライバシーポリシーおよび利用規約が適用されます。