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

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

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

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

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

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

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

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

ワードプレスコンタクトフォームWPFormsプラグイン

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

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

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

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

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

ワードプレスステップお問い合わせフォームを作成し

その後、上記の図のようにPage Breakフィールドが追加され、すぐに「Next」ボタンができます。 この方法でフォームを複数のパーツに分割することができます。

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

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

ワードプレスマルチページお問い合わせフォームを作成し

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

プログレスバーをカスタムする前に、右側の「First Page "分割セクションをクリックします。

ワードプレスWPFormsマルチレベルお問い合わせフォームを作成し

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

  • Progress Indicator - プログレスバーの種類を選択することができます。 Progress Bar、Circles、Connector、Noneの中から選択することができます。 それぞれのオプションを選択してみ好みを最終的な選択するようにします。
  • Page Indicator Color - プログレスバーの色
  • ページタイトル - 最初のページのセクションのタイトルを指定します(例えば、プロフィール)。

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

ワードプレスWPFormsステップページ

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

そして Display Previous オプションを ONに設定すると、「前」のページに移動することができるボタンが有効になって表示されます。

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

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

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

次のステップ...

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

ワードプレスWPForms一般的な設定

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

ワードプレスグーテンベルク(ブロックエディタ)にコンタクトフォームを追加する

おわりに

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

参考



2のコメント

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

    応答
    • 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/

      応答