Airtableにデータを登録するフォームは、Airtable側だけでも作成可能です。
作成したテーブルに対して、Create a viewからFormを選択するだけです。
Open formとやることにより、URLがついた形のページができます。
しかし無料版の場合、以下ができません。
- カバー画像がつけられない
- ロゴをつけられない
- Submitボタンの文言が変更できない
- Airtableのロゴを消せない
Softr側で、フォームを作成して、Airtableに連携することによりサイトのテイストにあった
フォームページが作成可能です。
やること
- Airtable側のAPIキーと対象とするテーブルのBase URLをチェックしておく
- Softr側でFormのページを作成し、Airtableのカラム名と同じものを設定する
- Softr側の送信ボタンの送り先をAirtableとして、Base URLを設定する
注意すること
- Softr側のフォームに用意されているものは以下しかないので、例えばDate型の連携はできません。
- Single line text
- Long Text
- Url
- Dropdown
- Phone number
- File
Airtable側の確認
APIキーの確認
アカウントページにアクセスし、APIキーが生成されていない場合は、Generate API keyで生成する。
Base URLの確認
以下に、アクセスし連携したいBaseを選択する。
表示されたページの左ナビから、対象のテーブル名のList recordsを選択する。
右側に、curlのタブが表示されるので、EXAMPLE REQUESTのcurlコマンドのurlの一部(?より前)を取得する。
https://api.airtable.com/v0/{BASE_ID}/{TABLE_NAME}Softr側での設定
フォームページを作成する
左ナビのPagesから、Add Pageをする。
Page NameとUrlを入力する。
ページ上に、BlockのForm => Sales Formを追加する。
以下のページができます。
フォームの設定をAirtable側のカラムに合わせて設定する。
各カラムは、以下のような設定になっており、Typeを選択、Tagには、Airtable側のカラム名と同じものをいれます。
また、必須項目については、Labelの右端の設定をクリックするとRequiredの設定ができます。
最後に送信フォームのボタンの設定で、Actionを”Send to airtable”にして、Base URLをセットします。
APIキーをセットする
左ナビから、Settingsを選択し、Integrationsを押します。
送信確認
Publishを押して、公開状態にして、実際にフォームに入力を行い、送信し、Airtable側にレコードができていることを確認してください。
もし、登録ができていなかったら、chromeなどのDevtoolsでエラーが出ていないか確認してください。
おそらく、jsのエラーメッセージが表示されています。