AI要約
WordPressウェブサイトでリードを獲得するためのインタラクティブなフォームを作成しませんか？リードフォームアドオンを使用すると、ユーザーがフォームに入力する際に一度に1ステップずつ進むことができるフォームを作成できます。
このチュートリアルでは、WPFormsでリードフォームアドオンをインストールして使用する方法を説明します。
要件:
- リードフォームアドオンにアクセスするには、Proライセンスレベル以上が必要です
- リードフォームアドオンの最小必要バージョンを満たすために、WPFormsの最新バージョンがインストールされていることを確認してください
リードフォームとは何ですか？
リードフォームは、潜在顧客から情報を収集するために使用されるオンラインフォームであり、「リード」とも呼ばれます。これらは、ユーザーがフォームに入力する際に一度に1ステップずつ進むことができるため、会話型フォームに似ています。
リードフォームは、一度に複数のフィールドで圧倒することなく、あなたの製品やサービスに興味のあるユーザーに関する連絡先情報を収集する方法を提供します。
リードフォームアドオンのインストール
開始する前に、まずWPFormsがWordPressサイトにインストールおよびアクティブ化されており、ライセンスが検証済みであることを確認する必要があります。
それが完了したら、リードフォームアドオンをインストールしてアクティブ化できます。
リードフォームモードの有効化
リードフォームアドオンの設定はフォームビルダーにあります。続行するには、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスする必要があります。
フォームをリードフォームに変換するには、設定 » リードフォームに移動します。リードフォームモードを有効にするオプションをオンにする必要があります。
フォームが再構築されることを通知するオーバーレイが表示されます。続行するには、リードフォームを有効にするをクリックします。
リードフォームモードを有効にすると、追加のオプションが表示されます。これらは、リードフォームをカスタマイズする際に説明します。
また、変更を保存する前にフォームビルダーでフォームをプレビューし、フィールドが正しくフォーマットされていることを確認するように促す通知が表示されます。フィールドにアクセスするには、フィールドタブリンクをクリックします。
フィールドタブでは、各フィールドの横にページ区切りが追加されていることに気付くでしょう。すべてのフィールドは中央揃えになり、全幅表示オプションが使用されます。
注意：リードフォームモードが有効になると、フォームビルダーにレイアウトまたはエントリープレビューフィールドを追加できなくなります。
リードフォームモードが有効になると、フィールドごとのフィールドサイズ、レイアウト、および色は無効になります。すべてのカスタマイズは、リードフォーム設定ページで処理されます。
フォームを保存してプレビューすることで、リードフォームがフロントエンドでどのように表示されるかをすばやく確認できます。
リードフォームのカスタマイズ
リードフォームアドオンには、リードフォームの見た目をカスタマイズできるさまざまなオプションが用意されています。カスタマイズオプションはすべてリードフォームの設定ページで見つけることができます。
以下で、利用可能なカスタマイズオプションについて説明します。
リードフォームのタイトル
リードフォームのタイトルを使用すると、リードフォームのタイトルを入力できます。タイトルは、ユーザーがフォームに入力する際にフロントエンドに表示されます。
ユーザーが入力する前にリードフォームの目的を理解できるように、短くてもわかりやすいタイトルを使用することをお勧めします。
フロントエンドでフォームをプレビューすると、タイトルは最初のページのリードフォームの上部に表示されます。
アクセントカラー
この設定では、ボタン、プログレスバー、アイコンのデフォルトの色を変更できます。ドロップダウンをクリックすると、カラーピッカーを使用してアクセントカラーを選択できます。
または、アクセントカラーフィールドにブランドカラーのHEXコードを入力することもできます。
高度なスタイル設定
リードフォームをさらにカスタマイズするための高度な設定があります。これらのオプションにアクセスするには、高度なスタイル設定をオンの位置に切り替える必要があります。
有効にすると、追加のオプションが見つかります。以下で、利用可能なオプションについて説明します。
フォームコンテナ
高度なスタイル設定トグルスイッチの下に、フォームコンテナオプションがあります。有効にすると、リードフォームがコンテナにラップされ、ページ上の他の要素の中で際立ちます。
フォームコンテナオプションを有効にすると、追加のスタイルオプションが表示されます。
- ドロップシャドウ: このオプションは、有効にするとリードフォームコンテナに自動的に影を追加します。リードフォームを背景から浮き上がらせたい場合に便利です。
- 角丸: この設定は、有効にするとコンテナに角丸を追加することで、リードフォームにモダンなデザインを与えます。
ドロップシャドウと角丸が有効になっている場合のフォームのフロントエンドでの表示方法は次のとおりです。
コンテナ設定の下に、リードフォームの要素をカスタマイズするための追加オプションがあります。
- コンテナの背景: この設定は、リードフォームコンテナの色を制御します。カラーピッカーを使用するか、HEX値を手動で入力してフォームコンテナの色を更新できます。
- フィールドの境界線: このオプションは、リードフォームのフィールドの境界線の色を変更するために使用されます。
- プライマリテキスト: このオプションを使用すると、ページタイトルやフィールドラベルなどのプライマリテキストの色を変更できます。
- セカンダリテキスト: このオプションを使用すると、入力テキストやフィールドの説明などのセカンダリ要素の色を更新できます。
スタイル設定のエクスポート/インポート
Lead Formsアドオンを使用すると、スタイル設定をあるLead Formから別のLead Formにインポートおよびエクスポートできます。設定したすべてのスタイル設定は、エクスポートスタイル設定フィールドにエクスポート文字列として保存されます。
Lead Formのスタイル設定をエクスポートするには、エクスポートスタイル設定フィールドの横にあるコピーアイコンをクリックします。
別のLead Formからスタイル設定をコピーした場合、編集中のLead Formにスタイルをすばやく貼り付けてインポートできます。
別のLead Formからスタイルをインポートするには、コピーしたスタイルを新しいスタイル設定のインポートフィールドに貼り付ける必要があります。
スタイルを追加したら、スタイル設定のインポートボタンをクリックして続行します。
インポートによりLead Formのスタイル設定が更新されることを通知するオーバーレイが表示されます。続行するには、はい、インポートをクリックしてください。
スタイル設定をインポートすると、インポート中に指定した値で高度なスタイリング設定が更新されます。
注意: スタイル設定をインポートする際は、エクスポートスタイル設定フィールドからコピーしたスタイルを正しく貼り付けてください。また、インポート文字列に余分なスペースを追加しないようにしてください。
貼り付けたインポート文字列が予期された形式に準拠していない場合、無効なインポート文字列エラーが発生します。
リードフォームのベストプラクティス
前述したように、Lead Formsを有効にするとフォームの構造が変更されます。Lead Formの見栄えを改善するためのベストプラクティスをいくつか紹介します。
1. 関連フィールドを組み合わせる
名前やメールアドレスなどの関連フィールドは、適切なページにドラッグアンドドロップすることで、Lead Formの1つのページにまとめることができます。
慣例として、Lead Formsはページごとに1〜3個の関連フィールドを持つべきです。ユーザーがフォームの入力時に圧倒されないように、各ページは短く保つことをお勧めします。
2. ページタイトルを使用する
デフォルトでは、フィールドラベルがLead Formページのページタイトルとして使用されます。関連フィールドをグループ化すると、各フィールドはフィールドラベルをタイトルとして使用します。
ページ上の各フィールドに個別のタイトルを付ける代わりに、ページの内容を説明する一般的なタイトルを作成できます。
ページタイトルを追加するには、ページ区切りフィールドをクリックしてフィールドオプションを開きます。一般タブに、Lead Formページにタイトルを追加するためのページタイトルテキストボックスがあります。
ページタイトルを追加すると、そのページのフィールドのすぐ上に表示されます。
3. プレースホルダーテキストを使用する
Lead Formsでは、デフォルトでフィールドラベルがページタイトルとして使用されます。フォームページにページタイトルを追加した場合、フィールドラベルを無効にしてプレースホルダーテキストを使用してLead Formのデザインを改善できます。
フィールドラベルを無効にするには、フィールドをクリックしてフィールドオプションメニューを開きます。高度な設定タブに、フィールドのプレースホルダーを追加するオプションがあります。
プレースホルダーテキストを追加したら、下にスクロールしてラベルを非表示オプションをオンの位置に切り替えます。
4.ラジオボタンとチェックボックスにアイコン選択を使用する
チェックボックスまたは複数選択フィールドをリードフォームで使用している場合、各項目にアイコンを追加できます。これにより、リードフォームの入力時にユーザーにとってフォームが視覚的に魅力的になります。
この機能を使用するには、リードフォームにページ区切りと複数選択フィールドを追加します。フィールドをクリックするか、フォームプレビューエリアにドラッグアンドドロップすることでフィールドを追加できます。
次に、複数選択フィールドを選択してフィールドオプションを開きます。例のために、フィールドのラベルと選択肢をカスタマイズします。
次に、下にスクロールして、アイコン選択を使用オプションをオンの位置に切り替えます。
アイコン選択を有効にすると、アイコンはリードフォームのカスタマイズ時に指定したアクセントカラーを継承します。Font Awesomeアイコンライブラリからアイコンを選択できます。
フォームのアイコンサイズを更新することもできます。
リードフォームのカスタマイズが完了したら、保存をクリックして変更を更新します。
ここに、これらのフォームがサイトにどのように表示されるかの概要を示すインタラクティブなフォームがあります。
よくある質問
これらは、WPFormsのリードフォームアドオンの使用に関するよくある質問への回答です。
リードフォームアドオンを他のWPFormsアドオンで使用できますか？
これで完了です！WPFormsでリードフォームアドオンをインストールおよびカスタマイズする方法がわかりました。
次に、リードフォームをマーケティングサービスに接続して、リードを簡単にフォローアップしたいですか？Mailchimp、 Constant Contact、 AWeber、 Drip、 Campaign Monitor、および GetResponseのマーケティング統合チュートリアルを確認して、詳細を確認してください。