WordPress用のAirtableカスタムフォームを作成する

WordPressでカスタムAirtableフォームを作成する方法

WordPressサイトにAirtableのカスタムフォームを作成したいですか?Airtable は、スプレッドシートとデータベースのパワーを組み合わせたクラウドサービスです。

一行もコードを書くことなく、カスタムスプレッドシートアプリを構築することができます。カスタムフォームをベースにリンクすることで、コピー&ペーストを省略し、すべての記録を一箇所に整頓することができます。

この記事では、WPFormsでフォームを作成し、各入力を数クリックでAirtableに送信する方法をステップバイステップで紹介します。

今すぐAirtableフォームを作成しましょう! 🙂 ←クリック

なぜWordPressでカスタムAirtableフォームを作るのか?

Airtableを使えば、データベースのように情報を保存するカスタム・スプレッドシート・アプリケーションを構築できる。

製品計画、ユーザー調査、販売CRM、製品発表、コンテンツ・カレンダー計画などに使用できる、使いやすく視覚的に魅力的なスプレッドシートを作成します。

しかし、Airtableアカウントにすべてのデータを手動で入力する必要があります。この問題を回避するには、WordPressサイトを立ち上げWPFormsプラグインの助けを借りてWordPress Airtable統合を確立することができます。

そのため、誰かがフォームを送信するたびに、データは自動的にあなたのAirtableアカウントに追加されます。これにより、貴重な時間を節約し、生産性を高めることができます。

WordPressでカスタムAirtableフォームを作成する方法

WordPressのAirtableとの連携はWPFormsで簡単に設定できます。以下のステップに従うだけで、すぐにWordPressサイトに埋め込むためのAirtableフォームを準備することができます!

ステップ1:WPFormsプラグインをインストールする

WordPressでAirtableフォームを作成するには、Zapierとの統合に有料ライセンスが必要なため、WPForms Proが必要です。私はいつもここから始めます。

私がWPFormsを気に入っている点は、Zapierを通してAirtableのような統合を処理する方法です。私が試した他のフォームプラグインがプレッシャーで壊れてしまうのとは違い、実際に動作する信頼性の高い接続を得ることができます。

WPFormsのホームページ

WPFormsをまだインストールしていない場合は、まずインストールしてください。ほんの1分で完了します。WordPressにプラグインをインストールする方法がわからない場合は、こちらのステップバイステップガイドをご覧ください。

Pro ライセンスは Zapier アドオンをアンロックするものです。これがないと、私たちが構築している強力なAirtableとの統合の代わりに、基本的なメール通知で立ち往生することになります。

