WordPress WPFormsマルチページお問い合わせフォームを作成する方法

ウェブサイトからの訪問者や顧客からの問い合わせを受けたとき、一度に多くの情報を必要とする場合、拒否感を与えることができます。 この場合、複数のページに分けて情報を受信すると、ユーザーの利便性を向上させることができます。 WordPress コンタクトフォームのプラグインである WPFo実効値では、マルチページお問い合わせフォームを作成し段階的に情報を受け取ることができます。

WordPress WPFormsプラグインでマルチページお問い合わせフォームを作成する方法

WordPressでコンタクトフォームのプラグインを使用すると、ホームページから簡単に訪問者からの問い合わせを受けることができます。 WordPressは お問い合わせフォーム7、WPForms、 重力フォーム, Quform など、様々なコンタクトフォームのプラグインがあります。

この記事では、WPFormsプラグインを使用して、訪問者が段階的に情報を入力することができるマルチステップお問い合わせフォーム(Multi-Step Form)を作成する方法について見てみましょう。

ステップ1: WordPressでお問い合わせフォームを作成し

まずWPFormsプラグインをインストールして有効にする必要があります。 ステップお問い合わせフォームを作成するには 有料版が必要です。

プラグインをインストールして有効にした場合 WordPress 管理者ページで WPForms> Add New(新規作成)をクリックして、新しいフォームを作成します。

WordPress コンタクトフォームWPFormsプラグイン

Select a Template(システムフリート選択) ページで事前に作成されたテンプレートを選択するか、 空白のフォームを選択して、空白のフォームを利用して、最初からお問い合わせフォームを作成することができます。 テストで Simple Contact Form(シンプルお問い合わせフォーム)を選択してみましょう。

WordPress 人気コンタクトフォームのプラグインWPFormsお問い合わせフォームを作成する

WPFormsは左のフィールドをドラッグ右の​​フォームの好きなところに置くドラッグ&ドロップ方式でお問い合わせフォームを作成することができます。 必要なフィールドを追加してお問い合わせフォームを構成するようにします。 ラベルも韓国語で適切に変更することができます。

ステップ2:フォームを複数のパーツに分割(ページ分割)

お問い合わせフォームをカスタムして、必要に応じ作成した場合、フォームを複数のページに分割することができます。 Add Fields(フィールド分割)から Fancy Fields(ファンシーフィールド) セクションの Page Break(改ページ) フィールドをマウスで選択し、右のフォームの任意の場所にドラッグします。

WordPress ステップお問い合わせフォームの作成

これにより、上の図のようにPage Breakフィールドが追加され、すぐ上に「Next」ボタンが表示されます。 このように、フォームを複数の部分に分けることができます。

ステップ3:進行バーをカスタマイズする

最終的に次のようなデザインで、段階的に情報を入力するコンタクトフォームを作ろうとします。

WordPress マルチページお問い合わせフォームを作成し

上の図では、まず、プロファイル情報を入力し、次へを押すアカウント情報セクションに移動します。 入力する情報が多い場合は、ページ上のすべてのフィールドが表示されたら、ユーザーが事前に恐怖を食べてフォームを入力せずにいくことができます。 このような状況では段階的に入力するお問い合わせフォームを使用すると、コンバージョン率を高めることができます。

進行状況バーをカスタマイズするには、まず右側の[First Page]分割セクションをクリックします。

WordPress WPFormsマルチレベルお問い合わせフォーム作成

これにより、上記のようにフィールドを設定する画面が表示されます。 左から、次のようなオプションを設定することができます。

  • 進行状況インジケーター - 進行状況バーの種類を選択できます。 Progress Bar、Circles、Connector、Noneから選択できます。 それぞれのオプションを選択して、好きなものを最後に選択します。
  • Page Indicator Color - 進行バーの色
  • ページタイトル - 最初のページセクションのタイトルを指定します(例:プロファイル)。

同様の方法で、残りのPage Breakフィールドを設定します。

WordPress WPFormsステップページ

Page Titleにページのタイトルを入力し、次のラベルに「次へ」フレーズを必要に応じて指定するようにします(「次へ」または「次へ」など)。

そして Display Previous オプションを ONに設定すると、「前」ページに移動できるボタンがアクティブになり、表示されます。

WordPress コンタクトフォームのプラグイン - マルチステップコンタクトフォームの作成

前のラベルに「Previous」ボタンのラベルを指定します(例:「前」または「前ページ」)。

すべての設定を完了した場合 Saveをクリックして変更を保存します。

次のステップ...

今の基本的なお問い合わせフォームの作成が完了しました。 設定 タブをクリックして、フォームに関連付けられて一般的な設定と通知設定をするようにします。

WordPress WPForms一般設定

すべての設定を終えたら上部の 埋め込むをクリックして、ショートコードをコピーしてから、ページに貼り付けることができます。 または、ページのWPFormsウィジェットを選択し、お問い合わせフォームのタイトルを選択して、ページに挿入することができます。

WordPress Gutenberg (ブロックエディタ)にコンタクトフォームを追加する

最後に、

以上でWPFormsプラグインを使用して、複数のページコンタクトフォームを作成する方法を説明しました。 入力する情報が多い場合に活用すると、ユーザーの経験(UX)を向上させ、コンバージョン率を高めるのに役立つことができます。

参照


2のコメント

  1. 発生するイベントでフォームを作成し、その情報をフロントで管理しようとgravityフォームを使用しようとします。 gravity外推薦していただけるフォームやプラグインあれば紹介してください。

    1. Gavity Formsプラグインを使用すると、なりそうです。
      GravityViewを使用すると、Graivty Formsデータをフロントエンドに表示することができます。

      より専門的にしたい場合はToolsetを使用して、ポストタイプを作成、フロントエンドに表示することも可能であることです。

      https://www.thewordcracker.com/intermediate/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%ED%94%84%EB%9F%B0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%8F%AC%EC%8A%A4%ED%8C%85-%EC%96%91%EC%8B%9D/

コメントを残す

*メールアドレスは公開されません。