ワードプレスでtypeformsスタイルのフォームを作成する

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

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

まるで会話をしているかのようにユーザーがフォームに記入できる方法を提供することは、フォームの放棄を減らし、フォームの完了率を高める素晴らしい方法です。

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

会話形式のフォームをページに埋め込みたいですか?Lead Forms アドオンのチュートリアルをご覧ください:Lead Forms は会話型フォームのすべての利点を提供し、投稿やページにもフォームを埋め込むことができます!

会話型オンラインフォームの利点とは?

実際の会話を模倣したフォームを作成することには、多くの利点がある:

  • 記入がより簡単で速くなり、フォームへの記入率が向上
  • ユーザーにとってパーソナルで魅力的
  • キーボードだけで入力できるため、フォームへのアクセシビリティが高まる
  • インタラクティブな性質がユーザー体験を向上させる

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

WordPressで会話型フォームを作成する方法

異なるWPFormsアドオンを使用して会話型フォームを作成する2つの方法があります。

  • Conversational Forms:このアドオンを使うと、TypeformスタイルのフォームをWordPressで再現できます。フォームが別ウィンドウで開くので邪魔になりません。Conversational Forms の主な欠点は既存のページに埋め込めないことです。
  • リードフォームこのアドオンでは、任意の投稿やページに埋め込むことができる会話形式のフォームを作成することができます。リードフォームアドオンは、より多くのリードを生成したい場合や、通常のフォームに代わる魅力的なマルチステップフォームを公開したい場合に最適です。

Lead Formsアドオンで作成したフォームの例です:

リードフォームの例

このチュートリアルでは、会話型フォームを使うことに焦点を当てます。

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

まず最初に行う必要があるのは、WPFormsプラグインをインストールして有効化することです。詳しくは、WordPressにプラグインをインストールする方法のステップバイステップガイドを参照してください。

次に、新しいフォームを作成する必要があります。WPFormsと2,000以上のWordPressフォームテンプレートを使えば、いくつでもオンラインフォームを作成できます。

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

WPFormsで顧客フィードバック調査をカスタマイズする

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

覚えておいてほしいのは、どのタイプのオンラインフォームを作成しても、全ページを会話形式のコンタクトフォームにレイアウトできるということだ。

ステップ 2: Conversational Forms アドオンをインストールする

WordPress フォームの準備ができたら、WPFormsConversational Forms アドオンをインストールして有効化します。

このアドオンを使えば、新しく作成したWordPressフォームをインタラクティブフォームにすることができます。

これを行うにはWPForms"Addonsに行ってConversational Forms Addon と書かれたものを見つけてください。

アドオンのインストール]をクリックして、アドオンをインストールし、有効にします。

Conversational Formsアドオンのインストール

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

ステップ 3: フォームの設定

フォームを思い通りにカスタマイズしたら、多くの設定を行うことができます。

一般設定

開始するには、設定"一般に進みます。

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

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

また、不要なフォーム送信からウェブサイトを安全に保つために、追加のスパム防止機能を有効にしたり、フォームタグを追加したりすることもできます。

フォーム通知

Notificationは、あなたのウェブサイトでフォームが送信されるたびにメールを送信する素晴らしい方法です。

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

実際、この機能を無効にしない限り、誰かがあなたのサイトでフォームを送信すると、その通知が届きます。

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

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

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

カスタムEメールヘッダー

フォームの確認

フォームの確認とは、ウェブサイト上でフォームを送信するとサイト訪問者に表示されるメッセージです。フォームが処理されたことを知らせ、次のステップを知らせることができます。

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

WPFormsには3つの確認タイプがあります:

  1. メッセージ 誰かがあなたのウェブサイトのフォームを送信すると表示されるシンプルなメッセージです。
  2. ページを表示する。サンキューページなど、ユーザーをウェブサイトの別のページにリダイレクトします。
  3. URLへ移動(リダイレクト)。サイト訪問者を別のウェブサイトに移動させる。

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

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

ステップ 4: 会話型フォームの設定

フォームの一般的な設定ができたので、次は会話フォームの設定をしましょう。

これを行うには、フォームビルダーの設定"会話型フォームを開き、会話型フォームモードを有効にするオプションをオンにします。

会話形式モードをオンにする

そうすると、ニーズに合わせてカスタマイズできる設定がたくさん表示される。

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

まず始めに、サイト訪問者に表示するフォームのタイトルをつけましょう。これはあなたのフォームが何なのか、どんな行動を取ってほしいのかを知らせるのに適しています。

会話型フォームにフォームタイトルとメッセージを設定する

次に、サイト訪問者のために短いメッセージを追加することができます。これにより、フォームに入力する際に何を期待すればよいかを知ってもらうための追加情報を追加することができます。

パーマリンク

オンラインフォームの会話フォームモードを有効にすると、会話フォームアドオンが自動的にユニークなパーマリンクを作成します。

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

このパーマリンクは変更してもいいし、そのままにしてもいい。

いずれにせよ、このURLはEメールキャンペーンや内部リンク、さらにはソーシャルメディアの投稿で、会話形式のリンクをクリックしてサイトを訪問してもらいたいときに使用します。

WPFormsはTypeformに代わる最高のツールです。

ヘッダーロゴ

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

会話型フォームにヘッダーロゴを追加する

また、WPFormsのブランディングを隠す設定をオンにすることで、WPFormsのブランディングを削除することができます。

カラースキームとプログレスバー

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

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

ブルーを基調とした会話形式

そこで、どのような配色を選んでも見栄えが良くなるように、いくつかの素晴らしい配色を紹介しよう。

カラーピッカーを使って会話フォームの配色を設定する

あらかじめ設定されている色が気に入らない場合は、カラーピッカーを使っていつでもカスタムカラーを選ぶことができます。

また、2つのプログレス・バー・スタイルから選ぶことができる:

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

WPFormsの会話型フォームのプログレスバースタイル

会話型フォームのランディングページの設定がすべて完了したら、上部にある会話型フォームのプレビューボタンをクリックし、フォームが公開されたときにどのように表示されるかを確認することができます。

すべてが思い通りになったら、「保存」をクリックします。

これで、フォームが稼動し、投稿の受付を開始する準備が整いました!

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

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

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

フォームからの離脱に対抗する方法をもっとお探しなら、フォームからの離脱を減らして売上を上げるためのこの記事をご覧ください。

何を待っているのですか?今すぐ最強のWordPressフォームプラグインを使い始めましょう。

この記事が気に入ったら、フェイスブックと ツイッターをフォローしてください。

情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。WPFormsがどのように資金を調達しているのか、なぜそれが重要なのか、そしてどのように私たちをサポートできるのかをご覧ください。

編集チーム

WPFormsの編集チームは、WordPressのエキスパートと中小企業成長のスペシャリストで構成されています。私たちは起業家やウェブサイトオーナーの成功を支援することに情熱を注いでいます。もっと知る

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

簡単、速い、安全。WPFormsを信頼する600万人以上のWebサイトオーナーの仲間入りをしてください。

このフォームを入力するには、ブラウザのJavaScriptを有効にしてください。

4 comments on "WordPressで会話形式のフォームを作る方法(2つの方法)"

  1. ちょっと混乱しています。 今作っているサイトにシンプルなフォームが必要でした。 WPフォームは完璧に見えました。 数分で最初のフォームを作りました。WPサイトでは、私自身のEメールが管理者として、また唯一のユーザーとして登録されています。 他のEメールを入力できる場所がなかったので、フォーム送信が完了したら受け取るものと思っていた)。 私のメールに届くと思っていた。 何か見落としているのでしょうか?

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

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

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。

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