忍者テーブルをWordPressフォームに接続する方法
公開: 2022-04-25WordPress Webサイトを管理していて、収集したフォームエントリを表形式で表示したい場合は、自動化されたプロセスを作成することが最善の解決策です。 そうするために、プロセスがスムーズに進んでいることを確認するためにそこにいくつかの勤勉なWordPressツールがあります。
そこで、ここでは、忍者テーブルと流暢なフォームを紹介し、3つの簡単なステップで忍者テーブルをWordPressフォームに接続する方法を紹介します。 しかしその前に、フォーム付きのテーブルが必要な理由を見てみましょう。
フォーム付きのテーブルが必要なのはなぜですか？
WordPress Webサイトにデータを表示するために自動プロセスを使用したくない場合は、他のプロセスの出力を予測しましょう。
- フォームのCSVファイルをエクスポートして、テーブルに含めることができます。 その場合、定期的にテーブル情報を更新する必要があります。
- または、フォームの送信を手動でコピーして、それぞれのテーブルに貼り付けることもできます。 しかし、これには多くの労力、時間、手間がかかります。 また、情報という形で間違いを犯す可能性もあります。
これらの手順は両方とも人間の介入と努力を必要とし、間違いなく面倒を生み出します。 彼らが仕事を成し遂げるのにかかる時間は言うまでもありません。
したがって、そのコンテキストでは、フォームエントリをドラッグしてデータテーブルに配置する必要がある場合は、NinjaTablesとFluentFormsの統合が最適なオプションです。 さらに、このシステムでは、テーブルがリアルタイムで更新されるため、データエントリを手動で操作する必要がなく、エラーの可能性がゼロになります。
さて、忍者テーブルを流暢なフォームに接続する方法のコツを公開するので、最初に忍者テーブルを使用する利点を見つけましょう。
NinjaTablesがフォームの力をどのように拡張できるか
Ninja Tablesは、ユーザーフレンドリーなレイアウトでデータを行と列に配置するのに役立つWordPressテーブルプラグインです。 Ninja Tablesを使用すると、価格表、データ表、製品表、比較などの表を作成できます。これにより、Webサイトがより整理された外観になります。 その上、忍者テーブルは使いやすい設定と魅力的なフロントエンドが付属しています。 コーディングの経験がなくても、Webサイトから動的テーブルを設計できます。 さらに、必要に応じてテーブルを作成、カスタマイズ、および保守できます。
さらに、WordPressの投稿やページで雑然とした情報をシンプルで美しいテーブルに変更できます。 その結果、ユーザーは表形式でデータを読み取ることができ、Googleは検索結果でテーブルスニペットをランク付けできます。
Ninja Tablesを使用して、非常に多くの比較テーブル、製品テーブル、ユーザー情報テーブルなどを作成し、それらをFluentFormsに接続しました。 最後に、Ninja Tablesのテーブルは応答性が高く、すべてのデバイスで適切に表示されます。
チュートリアルを開始する前に、この手順でFluentFormsを選択する理由を見てみましょう。
なぜ流暢なフォーム
Fluent Formsは、WordPressの究極の軽量フォームビルダープラグインです。 これは、市場で最高かつ最も堅牢なツールの1つです。 Fluent Formsには、初心者向けのユーザーフレンドリーなインターフェイスも付属しています。 それはあなたのビジネスを後押しするためにたくさんのユニークな機能を提供します。 アンケートフォーム、注文フォーム、投票、クイズなど、プラグインを使用して任意の連絡フォームをデザインできます。さらに、会話フォーム、高度な投稿作成、カスタムcss、ラジオフィールド、チェックボックス、クイズなどの多くの高度な機能を楽しむことができますモジュール、その他多数。
さらに、その事前に構築されたテンプレート機能により、初心者はフォーム作成プロセスを簡単に行うことができます。 さらに、Fluent Formsには、フォーム制限、スパム保護、条件付きロジック、計算などの重要な機能が付属しています。40以上の他のツールと統合されており、NinjaTablesはその1つです。
忍者テーブルを流暢なフォームに接続する方法
それで、これ以上面倒なことはせずに、NinajTablesとFluentFormsの統合を追加する方法を見てみましょう。 手順は非常に簡単です。FluentFormsを使用してフォームを一度作成する必要があります。統合を構成すると、すべての情報がNinJaテーブルで自動的に更新されます。
WordPressダッシュボードに両方のプラグインがインストールされていることを確認してください。 ここで、フォームを使用してテーブルを作成するための3つの手順を示します。
- FluentFormsを使用してフォームを作成および設計する
- 保存、プレビュー、送信
- フォームを忍者テーブルに接続します
手順の詳細を見ていきましょう。
ステップ1：FluentFormsを使用してフォームを作成および設計する
WordPressダッシュボードに移動し、FluentFormsを選択します。 それぞれのページの左上隅にある[新しいフォームの追加]ボタンをクリックします。
次に、準備ができているフォームテンプレートまたは空白のフォームを選択して、フォームをカスタマイズします。 このデモンストレーションでは、空白のフォームオプションを使用します。
空白のフォームを開くと、フォームを作成するためのオプションが表示されます-入力フィールドと入力のカスタマイズ。 フォームエディタにフィールドを追加するには、フィールドをクリックするか、フォームエディタにドラッグアンドドロップするか、プラス（+）記号をクリックしてブロックを検索します。
右側のセクションからフィールドをクリックして、フィールドを追加するだけです。 また、左上からフォーム名を変更することができます。 フィールドという名前の空白のフォームをクリックし、必要に応じて名前を変更するだけです。
そのため、これまでに4つのフィールドを追加し、入力のカスタマイズセクションからそれらの名前または要件を編集しました。
フォームの作成の詳細については、フォームの作成方法に関するドキュメントをご覧ください。
ステップ2：保存、プレビュー、送信
最後に、すべての設定が完了したら、右上隅にある[フォームの保存]ボタンをクリックします。 次に、[フォームの保存]ボタンのすぐ左側にある[プレビューとデザイン]オプションに移動します。
ここでは、フォームスタイル、デザインコンテナスタイル、アスタリスクスタイル、インラインエラーメッセージスタイル、送信成功メッセージスタイル、および送信後エラーメッセージスタイルを選択できます。 また、別のフォームからインポートスタイルを選択できます。 変更を保存するには、プレビューとデザインページの[設定を保存]ボタンをクリックします。
このステップの最後の段階は、すべてが正しく機能しているかどうかを確認するためのフォームを送信することです。 最初の提出は最初のエントリーになります。
ただし、フォームにさらにフィールドを追加する場合は、もう一度エディターパネルに移動して、必要な数のフィールドを追加します。
送信されたエントリを編集する必要があると思われる場合は、エントリセクションの青い目のアイコンボタンをクリックしてください。 編集する特定のエントリに関する詳細情報が表示されます。
ステップ3：NinjaTablesとFluentFormsの統合を接続する
WordPressダッシュボードからNinjaTablesに移動し、[テーブルの追加]ボタンをクリックします。 ポップアップウィンドウが表示されます。 ここで、[テーブルタイトル]ボックスにテーブルに名前を付け、必要に応じて説明を追加します。
次に、左側のサイドバーから[ Fluent Formに接続]ボタンをクリックし、使用可能なテンプレートからフォームテンプレートを選択し、入力フィールドを選択して、レコードの最大数を指定します。 最後に、フォームを保存します。
フォームを保存すると、すべてのフォームエントリを含むテーブルが表示されます。 残りの設定は、すべての忍者テーブルで同じです。 したがって、行の編集、構成、インポート/エクスポートなどを行うことができます。
詳細については、忍者テーブルのカスタマイズとスタイル設定に関するドキュメントを確認してください。
テーブルインターフェイスを確認する場合は、データテーブルにフォームエントリを挿入します。 ファイナルテーブルは次のようになります。
最後に、テーブルのショートコードをコピーして、WordPressの投稿/ページの任意の場所に貼り付けます。
それでおしまい！
この記事がお役に立てば幸いです。 このトピックに関して質問がある場合は、以下のコメントセクションでお問い合わせください。
要点
Fluent Formsは、ユニークで役立つお問い合わせフォームを作成するための最高のWordPressフォームビルダーです。 一方、Ninja Tablesは、ウェブサイトに重要なデータを表示するための美しいテーブルを作成するための最も優れたテーブルプラグインです。 これら2つの組み合わせは、優れた結果を得るためにWebサイトでデータを収集して表示するための究極のソリューションです。 さらに、ユーザーエクスペリエンスを向上させ、Webサイトのコンバージョン率を高める他の多くの利点があります。
Fluent Formsは、Discord、Meta Box、Paystackなどとも統合されています。 Facebook、Twitter、Instagram、YouTubeでフォローして、その他のチュートリアルをご覧ください。