Airtableにデータを登録するフォームは、Airtable側だけでも作成可能です。
作成したテーブルに対して、Create a viewからFormを選択するだけです。
Open formとやることにより、URLがついた形のページができます。
![Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法](https://res.cloudinary.com/dz7ruywxa/images/w_300,h_249,c_scale/f_auto,q_auto/v1613079306/7b8eef522b05577b0e38eff7a56fd589/7b8eef522b05577b0e38eff7a56fd589.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079306/7b8eef522b05577b0e38eff7a56fd589/7b8eef522b05577b0e38eff7a56fd589.jpg?_i=AA 486w)
しかし無料版の場合、以下ができません。
- カバー画像がつけられない
- ロゴをつけられない
- 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で生成する。
![Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079301/75a909db7ae0354607b881e721bdbb02/75a909db7ae0354607b881e721bdbb02.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_86,c_scale/f_auto,q_auto/v1613079301/75a909db7ae0354607b881e721bdbb02/75a909db7ae0354607b881e721bdbb02.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_220,c_scale/f_auto,q_auto/v1613079301/75a909db7ae0354607b881e721bdbb02/75a909db7ae0354607b881e721bdbb02.jpg?_i=AA 768w)
Base URLの確認
以下に、アクセスし連携したいBaseを選択する。
表示されたページの左ナビから、対象のテーブル名のList recordsを選択する。
右側に、curlのタブが表示されるので、EXAMPLE REQUESTのcurlコマンドのurlの一部(?より前)を取得する。
![Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法](https://res.cloudinary.com/dz7ruywxa/images/w_300,h_64,c_scale/f_auto,q_auto/v1613079296/e5424ce2bef7de39af55da6cdf8a6277/e5424ce2bef7de39af55da6cdf8a6277.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079296/e5424ce2bef7de39af55da6cdf8a6277/e5424ce2bef7de39af55da6cdf8a6277.png?_i=AA 702w)
https://api.airtable.com/v0/{BASE_ID}/{TABLE_NAME}
Softr側での設定
フォームページを作成する
左ナビのPagesから、Add Pageをする。
![Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法](https://res.cloudinary.com/dz7ruywxa/images/w_300,h_130,c_scale/f_auto,q_auto/v1613079292/8232ce3f8d35b15b1c2e8f110a477274/8232ce3f8d35b15b1c2e8f110a477274.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079292/8232ce3f8d35b15b1c2e8f110a477274/8232ce3f8d35b15b1c2e8f110a477274.png?_i=AA 466w)
Page NameとUrlを入力する。
![Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法](https://res.cloudinary.com/dz7ruywxa/images/w_300,h_159,c_scale/f_auto,q_auto/v1613079288/bbc327bc1961f22826a95959800058da/bbc327bc1961f22826a95959800058da.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_406,c_scale/f_auto,q_auto/v1613079288/bbc327bc1961f22826a95959800058da/bbc327bc1961f22826a95959800058da.png?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079288/bbc327bc1961f22826a95959800058da/bbc327bc1961f22826a95959800058da.png?_i=AA 922w)
ページ上に、BlockのForm => Sales Formを追加する。
![Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法](https://res.cloudinary.com/dz7ruywxa/images/w_300,h_142,c_scale/f_auto,q_auto/v1613079284/ce4025bf437e8e39158b2a9c302d05fd/ce4025bf437e8e39158b2a9c302d05fd.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_364,c_scale/f_auto,q_auto/v1613079284/ce4025bf437e8e39158b2a9c302d05fd/ce4025bf437e8e39158b2a9c302d05fd.png?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079284/ce4025bf437e8e39158b2a9c302d05fd/ce4025bf437e8e39158b2a9c302d05fd.png?_i=AA 1000w)
以下のページができます。
![Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079280/5044fe50f906650f947278b69c1b4cc4/5044fe50f906650f947278b69c1b4cc4.png?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_111,c_scale/f_auto,q_auto/v1613079280/5044fe50f906650f947278b69c1b4cc4/5044fe50f906650f947278b69c1b4cc4.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_283,c_scale/f_auto,q_auto/v1613079280/5044fe50f906650f947278b69c1b4cc4/5044fe50f906650f947278b69c1b4cc4.png?_i=AA 768w)
フォームの設定をAirtable側のカラムに合わせて設定する。
![Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法](https://res.cloudinary.com/dz7ruywxa/images/w_300,h_281,c_scale/f_auto,q_auto/v1613079275/e70708fa962cca2e9362a0509f170371/e70708fa962cca2e9362a0509f170371.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_720,c_scale/f_auto,q_auto/v1613079275/e70708fa962cca2e9362a0509f170371/e70708fa962cca2e9362a0509f170371.png?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079275/e70708fa962cca2e9362a0509f170371/e70708fa962cca2e9362a0509f170371.png?_i=AA 806w)
各カラムは、以下のような設定になっており、Typeを選択、Tagには、Airtable側のカラム名と同じものをいれます。
また、必須項目については、Labelの右端の設定をクリックするとRequiredの設定ができます。
![Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法](https://res.cloudinary.com/dz7ruywxa/images/w_300,h_158,c_scale/f_auto,q_auto/v1613079271/bf292ea59f63c2da271b81f54eaa6848/bf292ea59f63c2da271b81f54eaa6848.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_405,c_scale/f_auto,q_auto/v1613079271/bf292ea59f63c2da271b81f54eaa6848/bf292ea59f63c2da271b81f54eaa6848.png?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079271/bf292ea59f63c2da271b81f54eaa6848/bf292ea59f63c2da271b81f54eaa6848.png?_i=AA 808w)
最後に送信フォームのボタンの設定で、Actionを”Send to airtable”にして、Base URLをセットします。
![Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法](https://res.cloudinary.com/dz7ruywxa/images/w_300,h_113,c_scale/f_auto,q_auto/v1613079267/9f66477dc81a6c851ec777a7ae457cd8/9f66477dc81a6c851ec777a7ae457cd8.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_289,c_scale/f_auto,q_auto/v1613079267/9f66477dc81a6c851ec777a7ae457cd8/9f66477dc81a6c851ec777a7ae457cd8.png?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079267/9f66477dc81a6c851ec777a7ae457cd8/9f66477dc81a6c851ec777a7ae457cd8.png?_i=AA 856w)
APIキーをセットする
左ナビから、Settingsを選択し、Integrationsを押します。
![Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法](https://res.cloudinary.com/dz7ruywxa/images/w_300,h_45,c_scale/f_auto,q_auto/v1613079263/74089fb2e632a086a59d0d052c03ebaf/74089fb2e632a086a59d0d052c03ebaf.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_116,c_scale/f_auto,q_auto/v1613079263/74089fb2e632a086a59d0d052c03ebaf/74089fb2e632a086a59d0d052c03ebaf.png?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079263/74089fb2e632a086a59d0d052c03ebaf/74089fb2e632a086a59d0d052c03ebaf.png?_i=AA 1000w)
![Softr + Airtableで、フォームのページを作成してAirtableにリンクする方法](https://res.cloudinary.com/dz7ruywxa/images/w_300,h_142,c_scale/f_auto,q_auto/v1613079259/75f3fde0883fc919e7741050b44c9d6d/75f3fde0883fc919e7741050b44c9d6d.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_363,c_scale/f_auto,q_auto/v1613079259/75f3fde0883fc919e7741050b44c9d6d/75f3fde0883fc919e7741050b44c9d6d.png?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079259/75f3fde0883fc919e7741050b44c9d6d/75f3fde0883fc919e7741050b44c9d6d.png?_i=AA 944w)
送信確認
Publishを押して、公開状態にして、実際にフォームに入力を行い、送信し、Airtable側にレコードができていることを確認してください。
もし、登録ができていなかったら、chromeなどのDevtoolsでエラーが出ていないか確認してください。
おそらく、jsのエラーメッセージが表示されています。