オサマ・タヒール(WPFormsコンテンツライター

"💡 Pro Tip: WPForms Liteからアップグレードする場合、既存のフォームを失う心配はありません。プロバージョンは、あなたがすでに構築したすべてのものを保持し、単に上に高度な機能を追加します。"

-オサマ・タヒール、WPFormsコンテンツライター

ステップ 2: Zapierアドオンを有効にする

次に必要なのは、WPForms用のZapierアドオンをインストールすることだ。Zapierは、2つ以上のアプリを接続して特定のタスクを実行できる自動化ツールだ。

そこで、WPFormsとAirtableを接続するためにZapierを使うことにする。Zapierアドオンをインストールするには、WPForms"Addonsページに行く必要があります。

WPFormsアドオン画面

リストからZapierアドオンを見つけ、アドオンのインストールをクリックする。ダウンロードが完了したら、[Activate]をクリックし、サイト上で動作させます。正常に動作すると、アドオンの横に緑色のチェックマークが表示されます。

Zapier起動

次に、WPForms"Settingsページに移動してZapier APIキーを取得する。このキーはZapierをWPFormsのアカウントに接続するために使用される。

WPFormsの設定ページで、Integrationsタブをクリックする必要があります。そして、Zapierのロゴをクリックして、あなたのサイトのAPIキーを見つけてください。

Zapier APIキー

今はこのタブを開いておいてください。後のステップで WPForms Zapier API キーが必要になります。Airtable 以外の自動化の可能性を探りたい場合は、WPForms Zapier インテグレーションの完全ガイドをご覧ください。

ステップ 3: WordPress フォームを作成する

Zapierアドオンの準備ができたら、いよいよAirtableベースのデータを収集するフォームを作成します。ここで重要なのは、フィールドを追加し始める前に、Airtableで整理したい情報を考えることです。

WordPress ダッシュボードからWPForms"Add Newに移動し、新しいフォームを作成します。

WPFormsに新しいフォームを追加する

設定ページでは、フォーム名をお好きな名前に変更できます。さらに、2,000 以上のフォームテンプレートからテンプレートを選択できます。この例ではシンプルコンタクトフォームテンプレートを使ってAirtable カスタムフォームを作成します。

シンプルなコンタクトフォーム

WPForms はフォームテンプレートをすぐに読み込み、フォームビルダー画面に移動します。Airtableのワークフローを考えながらフィールドを追加していきましょう。

コンタクトフォームのテンプレートが読み込まれました

フォームデータを送信したいAirtableレコードのカラムにフィールドを合わせることをお勧めします。こうすることで、フォームフィールドをAirtableのカラムに簡単にマッピングすることができます。

そこで、Airtableワークシートの列がそのように設定されているため、電話番号 フィールドと「組織名」とラベル付けされた一行テキストフィールドを追加することにする。

カスタマイズされたコンタクトフォーム

ドラッグアンドドロップビルダーを使用してフォームにフィールドを追加する詳細な手順については、簡単なお問い合わせフォームの作成方法のチュートリアルを参照してください。

フィールドを追加したら、保存をクリックしてフォームを保存します。次のステップで、Zapier を使ってすべてを Airtable に接続する際に、この保存したフォームが必要になります。

フォームの保存

この設定の利点は、ここで追加したフィールドがすべてAirtableベースのカラムになることです。効果的なフォームフィールドのアイデアについては、より良いコンタクトフォームを作成するためのガイドをご覧ください。

ステップ 4: ウェブサイトに Airtable フォームを埋め込む

Zapier オートメーションをセットアップする前に、あなたのウェブサイトでフォームを稼動させたいでしょう。これにより、Airtable に接続する前にすべてをテストし、正しく動作していることを確認できます。

しかし、なぜテストエントリを追加する必要があるのでしょうか?後でWPFormsとAirtableの接続をテストするために使うからです。これにより、すべてが正しく動作していることを保証します。

フォームを投稿、ページ、ウェブサイトのサイドバーに簡単に埋め込むことができます。WordPress のページに埋め込む方法を見てみましょう。まず、フォームビルダーの上部にある埋め込みボタンをクリックします。

埋め込みフォーム

ボタンを押すと、モーダルウィンドウに2つの埋め込みオプションが表示されます。このチュートリアルでは、新規ページ作成ボタンをクリックしてフォームを新規ページに埋め込みます。

新しいページを作成する

テキストボックスに名前を付けて、「Let's Go!」ボタンを押してください。

ページボックスに名前を付ける

WordPressのブロックエディターが表示され、フォームが表示されます。このタイミングでフォームの周りにコンテキストを追加しましょう。


準備ができたら、上部にある「Publish」 ボタンを押してページを公開しましょう。

Airtableフォームを公開する

次に、ウェブブラウザの新しいタブでこのページを開いてください。そして、フォームに必要事項を記入し、「送信」ボタンをクリックして、テストフォームの入力を作成してください。

エアテーブル・フォームを公開

素晴らしい!フォームの作成が終わったので、次は WPForms から Airtable に自動的にデータを送信するための自動化レシピの作成に移ります。

プロのアドバイス

複数のページにフォームを追加したい場合や、さらにスタイルをカスタマイズしたい場合は、WordPress にフォームを埋め込むためのガイドに必要なすべての詳細が記載されています。

ステップ5:新しいオートメーションレシピの作成

いよいよ WordPress フォームと Airtable の橋渡しをします。ここで Zapier が登場し、すべてのプロセスを自動化することで、フォームデータを手動で転送する必要がなくなります。

Zapierのウェブサイトへ行き、まだアカウントをお持ちでない場合はサインアップしてください。無料プランでも使い始めるには問題ないが、フォーム送信をたくさん処理する場合は、後でアップグレードした方がいいかもしれない。

ログインしたら、Create Zap をクリックしてオートメーションの構築を開始します。Zapierでは、これらのオートメーションを「Zap」と呼んでいます。各Zapは、トリガー(フォーム送信)とアクション(Airtableへのデータ追加)を結びつけています。

新しいザップの作成

さて、ザップを作成するプロセスは2つの部分から構成されます。最初の部分では、トリガーアプリとしてWPFormsをセットアップする必要があります。

そして、Airtableをアクションアプリとして設定する必要があります。それでは、トリガーのセットアップを始めましょう。

ステップ6:トリガーアプリ(WPForms)の設定

上記のようにCreate a Zapを押すと、レシピエディターウィンドウが開き、最初にトリガーアプリを選択する必要があります。

検索ボックスでWPFormsを検索して選択します。また、ウィンドウ左上の編集アイコンでZapにタイトルをつけることもできます。

トリガーアプリを選択

次に、「イベント」ドロップダウンで「新規フォーム入力」を選択する。これにより、すべての新規フォーム入力が、このオートメーションを実行するトリガーイベントとして確立される。

トリガーイベントを選択

下部のContinueボタンをクリックして次に進む。この時点で、Zapierと接続するためのWPFormsアカウントを選択する必要があります。Sign Inボタンをクリックしてください。

WPFormsを接続する

新しいポップアップウィンドウが開き、あなたのウェブサイトのURLとZapier APIキーを入力するよう求められます。

ステップ2で示したように、Zapier用のWPForms APIキーを取得し、それをAPIキーのテキストボックスに、上のテキストボックスのあなたの完全なウェブサイトのURLと一緒に貼り付けます。

必要な情報を入力したら、「はい」、「続行」を押します。

ZapierによるWPFormsアカウントへのアクセスを許可する

これを行うと、ポップアップ・ウィンドウは自動的に閉じ、トリガー・アプリとして接続されたWPFormsアカウントが表示されるはずです。Continueを押して次の設定に進みます。

ここで、WPForms-Airtable統合のために処理したい特定のフォームを選択する必要があります。ステップ3で作成したフォームを選択します。

フォーム名を "Custom Airtable Form "としたので、ドロップダウンからそれを選びます。必要なフォームが見つかったら、Continueボタンをクリックします。

トリガーのフォームを選択

これが完了すると、Zapierは、選択したフォームに送信された最近のエントリを使用して、WPFormsトリガーをテストするように要求します。

ステップ4で提案したようにテストエントリーを送信すれば、Zapierはそれを見つけるのに苦労しない!テストトリガーボタンをクリックして続けます。

テストトリガー

フォームに複数のエントリーが既に送信されている場合、ドロップダウンを使用して特定のエントリーを選択することができます。

しかし、この時点ではZapierは統合をテストするだけなので、どちらを使っても問題ない。Continueを押して先に進む。

テストエントリー

これでトリガーのセットアップは完了です。これで完了です!次のステップでは、統合用のアクションアプリを設定します:Airtableです。

ステップ 7: アクションアプリの設定とオートメーションの公開

前のステップから進むとすぐに、Zapierはアクションアプリを構成するための設定を表示する。

Airtableをアクションアプリにしたいので、検索フィールドを使って利用可能なアプリのリストからAirtableを探し、クリックします。

アクションアプリを選ぶ

Airtableで発生させたいアクションイベントを選択します。Airtableにデータを送信したいので、ドロップダウンからCreate Recordイベントを選択します。

レコードの作成

次に、サインインボタンをクリックしてAirtableアカウントに接続します。

Airtableアカウントに接続

新しいポップアップウィンドウが開いたら、Airtable API キーを入力する必要があります。

キーをまだお持ちでない場合は、Airtableアカウントにアクセスし、右上のプロフィールアイコンをクリックしてメニューを展開してください。

次に、アカウントを選択します。アカウントページで、下にスクロールしてAPIキーの生成ボタンを見つけ、クリックします。

AirtableのAPIキーを生成する

APIキーが手に入りますので、コピーしてください。キーをコピーした状態で、ZapierのAirtableアカウントのサインインウィンドウに切り替え、APIキーを挿入します。

APIキーでAirtableに接続する

完了したら、「はい」、「続行」を押してください。これでAirtableアカウントがZapierと接続されます。もう一度、Continueをクリックして次のステップに進みます。

エアテーブル接続

ここでZapierは、WPFormsから送信されたデータに基づいてレコードを作成するベース(またはワークスペース)を選択するよう求める。

また、ワークスペース内のテーブルを選択する必要があります。この例では、Airtableでテーブルを作成し、"Leads "と名付けました。

アクションイベントの設定

テーブルを選択すると、Zapierはテーブルからカラム名を取得します。フォームフィールドをAirtableのカラムに正しくマッピングするには、Airtableの各カラムフィールドに一致するWPFormsフィールドを選択するだけです。

完了したら、Continueをクリックする。

フォーム・フィールドをAirtableにマップする

トリガーアプリと同様に、Zapierは、先ほど選択したフィールドマッピングに基づいてAirtableにテストレコードを送信する必要があります。テストアクションボタンを押して先に進みます。

Airtableにテストレコードを送信する

レコードがAirtableに送信されたことを確認する成功メッセージが表示されるはずです。ほぼ完了です!Publish Zapをクリックして、WPFormsとAirtableの連携を開始します。

パブリッシュ・ザップ

この時点で、別のモーダルウィンドウが開き、オートメーションを公開するかどうかを尋ねます。Publish & Turn On をクリックして、オートメーションレシピを立ち上げて実行しましょう。

パブリッシュ&オン

素晴らしいWordPressとAirtableの統合をオンにすると、誰かがWordPressのフォームを送信するたびに、新しい連絡先がAirtableアカウントに追加されます。

エアテーブルの結果

テストレコードがZapierによって適切に送信されたことを確認するために、Airtableアカウントをチェックすることをお勧めします。私たちの場合、レコードはほぼ即座に送信され、フォームのすべてのフィールドが完全に一致しました。

これで完成です!この効率的な統合により、WordPress で Airtable のカスタムフォームを作成し、生産性を向上させることができます。

WordPressでカスタムAirtableフォームを作成する方法に関するFAQ

WordPress Airtable フォーム統合がどのように機能するかを学ぶことは、読者の間で人気のあるトピックです。ここでは、Airtable フォーム統合に関するよくある質問にお答えします:

WPFormsとAirtableを統合するには?

WPFormsとAirtableを接続するには、Zapierのようなツールを使用します。まず、WPFormsを使ってフォームを作成します。次に、ZapierでZapを設定し、各フォームの入力をAirtableのベースに直接送信します。これは、フォームフィールドを適切なAirtableカラムにマッピングすることで機能します。

WordPressのフォーム入力をコードなしでAirtableに送信できますか?

そう、コードを書く必要はありません。WPFormsとZapierアカウントがあれば、簡単な設定ステップをクリックするだけで、Airtableにフォームエントリーを送信することができます。WPFormsでフォームを準備し、Airtableでベースを設定するだけです。

WordPressにAirtableフォームを埋め込むには?

Airtable フォームから埋め込みコードをコピーし、カスタム HTML ブロックを使用して WordPress の投稿またはページに貼り付けることができます。これにより、Airtable フォームをサイト上に表示することができます。訪問者はページを離れることなくフォームに入力することができます。

AirtableをWordPressに接続するプラグインは?

WPFormsは、フォームエントリーを収集するための良い選択肢であり、Zapierを使用してAirtableに接続することができます。WPFormsとZapierの組み合わせはシンプルでうまく機能する。

WordPressのページにAirtableのデータを表示できますか?

WPFormsを直接使うことはできません。しかし、Airtableの共有ビュー機能を使って、あなたのサイトにテーブルビューを表示することができます。共有リンクまたは埋め込みコードを取得し、カスタムHTMLブロックを使用してページまたは投稿に貼り付けるだけです。

AirtableをWordPressに接続する無料の方法はありますか?

WPFormsもZapierも無料版で始めることができる。Zapierの無料プランには基本的な機能がついており、フォームの送信数が多くない場合はこれで十分かもしれない。大きなニーズがある場合は、有料プランが必要かもしれません。

Airtableにリンクされたフォームに条件ロジックを設定するには?

WPFormsではフォームビルダ内で条件付きロジックを使用することができます。つまり、ユーザーの入力に基づいてフィールドを表示または非表示にすることができます。ロジックはフォームが Airtable に送信される前に実行されるため、適切なデータのみが送信されます。

WordPressからAirtableにフォームデータを送信するのは安全ですか?

はい、WPForms や Zapier のような信頼できるツールを使用すれば安全です。サイトが SSL 証明書(HTTPS)を持っていることを確認し、通常 Airtable に保存しないような機密データを共有しないようにしてください。

次に、フォームのSMS通知を送信する

WPFormsの統合が役に立ったのであれば、WordPressのフォームからSMS通知を送信する方法をチェックすることをお勧めします。SMS通知を設定することで、新しいフォームエントリーが送信されるとすぐに最新情報を得ることができます。

今すぐWordpressフォームを作成

フォームを作る準備はできましたか?最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。

この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。

情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。WPFormsがどのように資金を調達しているのか、なぜそれが重要なのか、そしてどのように私たちをサポートできるのかをご覧ください。

オサマ・タヒール

オサマはWPFormsのシニアライターです。彼はWordPressプラグインを分解してテストし、その洞察を世界と共有することを専門としています。もっと知る

最高のWordPressドラッグ&ドロップフォームビルダープラグイン

簡単、速い、安全。WPFormsを信頼する600万人以上のWebサイトオーナーの仲間入りをしてください。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。

このフォームはCloudflare Turnstileによって保護されており、Cloudflareプライバシーポリシーおよび利用規約が適用されます。