Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法

Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法

2021年2月6日
ツール
Pocket

Airtableにデータを登録するフォームは、Airtable側だけでも作成可能です。

作成したテーブルに対して、Create a viewからFormを選択するだけです。

Open formとやることにより、URLがついた形のページができます。

Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法

しかし無料版の場合、以下ができません。

  • カバー画像がつけられない
  • ロゴをつけられない
  • Submitボタンの文言が変更できない
  • Airtableのロゴを消せない

Softr側で、フォームを作成して、Airtableに連携することによりサイトのテイストにあった

フォームページが作成可能です。

やること

  • Airtable側のAPIキーと対象とするテーブルのBase URLをチェックしておく
  • Softr側でFormのページを作成し、Airtableのカラム名と同じものを設定する
  • Softr側の送信ボタンの送り先をAirtableとして、Base URLを設定する

注意すること

  • Softr側のフォームに用意されているものは以下しかないので、例えばDate型の連携はできません。
    • Email
    • Single line text
    • Long Text
    • Url
    • Dropdown
    • Phone number
    • File

Airtable側の確認

APIキーの確認

アカウントページにアクセスし、APIキーが生成されていない場合は、Generate API keyで生成する。

Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法
Airtable is a low-code platform for building collaborative apps. Customize your …
airtable.com
Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法

Base URLの確認

以下に、アクセスし連携したいBaseを選択する。

Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法
After you’ve created and configured the schema of an Airtable base, use the API …
airtable.com

表示されたページの左ナビから、対象のテーブル名のList recordsを選択する。

右側に、curlのタブが表示されるので、EXAMPLE REQUESTのcurlコマンドのurlの一部(?より前)を取得する。

Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法
https://api.airtable.com/v0/{BASE_ID}/{TABLE_NAME}

Softr側での設定

フォームページを作成する

左ナビのPagesから、Add Pageをする。

Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法

Page NameとUrlを入力する。

Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法

ページ上に、BlockのForm => Sales Formを追加する。

Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法

以下のページができます。

Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法

フォームの設定をAirtable側のカラムに合わせて設定する。

Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法

各カラムは、以下のような設定になっており、Typeを選択、Tagには、Airtable側のカラム名と同じものをいれます。

また、必須項目については、Labelの右端の設定をクリックするとRequiredの設定ができます。

Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法

最後に送信フォームのボタンの設定で、Actionを”Send to airtable”にして、Base URLをセットします。

Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法

APIキーをセットする

左ナビから、Settingsを選択し、Integrationsを押します。

Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法
Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法

送信確認

Publishを押して、公開状態にして、実際にフォームに入力を行い、送信し、Airtable側にレコードができていることを確認してください。

もし、登録ができていなかったら、chromeなどのDevtoolsでエラーが出ていないか確認してください。

おそらく、jsのエラーメッセージが表示されています。