WordPressサイトにAirtableのカスタムフォームを作成したいですか？
Airtableは、スプレッドシートとデータベースのパワーを組み合わせたクラウドサービスだ。一行もコードを書くことなく、カスタムスプレッドシートアプリを構築することができる。
この記事では、カスタムAirtableフォームを作成し、WordPressサイトに埋め込む方法をステップバイステップでご紹介します。
なぜWordPressでカスタムAirtableフォームを作るのか？
Airtableを使えば、データベースのように情報を保存するカスタム・スプレッドシート・アプリケーションを構築できる。
製品計画、ユーザー調査、販売CRM、製品発表、コンテンツ・カレンダー計画などに使用できる、使いやすく視覚的に魅力的なスプレッドシートを作成します。
ただし、Airtableアカウントにすべてのデータを手動で入力する必要があります。
この問題を回避するには、WordPressサイトを立ち上げ、WPFormsプラグインの助けを借りてWordPress Airtableの統合を確立することができます。
そのため、誰かがフォームを送信するたびに、データは自動的にあなたのAirtableアカウントに追加されます。これにより、貴重な時間を節約し、生産性を高めることができます。
WordPressでカスタムAirtableフォームを作成する方法
WordPressのAirtableとの連携はWPFormsで簡単に設定できます。以下のステップに従うだけで、すぐにWordPressサイトに埋め込むためのAirtableフォームを準備することができます！
この記事で
ステップ1：WPFormsをインストールする
まず、WPForms Proを入手することをお勧めします。なぜなら、フォームをAirtableと接続するために必要なZapierインテグレーションが付属しているからです。
Proライセンスを購入したら、WPFormsをサイトにインストールします。WordPressプラグインのインストール方法については、初心者ガイドをご覧ください。
ここでは、Airtableワークスペースの1つのLeadsテーブルにフォームエントリーを自動的に送信したいと仮定します。
ステップ 2: Zapierアドオンをインストールする
次に必要なのは、WPForms用のZapierアドオンをインストールすることだ。
Zapierは、2つ以上のアプリを接続して特定のタスクを実行できる自動化ツールです。ここでは、WPFormsとAirtableを接続するためにZapierを使用します。
Zapierアドオンをインストールするには、WPForms"Addonsページに行く必要があります。
このページで、Zapierアドオンを探す。その下にあるInstall Addonボタンをクリックして、インストールを開始する。
アドオンがインストールされ有効化されると、ステータスはアクティブになります。
次にWPForms"Settingsページに移動してZapier APIキーを取得する。このキーはZapierをWPFormsのアカウントに接続するために使用されます。
WPFormsの設定ページで、Integrationsタブをクリックする必要があります。そして、Zapierのロゴをクリックして、あなたのサイトのAPIキーを見つけてください。
今はこのタブを開いておいてください。後のステップでWPForms Zapier APIキーが必要になります。
ステップ3：フォームの作成
WordPress ダッシュボードからWPForms"Add Newに移動し、新しいフォームを作成します。
設定ページでは、フォーム名をお好きな名前に変更できます。さらに、2,000 以上のフォームテンプレートからテンプレートを選択できます。この例ではシンプルコンタクトフォームテンプレートを使ってAirtable カスタムフォームを作成します。
WPFormsはフォームテンプレートをすぐに読み込み、フォームビルダー画面に移動します。
さらにフィールドを追加してこのフォームをカスタマイズすることもできます。フォームデータを送信する Airtable レコードのカラムにフィールドを合わせることをお勧めします。こうすることで、フォームフィールドを Airtable のカラムに簡単にマッピングできます。
そこで、Airtableワークシートの列がそのように設定されているため、電話番号 フィールドと「組織名」とラベル付けされた一行テキストフィールドを追加することにする。
ドラッグアンドドロップビルダーを使用してフォームにフィールドを追加する詳細な手順については、簡単なお問い合わせフォームの作成方法のチュートリアルを参照してください。
最後に、画面の右上にある「保存」ボタンをクリックして、変更を保存する必要があります。
素晴らしい！次のステップでは、WordPressサイトにフォームを埋め込みます。
ステップ 4: ウェブサイトに Airtable フォームを埋め込む
このステップでは、カスタムAirtableフォームをウェブサイトに埋め込み、フォームに少なくとも1つのテストエントリーを追加します。
しかし、なぜテストエントリを追加する必要があるのでしょうか？後でWPFormsとAirtableの接続をテストするために使うからです。これにより、すべてが正しく動作していることを保証します。
フォームを投稿、ページ、ウェブサイトのサイドバーに簡単に埋め込むことができます。WordPressのページに埋め込む方法を見てみましょう。
まず、フォームビルダーの上部にある埋め込みボタンをクリックします。
ボタンを押すと、モーダルウィンドウに2つの埋め込みオプションが表示されます。このチュートリアルでは、新規ページ作成ボタンをクリックしてフォームを新規ページに埋め込みます。
テキストボックスに名前を付けて、「Let's Go！」ボタンを押してください。
WordPressのページエディターウィンドウが開き、先ほど作成したフォームが表示されているはずです。ここでページの他の要素を編集したり、コンテンツを追加することができます。
準備ができたら、上部の公開ボタンを押して、新しいAirtableフォームを埋め込んだページを公開します。
ウェブブラウザの新しいタブでこのページを開いてください。そして、フォームに必要事項を記入し、「送信」ボタンをクリックして、テストフォームの入力を作成してください。
素晴らしい！フォームの作成が終わったので、次は WPForms から Airtable に自動的にデータを送信するための自動化レシピの作成に移ります。
ステップ5：新しいオートメーションレシピの作成
WPFormsとAirtableを接続するには、Zapierのサイトで新しいZapを作成する必要があります。
待って！ザップって何？2つ以上のアプリを接続するプロセスで、特定のアクションを実行するためのトリガーが常に必要です。
ウェブブラウザの新しいタブでZapierのウェブサイトを開き、アカウントにログインする。まだZapierアカウントを持っていない場合は、無料で新規アカウントを作成できる。
Zapierアカウントにログインした後、Create Zapボタンをクリックして新しいオートメーションレシピの作成を開始します。
さて、ザップを作成するプロセスは2つの部分から構成されます。まず、トリガーアプリとしてWPFormsを設定します。そして、アクションアプリとしてAirtableを設定する必要があります。
トリガーのセットアップを始めよう。
ステップ6：トリガーアプリ（WPForms）の設定
上記のようにCreate a Zapを押すと、レシピエディターウィンドウが開き、最初にトリガーアプリを選択する必要があります。
検索ボックスでWPFormsを検索して選択します。また、ウィンドウ左上の編集アイコンでZapにタイトルをつけることもできます。
次に、「イベント」ドロップダウンで「新規フォーム入力」を選択する。これにより、すべての新規フォーム入力が、このオートメーションを実行するトリガーイベントとして確立される。
下にあるContinueボタンをクリックして次に進みます。
この時点で、Zapierと接続するためのWPFormsアカウントを選択する必要があります。Sign Inボタンをクリックしてください。
新しいポップアップウィンドウが開き、WebサイトのURLとZapier APIキーの入力を求められます。ステップ2で示したように、Zapier用のWPForms APIキーを取得し、上のテキストボックスのあなたの完全なウェブサイトのURLと一緒にAPIキーのテキストボックスに貼り付けます。
必要な情報を入力したら、「はい」、「続行」を押します。
この操作を行うと、ポップアップ・ウィンドウは自動的に閉じ、WPFormsアカウントがトリガー・アプリとして接続されていることが確認できるはずです。
Continueを押して次の設定に進みます。
ここで、WPForms-Airtable統合のために処理したい特定のフォームを選択する必要があります。ステップ3で作成したフォームを選択します。
フォーム名を "Custom Airtable Form "としたので、ドロップダウンからそれを選びます。
必要なフォームが見つかったら、Continueボタンをクリックします。
これが完了すると、Zapierは選択したフォームに送信された最近のエントリを使用してWPFormsトリガーをテストするように要求します。ステップ4で提案したようにテストエントリを送信した場合、Zapierはそれを見つけるのに苦労しないでしょう！
Test Triggerボタンをクリックして続けます。
すでにフォームに複数のエントリーが送信されている場合は、ドロップダウンを使って特定のエントリーを選択することができます。しかし、この時点ではZapierは統合をテストするだけなので、どちらを使ってもかまいません。
Continueを押して進む。
これでトリガーのセットアップは完了です。よくやった！
次のステップでは、統合用のActionアプリを設定します：Airtableです。
ステップ 7: アクションアプリの設定とオートメーションの公開
前のステップから進むとすぐに、Zapierはアクションアプリを構成するための設定を表示する。
Airtableをアクションアプリにしたいので、検索フィールドを使って利用可能なアプリのリストからAirtableを探し、クリックします。
Airtableで発生させたいアクションイベントを選択します。Airtableにデータを送信したいので、ドロップダウンからCreate Recordイベントを選択します。
次に、サインインボタンをクリックしてAirtableアカウントに接続します。
新しいポップアップウィンドウが開いたら、Airtable API キーを入力する必要があります。
キーをまだお持ちでない場合は、Airtableアカウントにアクセスし、右上のプロフィールアイコンをクリックしてメニューを展開します。次に、[アカウント]を選択します。
アカウントページで、下にスクロールしてAPIキーの生成ボタンを見つけ、クリックするだけです。
APIキーが手に入りますので、コピーしてください。キーをコピーした状態で、ZapierのAirtableアカウントのサインインウィンドウに切り替え、APIキーを挿入します。
そうしたら、「はい」、「続ける」を押してください。
これでAirtableアカウントがZapierに接続されます。もう一度、Continueをクリックして次のステップに進みます。
ここでZapierは、WPFormsから送信されたデータに基づいてレコードを作成するベース（またはワークスペース）を選択するよう求めてくる。また、そのワークスペース内のテーブルも選択する必要がある。
この例では、Airtableでテーブルを作成し、それを "Leads "と名付けたので、それを選択する。
テーブルを選択すると、Zapierはテーブルからカラム名を取得します。フォームフィールドをAirtableのカラムに正しくマッピングするには、Airtableの各カラムフィールドに一致するWPFormsフィールドを選択するだけです。
完了したら、Continueをクリックする。
トリガーアプリと同様に、Zapierは、先ほど選択したフィールドマッピングに基づいてAirtableにテストレコードを送信する必要があります。テストアクションボタンを押して先に進みます。
レコードがAirtableに送信されたことを確認する成功メッセージが表示されるはずです。
もう少しで完了です！PublishZapをクリックしてWPFormsとAirtableの統合をライブにしましょう。
この時点で、別のモーダルウィンドウが開き、オートメーションを公開するかどうかを尋ねます。Publish & Turn On をクリックして、オートメーションレシピを立ち上げて実行しましょう。
素晴らしいWordPressとAirtableの統合をオンにすると、誰かがWordPressのフォームを送信するたびに、新しい連絡先がAirtableアカウントに追加されます。
テストレコードがZapierから正しく送信されたことを確認するために、Airtableアカウントをチェックすることをお勧めします。
私たちの場合、レコードはほとんど即座に送信され、フォームのすべてのフィールドはテーブルに設定したカラムと完全に一致した。
これで完成です！この効率的な統合により、WordPress で Airtable のカスタムフォームを作成し、生産性を向上させることができます。
次に、フォームのSMS通知を送信する
WPFormsの統合が役に立ったのであれば、WordPressのフォームからSMS通知を送信する方法をチェックすることをお勧めします。SMS通知を設定することで、新しいフォームエントリーが送信されるとすぐに最新情報を得ることができます。
フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。
この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。
