{"id":4406,"date":"2024-04-14T10:02:43","date_gmt":"2024-04-14T02:02:43","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4406"},"modified":"2024-04-14T10:02:43","modified_gmt":"2024-04-14T02:02:43","slug":"establish-entries-in-airtable-using-webflow-logic","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/establish-entries-in-airtable-using-webflow-logic\/","title":{"rendered":"Establish entries in Airtable using Webflow Logic"},"content":{"rendered":"\n
\n

Through Airtable, you have the ability to generate and oversee databases of vital information for your enterprise. Logic enables you to transmit data, like contact details of a potential customer, from form submissions to Airtable, linking your Webflow website to your business database.<\/p>\n

Prior to commencing:<\/strong> In case you haven’t done so already, create an Airtable account<\/a> and an Airtable base<\/a>. You’ll also need to integrate a form into your Webflow site with fields that match your Airtable table.<\/h6>\n

Within this tutorial, we will delve into:<\/p>\n

    \n
  1. Steps to configure your Airtable API key<\/li>\n
  2. Methods to establish authentication for your Logic flow<\/li>\n
  3. Locating your Airtable documentation<\/li>\n
  4. Setting up your HTTP request<\/li>\n
  5. Testing and deploying your flow<\/li>\n
  6. Troubleshooting any issues with your flow<\/li>\n<\/ol>\n
    Insider tip:<\/strong> Logic also facilitates the synchronization of data from Airtable to the Webflow CMS using either the Make HTTP request block or an Incoming webhook trigger. Delve deeper into the process of making HTTP requests with Logic.<\/h6>\n

    Creating Your Airtable API Key<\/h2>\n

    Similar to a password, an API key (referred to as an “access token” at times) identifies the site or application issuing an HTTP request to an API. An Airtable API key is essential for sending data to Airtable.<\/p>\n

    To generate your Airtable API key:<\/p>\n

      \n
    1. Navigate to your Airtable dashboard<\/li>\n
    2. Click on your profile icon and select Account<\/strong><\/li>\n
    3. Scroll to the API<\/strong> section and click on Create token<\/strong><\/li>\n
    4. Tap on Create new token<\/strong><\/li>\n
    5. Assign a name to your token<\/li>\n
    6. Choose an action for this API key from the dropdown menu (at least data.records:write<\/strong> is required for sending data to Airtable)<\/li>\n
    7. Select a base and designate the Airtable base where you wish to send data<\/li>\n
    8. Click Create token<\/strong>, copy your API key<\/strong>, and ensure you keep this tab open<\/strong>!<\/li>\n<\/ol>\n

      Configuring Authentication for Your Logic Flow<\/h2>\n
        \n
      1. Launch your site in the Webflow Designer within a new tab<\/li>\n
      2. Select your form on the Designer canvas and access Form settings<\/strong><\/li>\n
      3. Choose Logic<\/strong> from the Source<\/strong> dropdown<\/li>\n
      4. Click Add new flow<\/strong><\/li>\n
      5. Name your new flow (e.g., “Forward leads to Airtable”) in the Name<\/strong> field and optionally add a description in the Description<\/strong> field<\/li>\n
      6. Drag a Make HTTP request<\/strong> block to the flow editor canvas and provide a name (e.g., “Create new lead record in Airtable”)<\/li>\n
      7. Elect API token<\/strong> from the Authentication<\/strong> dropdown<\/li>\n
      8. Opt for Header<\/strong> from the Add to<\/strong> dropdown<\/li>\n
      9. Input “Authorization” into the Header<\/strong> field<\/li>\n
      10. Click Select a credential<\/strong> > Add new credential<\/strong><\/li>\n
      11. Give your API token a designation (e.g., “Airtable API token”) in the Name<\/strong> field and optionally include a description in the Description<\/strong> field<\/li>\n
      12. Enter “Bearer {API key}<\/strong>” in the Token<\/strong> field, replacing {API key}<\/strong> with the copied API key from Airtable<\/li>\n
      13. Click Create<\/strong> to preserve the new credential and ensure you keep this tab open<\/strong>!<\/li>\n<\/ol>\n
        Pro hint:<\/strong> You also have the option to link your form to a new Logic flow through the Logic panel<\/strong> > Flows<\/strong> tab. Explore more about form submission triggers in Logic.<\/h6>\n
        \n
        \"Options<\/div>
        You can connect a form to Logic through Form settings, Form block settings, or from the <\/em>Logic panel<\/em><\/strong> > <\/em>Flows<\/em><\/strong> tab.<\/em><\/figcaption><\/figure>\n
        \n
        \"\u201cHeader\u201d<\/div>\n<\/figure>\n
        \n
        \"The<\/div>
        For APIs that utilize bearer authentication (like Airtable), you must input \u201cBearer\u201d before your API key in the Token field.<\/em><\/figcaption><\/figure>\n

        Finding Your Airtable Documentation<\/h2>\n
          \n
        1. Revisit your Airtable base<\/li>\n
        2. Access Help<\/strong> and choose API documentation<\/strong> under Additional resources<\/li>\n
        3. Select the table where you wish to create records<\/li>\n
        4. Click on Create records<\/strong> \u2014 example API requests pertaining to your table will be visible on the right<\/li>\n<\/ol>\n

          Crucial:<\/strong> Airtable\u2019s API documentation is tailored to each Airtable base, hence ensure that you’re working on the intended base for adding records.<\/p><\/blockquote>\n

          Setting Up Your HTTP Request<\/h2>\n

          Now that you’ve configured your Logic flow and Airtable authentication credentials, revisit Webflow to establish an HTTP request within your flow. This HTTP request setup will generate a fresh record in your Airtable table every time a visitor submits your site’s form.<\/p>\n

          Remember:<\/strong> In case you closed the tab where your Webflow site was open, navigate to Logic panel<\/strong> > Flows<\/strong> tab and select the flow configured in the prior steps. Click on the Make HTTP request<\/strong> block on the flow editor canvas to access block settings and follow the upcoming steps.<\/h6>\n
            \n
          1. Open the Request method<\/strong> dropdown and opt for POST<\/strong><\/li>\n
          2. Insert \u201chttps:\/\/api.airtable.com\/v0\/{id}<\/strong>\/{name_of_table}<\/strong>\u201d in the URL<\/strong> field, substituting {id}<\/strong> with your table ID and the {name_of_table}<\/strong>\n
          3. Provide the title for your table<\/li>\n
          4. Press the \u201cplus<\/strong>\u201d symbol beside Headers<\/strong> to generate a fresh header\u00a0<\/li>\n
          5. Type \u201ccontent-type\u201d in the Name<\/strong> box and \u201capplication\/json\u201d in the Value<\/strong> box<\/li>\n
          6. Insert the code block from your Airtable API documentation in the Body<\/strong> section \u2014 it will have a structure similar to this (but with data from your existing Airtable records):<\/li>\n<\/ol>\n
            \n
            \n
            \n    {\n      \"First Name\": \"XYZ\",\n      \"Last Name\": \"XYZ\",\n      \"Email\": \"ZYX@email.com\", \n      \"Status\": \"New lead\"\n    }\n    <\/code><\/pre>\n<\/div>\n<\/div>\n
            Afterward, you\u2019ll have to include live data in your HTTP request to capture details from your form submissions:\u00a0<\/p>\n
              \n
            1. Erase the values from your current Airtable record and position your cursor between the empty quotes in the Body<\/strong> area<\/li>\n
            2. Tap on the violet \u201cdot<\/strong>\u201d icon and choose the related dynamic form field (for instance, name, email, etc.)<\/li>\n<\/ol>\n
              Essential:<\/strong> Ensure to encode any spaces or special characters in the table title in the URL section.<\/p><\/blockquote>\n
              \n
              \"The<\/div>\n<\/figure>\n
              \n
              \"The<\/div>
              A complete POST\u00a0request to Airtable from Logic\u2019s Make HTTP\u00a0request block.<\/em><\/figcaption><\/figure>\n
              Steps for testing and putting your flow into action<\/h2>\n
                \n
              1. Press Run test to finish the setup\u00a0<\/strong><\/li>\n
              2. Input sample values in the corresponding input box<\/li>\n
              3. Press Run test\u00a0<\/strong><\/li>\n
              4. Press Cancel<\/strong> or Apply data<\/strong> to close the testing window<\/li>\n
              5. Hit Publish<\/strong>\u00a0<\/li>\n
              6. Click Stage flow for publish<\/strong><\/li>\n
              7. Publish your website<\/li>\n<\/ol>\n
                Reminder: <\/strong>If an error message pops up during the testing process, go through our troubleshooting steps, then repeat the above actions. Get more details about testing HTTP requests.<\/h6>\n
                How to resolve problems with your flow<\/h2>\n
                If you encounter an error while testing your flow, attempt the following steps:<\/p>\n