WordPress でカスタム データ入力フォームを作成する方法 (コーディングは不要)
公開: 2024-09-27データ入力フォームとは、まさにその名の通りです。これは、データベースまたはスプレッドシートに保存する情報を収集するフォームです。
この情報には、顧客の詳細、予約、登録情報、その他の重要なデータが含まれる場合があります。幸いなことに、このようなタイプのフォームの構築は、思っているよりも簡単です。コーディングは必要ありません。
その方法を知りたい場合は、読み続けてください。選択したデータ管理システムと簡単に統合できるカスタム データ入力フォームを作成する方法を説明します。たったの5ステップで完成します。
WordPress でカスタム データ入力フォームを作成する方法 (コーディングは不要)
- WPFormsを取得する
- 選択したツールを統合
- フォームを構築する
- フォームをカスタマイズする
- フォームを公開する
- ボーナス: ベストプラクティスとヒント
WPFormsを取得する
独自のカスタム データ入力フォームを作成するには、WordPress ダッシュボードに WPForms Pro をインストールしてアクティブ化する必要があります。
Pro を使用すると、必要なアドオン、追加フィールド、追加のカスタマイズ オプションにアクセスできます。このブログ投稿でその活用方法を説明します。

プラグインをインストールして有効化したら、準備完了です。
今すぐデータ入力フォームを作成してください
選択したツールを統合
WPForms Pro ライセンスがあれば、現在サポートされているすべての統合にアクセスできます。それはたくさんあります。

WPForms は、他の何千ものプラットフォームに接続する Zapier を含む 200 以上のツールやシステムと統合します。
データ入力ツールに関しては、以下との統合に興味があるかもしれません。
- Google スプレッドシート: この統合により、フォーム送信を Google スプレッドシート ドキュメントに自動的に送信して、データ管理を容易にすることができます。
- Salesforce : WPForms エントリを Salesforce と同期して、リードと顧客情報を管理します。
- Airtable : Zapier を通じて、WPForms を Airtable と統合して、エントリ用の広範なデータベースを作成できます。
- CRM およびマーケティング プラットフォーム: WPForms は、Mailchimp などの電子メール マーケティング ツールとも統合します。
フォームを構築する前に統合部分について説明します。これにより、フォームを構築するときにフォームに接続するサービスを選択できます。フォームビルダーについて詳しく説明します。
まず、 WPForms » アドオンに移動します。

WPForms アドオン ページで、フォームに統合して接続したいツールを見つけることができます。
たとえば、Google スプレッドシートの場合は、Google スプレッドシート アドオンを見つけてアクティブ化します。

次に、基本的に Google サインインを確認するいくつかの画面が表示されます。
それが完了すると、統合ページにリダイレクトされます。 Google スプレッドシートの統合にConnectedと表示されていることがわかります。

ただし、この統合は、このチュートリアルで作成しようとしているフォームにとって便利なだけではありません。
接続すると、作成したフォームで使用して、フォーム データを Google スプレッドシートに自動的に送信できます。
フォームを構築する
統合設定が完了したら、データ入力フォームを作成する準備が整いました。 WordPress ダッシュボードの [WPForms] タブに移動し、 [新規追加]をクリックします。

新しいフォームを追加すると、フォームに名前を付けてフォーム ビルダーを開くように求められます。空のフォームを使用して自分で最初から作成することも、テンプレートから始めることもできます。

テンプレート ギャラリーで提供されている多数のフォーム テンプレート (数千もの中から選択できます) を活用することをお勧めします。
テンプレートを使用すると、すべてではないにしても、必要なフィールドのほとんどが、特定のデータ入力フォームごとに含まれます。たとえば、学生登録フォーム テンプレートには、学生情報、保護者の詳細、緊急連絡先のフィールドがあらかじめ用意されています。

テンプレートまたは空のフォームのいずれの場合でも、ドラッグ アンド ドロップ フォーム ビルダーを使用してフォームを好みに合わせて完全にカスタマイズできます。
フォーム上のフィールドのスタイルや機能を編集したり、必要なフィールドを追加したり、不要なフィールドを削除したりすることができます。次のステップでは、そのすべてについて説明します。
フォームをカスタマイズする
フォーム ビルダーを起動すると、テキスト入力、チェックボックス、ドロップダウン メニューなど、さまざまなフィールドをフォームに追加してカスタマイズできます。

ユーザーにさまざまな方法を提供する データを入力することは、特にこのタイプのフォームの場合、常に大きなプラスになります。
AI の選択肢を活用する
ユーザーが選択を行うフィールドを追加すると、WPForms AI に選択肢の選択を生成させるオプションがあります。

生成する必要があるリストまたは選択肢の種類を入力するだけで、AI アシスタントがすばやく作成するのを確認できます。次に、ボタンをクリックするだけで、生成された選択肢をフォームに挿入できます。

AI による選択により、これらのデータ ポイントをデータ入力フォームに追加する際の時間と推測が不要になります。
さらに、これらを使用すると、フォーム ユーザーがフォーム内で適切なデータを取得できるようになり、データ収集の効率と精度が向上します。
リピーターフィールドを使用する
リピーター フィールドを使用すると、ユーザーはフォームを混雑させることなく、入力フィールドを動的に追加できます。これは、追加の名前、住所、電話番号などを入力するなど、入力数が変化するデータ入力タスクに役立ちます。

フォームユーザーはボタンをクリックするだけで、フォームの特定のフィールドまたはブロックセクション全体を追加または削除できます。カスタマイズに関しては、これらの繰り返し可能なフィールドのレイアウト、ボタンのスタイル、その他のオプションを完全に制御できます。


