Webflowロジックを使用してAirtableにエントリを確立する

Airtable を使用すると、企業にとって重要な情報のデータベースを生成し、管理することができます。Logic を使用すると、フォームの送信から Airtable に潜在顧客の連絡先情報などのデータを送信し、Webflow Web サイトをビジネス データベースにリンクすることができます。

開始前に： まだお済みでない場合は、 Airtableアカウントを作成する と エアテーブルベースまた、Airtable テーブルに一致するフィールドを含むフォームを Webflow サイトに統合する必要があります。

このチュートリアルでは、以下の内容を詳しく説明します。

1. Airtable APIキーを設定する手順
2. ロジックフローの認証を確立する方法
3. Airtable documentation の場所
4. HTTPリクエストの設定
5. フローのテストとデプロイ
6. フローに関する問題のトラブルシューティング

インサイダーヒント: Logic は、HTTP リクエスト ブロックまたは受信 Webhook トリガーを使用して、Airtable から Webflow CMS へのデータの同期も容易にします。Logic で HTTP リクエストを作成するプロセスを詳しく調べます。

Airtable API キーの作成

パスワードと同様に、API キー (「アクセス トークン」と呼ばれることもあります) は、API に HTTP リクエストを発行するサイトまたはアプリケーションを識別します。Airtable API キーは、Airtable にデータを送信するのに不可欠です。

Airtable API キーを生成するには:

1. Airtableダッシュボードに移動します
2. プロフィールアイコンをクリックして選択 アカウント
3. スクロールして API セクションをクリックして トークンを作成する
4. タップする 新しいトークンを作成する
5. トークンに名前を割り当てる
6. ドロップダウンメニューからこのAPIキーのアクションを選択してください（少なくとも データレコード:書き込み Airtableにデータを送信するには必要です)
7. ベースを選択し、データを送信するAirtableベースを指定します
8. クリック トークンを作成する、コピーしてください APIキー、そしてあなたが このタブを開いたままにしておく!

ロジックフローの認証を構成する

1. 新しいタブ内でWebflowデザイナーでサイトを起動します
2. デザイナーキャンバスでフォームを選択し、アクセスします フォーム設定
3. 選ぶ 論理 から ソース 落ちる
4. クリック 新しいフローを追加
5. 新しいフローに名前を付けます（例：「Airtableにリードを転送」）。 名前 フィールドに説明を追加し、必要に応じて 説明 分野
6. ドラッグ HTTPリクエストを行う フローエディタキャンバスにブロックを追加し、名前を付けます（例：「Airtableで新しいリードレコードを作成する」）
7. 選出 APIトークン から 認証 落ちる
8. 選ぶ ヘッダ から に追加 落ちる
9. 「承認」と入力して ヘッダ 分野
10. クリック 資格情報を選択 > 新しい資格情報を追加
11. APIトークンに指定（例：Airtable APIトークン）を記入します。 名前 フィールドにオプションで説明を追加し、 説明 分野
12. 「ベアラー」と入力 {API キー}" の中に トークン フィールド、置換 {API キー} AirtableからコピーしたAPIキー
13. クリック 作成する 新しい資格情報を維持し、 このタブを開いたままにしておく!

プロのヒント: また、フォームを新しいロジックフローにリンクするオプションもあります。 ロジックパネル > 流れ タブ。Logic のフォーム送信トリガーについて詳しく調べます。

Airtable ドキュメントの検索

1. Airtableベースを再検討する
2. アクセス ヘルプ 選択して API 1TP32 チューニング 追加リソース
3. レコードを作成するテーブルを選択します
4. クリック レコードを作成する — テーブルに関連するAPIリクエストの例が右側に表示されます

重要な： Airtable の API documentation は各 Airtable ベースに合わせて調整されているため、レコードを追加する目的のベースで作業していることを確認してください。

HTTPリクエストの設定

Logic フローと Airtable 認証資格情報を構成したので、Webflow に戻ってフロー内で HTTP リクエストを確立します。この HTTP リクエスト設定により、訪問者がサイトのフォームを送信するたびに、Airtable テーブルに新しいレコードが生成されます。

覚えて： Webflowサイトが開いていたタブを閉じた場合は、 ロジックパネル > 流れ タブを開き、前の手順で設定したフローを選択します。 HTTPリクエストを行う フロー エディター キャンバスのブロックをクリックしてブロック設定にアクセスし、次の手順に従います。

1. 開く リクエスト方法 ドロップダウンから選択 役職
2. 「https://api.airtable.com/v0」を挿入します。/{id}/{テーブル名}" の中に URL フィールド、置換 {id} テーブルIDと {テーブル名}
3. テーブルのタイトルを入力します
4. 「プラス” 記号の横 ヘッダー 新しいヘッダーを生成する 
5. 「content-type」と入力して 名前 ボックスと「application/json」 価値 箱
6. Airtable API documentationのコードブロックを 体 セクション — 次のような構造になります (ただし、既存の Airtable レコードのデータが含まれます)。

    { "名": "XYZ", "姓": "XYZ", "メール": "[email protected]", "ステータス": "新規リード" }
    

その後、フォーム送信の詳細を取得するには、HTTP リクエストにライブ データを含める必要があります。 

1. 現在のAirtableレコードから値を消去し、カーソルを 体 エリア
2. 紫色の「ドット” アイコンをクリックし、関連する動的フォームフィールド (名前、電子メールなど) を選択します。

不可欠： URL セクションのテーブル タイトル内のスペースや特殊文字を必ずエンコードしてください。

フローをテストして実行するための手順

1. プレス テストを実行してセットアップを完了します 
2. 対応する入力ボックスにサンプル値を入力します
3. プレス テストを実行する 
4. プレス キャンセル または データの適用 テスト期間を終了する
5. 打つ 公開 
6. クリック 公開のステージフロー
7. ウェブサイトを公開する

リマインダー： テスト プロセス中にエラー メッセージが表示された場合は、トラブルシューティングの手順を実行してから、上記の操作を繰り返してください。HTTP リクエストのテストに関する詳細をご覧ください。

フローの問題を解決する方法

フローのテスト中にエラーが発生した場合は、次の手順を試してください。

• アクセス資格情報を設定するときに、API キーの前に「Bearer」（スペースを含む）が含まれていることを確認してください（例：「Bearer 123456789」）。
• リクエストURLにテーブルの正確なIDと名前が含まれていることを確認します。
• 次のような無料ツールを使用してリクエスト本文の問題を検査します。 JSONリント