The Complete Guide to Mapping Airtable Fields in Webflow

If you're using Airtable and Webflow together, you'll need to understand how to properly sync data between these two powerful tools. Below is a detailed field-by-field breakdown of how Airtable fields map to Webflow CMS fields, along with key tips and considerations.

‍

Field-by-Field Breakdown: Mapping Airtable to Webflow

1. Single Line Text → Plain Text

This is a direct match between Airtable and Webflow. For example, if you pass a text value like "Sample Text", it will map perfectly into Webflow's Plain Text field.

‍

2. Long Text → Rich Text

If you’re dealing with rich text formatting, Airtable stores it in Markdown format. To properly send it to Webflow, which expects HTML, you’ll need to convert it. In Make.com, you can use the Markdown to HTML module to handle this, or if you’re dealing with multiple rich text fields, you can use ChatGPT to convert it in bulk. For example, a long text like "**Bold Text**" in Airtable would need to be converted to HTML like <strong>Bold Text</strong> before passing to Webflow.

‍

3. Attachment → Image

When syncing images, Webflow uploads a new image to the CMS every time. This avoids issues with expiring URLs, which is often a concern with Airtable-hosted images. For instance, you can send a URL like "https://www.example.com/image.jpg" and Webflow will take care of the upload.

Note: Images over 2MB might not load in Webflow, so make sure you optimize your files before syncing.

‍

4. Attachment (Multiple Files) → Multi-Image

If you have multiple image files in Airtable, you can pass them as an array of URLs, and Webflow will upload each image into the Multi-Image field. For example, sending ["https://www.example.com/image1.jpg", "https://www.example.com/image2.jpg"] will result in both images being uploaded to Webflow.

‍

5. URL → Link / Video Link

URLs like "https://www.example.com" or "https://www.youtube.com/watch?v=example" map directly to Webflow's Link or Video Link fields. These fields handle standard web links or video URLs without additional formatting.

‍

6. Email → Email

Emails can be sent as plain text like "example@example.com" and map directly to Webflow’s Email field. This is a simple one-to-one mapping between the two systems.

‍

7. Phone Number → Phone

Phone numbers pass directly from Airtable to Webflow. For example, sending a phone number like "+1234567890" will map into Webflow's Phone field.

‍

8. Number → Number

Numbers map easily between Airtable and Webflow. For example, sending 12345 will map directly into Webflow’s Number field. This works for both integers and decimal numbers.

‍

9. Date → Date/Time

Dates need to be passed in ISO 8601 format when syncing to Webflow. For example, a date value like "2024-09-17T10:22:24.000Z" will map correctly into Webflow’s Date/Time field.

‍

10. Checkbox → Switch

When mapping a checkbox field, Airtable’s true/false values pass as booleans to Webflow’s Switch field. For instance, passing true will turn the switch on, and passing false will turn the switch off.

‍

11. Single Select → Option

When syncing option fields, you can’t pass a raw value directly from Airtable to Webflow. Instead, you need to perform an API call to Webflow to retrieve the actual option’s text value. For example, if your single select in Airtable says "Option 1", you need to make sure Webflow recognizes and accepts that value via the API.

‍

12. Linked Record → Reference

For reference fields, you’ll need to pass the Webflow ID of the linked item, not just a text value. Use a Lookup Field in Airtable to retrieve the Webflow ID and pass it through. For example, if the Webflow ID is "5f8d0d55a9337c5f0e0e7e0d", it needs to be sent in this format to Webflow's Reference field.

‍

13. Linked Record (Multiple) → Multi-Reference

Similar to single references, for Multi-Reference fields, you need to pass an array of Webflow IDs. For instance, if you have multiple linked records, you can send ["5f8d0d55a9337c5f0e0e7e0d", "5f8d0d55a9337c5f0e0e7e1f"] to Webflow’s Multi-Reference field.

‍

Important Things to Know Before Syncing Airtable and Webflow

When syncing Airtable and Webflow, there are a few crucial things to keep in mind to ensure a smooth and efficient integration. Avoid common mistakes like trying to map unsupported field types or skipping important backup steps.

Below are some essential tips that can help you avoid roadblocks and make the process more seamless:

1. Avoid Multi-Select Fields in Airtable

Airtable’s Multi-Select fields don’t work with Webflow. There’s no equivalent field in Webflow, so mapping it won’t work. Here’s what you can do instead:

• Use fields like Single Select, Text, or Linked Records.
• If you need multi-select functionality, use Multi-Reference fields in Webflow and map the dropdown values to another collection.
• Heads up: Webflow limits the number of reference fields you can use in one collection.

For more on syncing fields, check out my Complete Guide to Mapping Airtable Fields in Webflow.

‍

2. Storing Webflow IDs and Slugs in Airtable for Backup

Always store both the Webflow ID and Slug in Airtable. Why?

• Backup: If you need to update or retrieve data from Webflow.
• Sync management: You can directly reference and update records by ID, instead of searching by non-unique fields.

It’s smart to create dedicated fields in Airtable for Webflow IDs and Slugs. For more tips on managing Webflow, check out my guide on Automating Webflow CMS Updates with Airtable and Make.com.

‍

3. Single and Multi-Reference Fields: Use Lookup Fields

Webflow’s Reference and Multi-Reference fields work with Airtable’s Linked Record fields. Here’s the key:

• Use lookup fields in Airtable to retrieve the Webflow ID.
• This makes sure you pass the correct ID, not just the record name or a non-unique value.

4. Option Fields: API Calls for Text Values

Syncing Single Select fields between Airtable and Webflow can be tricky. Make.com needs you to pass the option value, but you can’t retrieve it directly from the Webflow CMS. The fix?

• Use an API call to fetch the text value of the option you want to map in Webflow.

5. Mapping Plain and Rich Text: Convert Markdown to HTML

Airtable stores rich text as Markdown, but Webflow expects HTML. Here’s what to do:

• Use a Markdown step in Make.com to change Markdown into HTML.
• If you’ve got a lot of rich text fields, try using an AI tool like ChatGPT to convert them in bulk.

6. Handling Image Uploads: No Expiring Links

Webflow uploads a fresh image when you sync images from Airtable, so you don’t have to worry about links expiring. Just make sure:

• Images are under 2MB because Webflow won’t handle larger files.

‍

7. Store Airtable IDs in Webflow

Just as you store Webflow IDs in Airtable, store Airtable record IDs in Webflow. Why?

• If you ever need to retrieve or update Airtable records from Webflow, you’ve got a backup reference.

It’s a good idea to create a custom field in Webflow for Airtable IDs.

‍

Additional Tips for Airtable and Webflow Integration

• Field Limits: Webflow has a maximum of 30 fields per collection, and 5 of those can be reference fields. Keep this in mind when designing your Airtable base.
• API Limits: When automating with Make.com or another tool, be mindful of Webflow’s API rate limits. You may need to batch updates or pause between requests.
• Rich Media: Webflow handles videos, PDFs, and other rich media well, but make sure all files are optimized before sending to prevent performance issues.

‍

Syncing Airtable with Webflow CMS can feel daunting, but by following the steps above and leveraging the power of Make.com, you can automate most of the process. Just remember to always keep backups of IDs and reference data in both systems, handle rich text formatting carefully, and be cautious of file sizes when uploading images.

With this guide, you're ready to take on Airtable-Webflow integrations like a pro!

If you have any specific questions or need help setting up your automation, feel free to reach out!

‍