リピーターフィールドの完全な概要、その最適な使用方法、スタイリングのヒントについては、この重要な組織ツールに関する広範なガイドをご覧ください。
統合を接続する
フォームを好みに合わせてカスタマイズしたら、前に設定したデータ入力統合にフォームを接続できます。これは、フォーム ビルダーのサイドバーの[設定] タブにあります。この場合、利用可能なオプションから Google スプレッドシートを選択できます。

次に、 [新しい接続の追加]をクリックして Google アカウントをこのフォームにリンクし、エントリの保存を開始します。

次に、この接続にニックネームを付ける必要があります。ただし、このニックネームはサイトには表示されませんので、ご安心ください。これは、Google スプレッドシートがどのフォームに接続されているかを思い出すのに役立つだけです。ニックネームを入力したら、 「OK」をクリックします。

次に、このフォームに入力されるスプレッドシートについて、 [既存のものを選択]または[新規作成]のオプションが表示されます。このフォームを Google スプレッドシートの既存のスプレッドシートに接続することも、ここから新しいスプレッドシートを開始することもできます。

最後に、さらに下にスクロールしてフィールド マッピング設定を表示します。ここで、どの列がフォームのどのフィールド値に対応するかを定義します。

他にもフィールド マッピングの設定を検討する必要があるため、Google スプレッドシートでのエントリの保存に関する完全なチュートリアルを確認することをお勧めします。
これらの手順は、データ入力統合として選択された Google スプレッドシートに特有のものですが、一般的なアプローチは全体的に同様です。
統合に対応するアドオンを取得し、プラットフォームで所有しているアカウントに接続して統合を設定する必要があります。統合はフォーム ビルダーの [設定] タブ内にあります。
フォームを公開する
フォームの準備ができたので、サイトで公開されているページにフォームを追加する必要があります。その後、誰かがフォームを送信すると、入力内容が自動的に Google スプレッドシートに送信されます。
これを行うには、フォームビルダーの右上隅にある「埋め込み」ボタンをクリックします。

サイト上にすでにあるページにフォームを埋め込むことも、ここから新しいページを作成することもできます。新しいページを作成する場合は、「学生登録」などの名前を付ける必要があります。

どちらのルートを選択しても、WordPress エディターが開き、フォームが追加されます。そこから、ページを公開するだけです。

データ入力フォームがサイトに公開されました。
ボーナス: ベストプラクティスとヒント
開始するためのテンプレート、オプションを生成する AI 選択肢、すべてを整理するためのリピーター フィールドがあれば、あなたのフォームは素晴らしいものになると思います。とはいえ、これらのヒントと考慮事項のいくつかを念頭に置いてください。
- プレースホルダー テキストと説明: プレースホルダー テキストはユーザーをガイドしますが、説明が多すぎてフォームが乱雑になることは避けてください。説明についても同様です。フォームの疲労を軽減するために、フィールドの説明は短く、関連性のあるものにしてください。
- 複数列レイアウトと単一列レイアウト: 複数列レイアウトではフォームが短く表示される可能性がありますが、単一列レイアウトではユーザーが一度に 1 つの入力に集中できるため、フォームの完了率が向上します。
- フォームの長さと条件付きロジック: フォームは簡潔にしてください。フォームが短いほど、ユーザーがフォームを完了する可能性が高くなります。条件付きロジックを使用して不要なフィールドを非表示にし、ユーザーに関連するフィールドのみを表示します。
- ブランド化: ヘッダー画像、色の選択、その他のスタイル オプションを使用して、組織のブランド化をフォームに適用することを検討してください。これは、Web サイトで一般向けのフォームを使用する場合に特に重要です。
それだけです!独自のデータ入力フォームを作成するためのツールがすべてすぐに手に入ります。どのような種類のデータを収集して入力しますか? WPForms のオプションは事実上無限です。
今すぐデータ入力フォームを作成してください
データ入力フォームに関するよくある質問
データ入力フォームであろうとなかろうと、ナンバーワンのフォーム構築プラグインとして、私たちはフォームに関する多くの質問を受け取ります。このトピックに関してよく寄せられる質問の一部を以下に示します。
フォームの送信内容を Excel にエクスポートできますか?
はい! WPForms を使用すると、フォーム データを CSV 形式に簡単にエクスポートし、Excel で開くことができます。
WPForms は GDPR に準拠していますか?
はい、WPForms は、同意チェックボックスを追加したり、データの保存方法をカスタマイズしたりする機能など、GDPR 規制への準拠に役立つツールを提供します。
WPForms はサードパーティとの統合に対応していますか?
絶対に。 WPForms は Zapier と連携し、フォームを Google Drive、Slack、Trello などの 7,000 以上のアプリに接続できます。
次に、フォームの名前フィールドに敬称を追加します
名前の横に敬称を含めるのは職業上の礼儀です。そこで、フォームに含める名前フィールドの一部としてこのオプションを含めてみてはいかがでしょうか。名前フィールドに優先敬称や敬称を追加する方法については、この件に関する役立つガイドをご覧ください。
フォームを構築する準備はできましたか?最も簡単な WordPress フォームビルダープラグインを今すぐ始めましょう。 WPForms Pro には多数の無料テンプレートが含まれており、14 日間の返金保証を提供しています。
この記事がお役に立った場合は、Facebook と Twitter でフォローして、さらに無料の WordPress チュートリアルとガイドをご覧ください。