フォームをより人間的なものにし、ユーザーがフォームに入力する際の負担を軽減したいとお考えですか?
多くの読者から、WordPressでTypeformのようなフォームを作成する方法についてチュートリアルを書いてほしいというリクエストがありました。すべての質問を一度にリストアップする従来のお問い合わせフォームやアンケートフォームとは異なり、会話型フォームは対面での会話に似た一問一答のアプローチをとります。
この投稿では、WordPressで会話形式のフォームを作成する方法を紹介します。
WordPress用会話フォームプラグイン(Typeform代替)
以前はWordPressに特化した優れたソリューションがなかったため、WordPressサイトで会話型フォームを作成するのは困難でした。
いくつかのSaaSアプリケーションはこの機能を提供しており、中でもTypeformは最も人気があったが、いくつかの欠点があった:
- TypeformはSAAS(Software as a Service)ツールであり、フォームのデータはサーバーに保存されます。つまり、データの安全性に関して他者を信頼することになります。
- Typeformは中小企業にとっては高額だ。プレミアムプランは$25/ユーザー/月からで、より多くの機能を使いたい場合は$83/ユーザー/月になります。
Typeformは無料プランを提供していたが、制限が多すぎたため、WordPressユーザーにとっては魅力的ではなかった。
そこで私たちはWPFormsのチームにTypeformに代わるWordPress用のフォームの作成を依頼しました。WPFormsのConversational Formsを使えば、Typeformのような高いコストをかけずにインタラクティブなWordPressフォームを作成することができます。
WPFormsは600万以上のサイトで使用されている最高のWordPressフォームプラグインです。また、市場で最もユーザーフレンドリーなフォームビルダーです。
この新規アドオンを使えば、どんなフォームも90秒以内に会話型フォームに変身させることができる。Typeformとは異なり、WPFormsはオープンソースのWordPressプラグインであるため、フォームデータはすべてサードパーティのアプリではなく、あなたのサイトに保存されます。
WPFormsはTypeformよりも費用対効果が高い。年間プランを199.50ドルで購入することができ、無制限のフォームやアンケート、会話型フォームを含むその他の強力な機能を利用することができます。
WordPressサイトで会話形式のフォームを簡単に作成する方法を見てみましょう。
情報開示:WPFormsはWPBeginnerの開発チームによって作成されました。それは私たちのプレミアムWordPressプラグインの一つです。
動画チュートリアル
動画が気に入らなかったり、もっと説明が必要な場合は、このまま読み進めてください。
WordPressで会話型フォームを作成する
まず最初にWPFormsプラグインをインストールして有効化します。詳しい手順については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
Conversational Forms Addon’にアクセスするには少なくとも ‘Pro’ プランが必要です。WPBeginnerユーザーはWPFormsクーポンを使ってWPFormsライセンスをすべて50%OFFで購入できます。
プラグインを有効化したら、WPForms ” 設定ページにアクセスしてライセンスキーを確認する必要があります。この情報はWPFormsサイトのアカウントエリアにあります。
次にWPForms ” Addonsページで Conversational Forms アドオンを探します。
アドオンのインストール」ボタンをクリックするだけです。
プラグインは数秒以内に Conversational Form アドオンをインストールして有効化します。
アドオンの状態が「有効化」と表示されたら、使用を開始できることを意味します。
WPFormsで作成された新規または既存のフォームで会話型フォームを有効化することができます。
会話型フォームはフォームの放棄を減らすのに有効である。双方向性と対面式の会話アプローチは、フォーム完了率の向上につながります。
これは以下のようなフォームに非常に効果的である:
これらのフォームは一般的に長く、より多くのフィールドを含みます。これらの質問をすべて一度に表示すると、ユーザーは圧倒され、フォームを放棄してしまいます。
会話型フォームは、ユーザーに一度に1つの質問に答えてもらうことで、この問題を解決します。退屈な長いフォームの代わりに、よりインタラクティブに感じられ、ユーザーを飽きさせません。
この例では、会話形式のアンケートフォームを作成する方法を紹介します。
まず、通常のアンケートフォームを作成する必要があります。これは WordPress 管理エリアのWPForms ” 新規追加をクリックすることで行うことができます。詳細については、WordPress でアンケートを作成する方法のステップバイステップガイドを参照してください。
WPFormsでフォームを作成するのは、そのシンプルなドラッグアンドドロップインタフェースを使用して簡単です。あなたは右側のフォームエディターに左側のフォームフィールドをドラッグすることができます。
例えば、WPFormsのアンケートフォームエディターのサンプルはこんな感じです:
アンケートの質問を追加したら、左側のパネルの設定 ” 会話型フォームタブに移動します。
Enable Conversational Form Mode’ボックスをチェックする必要があります。
その後、会話フォームの設定とカスタマイザーオプションが表示されます。
これらのオプション設定により、ロゴ、配色、メッセージを使った魅力的な会話形式のランディングページをデザインすることができます。
フォームはいつでもプレビューできます。
会話フォーム設定の右上にある「会話フォームをプレビュー」ボタンをクリックするだけです。
最初に、会話フォームのタイトルフィールドが表示されます。
そこにフォームの短い説明的なタイトルを入力することができます。例えばアンケートにご協力ください!
次に、「メッセージ」フィールドまでスクロールダウンします。
ここでは、ユーザーにフォームへの入力を促す短いメッセージを追加することができます。
下にスクロールすると、パーマリンクのオプションが表示されます。
パーマリンクは会話フォームのランディングページのユニークなURLです。プラグインはフォームのタイトルを使って各会話フォームのパーマリンクを自動的に作成します。必要に応じて変更できます。
パーマリンクを設定する際は、メールキャンペーンやソーシャルメディア投稿でこのURLを使用する可能性があるため、短くシンプルなものにすることをお忘れですか?
会話フォームページをカスタマイズするために次にできることは、ヘッダーロゴを追加することです。Upload Image’ボタンをクリックし、アップロードする画像を選択します。
その下にWPFormsのブランディングを非表示にするチェックボックスの設定があります。フォームのランディングページに’powered by WPForms’のメッセージを表示したくない場合は、’Hide WPForms Branding’の隣にあるチェックボックスにチェックを入れてください。
右上の「会話形式のプレビュー」ボタンをクリックすると、ブランディングの外観をプレビューできます。
その後、フォーム送信ボタンとページ背景をカスタマイズする配色オプションがあります。
あらかじめ設定された色のいずれかを使用するか、カラーピッカーを使用して新しい色を選択することができます。
最後に、プログレスバーの設定です。
2つのスタイルから1つを選択できます:パーセンテージとプロポーション。
各プログレス・バー・スタイルがどのように見えるかを確認したい場合は、スタイルを1つずつ選択してフォームをプレビューすることができます。
またはスクリーンショットをご覧ください:
会話フォームの設定がすべて完了したら、プレビューして実際のサイトでどのように見えるかを確認することができます。
次に、上部にある「保存」ボタンをクリックして、設定を保存します。
それだけだ!
次に、会話フォームを任意のページや投稿に追加することができます。ページを編集するか、新規ページを追加してください。
コンテンツエディターに入ったら、WPFormsブロックを追加し、ドロップダウンメニューからフォームを選択するだけです。
これで、ブラウザーで会話フォームのリンクを開き、その動作を確認することができます。
会話型アンケートフォームのページはこんな感じでした:
会話型フォームのランディングページの準備ができたら、WordPressのナビゲーションメニューにリンクを追加し、メールキャンペーン、ソーシャルメディア更新、ブログ投稿で使用することができます。
WordPress で会話型フォームを簡単に作成する方法について、この投稿がお役に立てれば幸いです。WordPress でフォームのコンバージョンをトラッキングする方法や、WordPress のエキスパートが選ぶ最高の SEO プラグインとツールもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Kathy Rowland says
Saving this helpful info for later! Great step-by-step tutorial.
WPBeginner Support says
Thank you, glad you found it helpful
管理者
Becky Antkowiak, beckyantkowiak.com says
I’m in the very beginning stages of forming a nonprofit; there’s not a free plugin that does this, is there?
Also, just as an FYI, in another article, I didn’t see a comment option, but it refers to CSS Hero plugin–I couldn’t find that plugin in WP. Not sure if I’m doing something wrong.
WPBeginner Support says
We do not have a recommended free alternative at the moment. CSS Hero is a paid plugin that we cover in our article here: https://www.wpbeginner.com/plugins/css-hero-review-wordpress-design-customization-made-easy/
管理者
Bram says
Looks amazing but does it have logic jumps like typeform?
WPBeginner Support says
If you mean conditional logic you can set that up with WPForms but for questions about what is offered by the plugin, you would want to reach out to the plugin’s support
管理者
Kleber says
I like WPForm, but it doesnt have “calculator” function, so I cant switch Typeform for it
WPBeginner Support says
Thanks for the feedback, that is something WPForms can look to add as a feature in the future.
管理者
New postal says
good
WPBeginner Support says
Thank you
管理者