How can I prefill an Airtable form embedded in a Webflow page using URL parameters?
TL;DR
- Copy the Airtable form URL and identify the fields to prefill.
- Append
?prefill_[FieldName]=[Value]to the URL using URL-encoded field names. - Embed the form in Webflow using an
<iframe>with the modified URL. - For dynamic values, use Webflow CMS fields inside the embed.
To pre-fill an Airtable form embedded in Webflow, you need to modify the form's embed URL with query parameters corresponding to the form fields.
1. Find Your Airtable Form URL
- Open your Airtable base and navigate to the form view.
- Click Share form and copy the provided URL.
2. Identify the Field Names for Prefilling
- Airtable requires field names to be URL-encoded (spaces become
%20). - Example: If your field is "Full Name", the parameter should be
prefill_Full%20Name.
3. Format the Prefill URL
- Append
?prefill_[FieldName]=[Value]to the form URL. - Example:
```
https://airtable.com/shrEXAMPLE?prefill_Full%20Name=John%20Doe&prefill_Email=john@example.com
``` - Replace
"Full Name"and"Email"with actual field names from your Airtable form.
4. Embed the Prefilled Form in Webflow
- Use a Webflow Embed element with an
<iframe>. - Example embed code:
```html\`\`\` - Adjust
widthandheightas needed.
5. Dynamically Populate Prefill Values (Optional)
- If pulling values from Webflow CMS, use a Webflow Embed and insert dynamic fields:
```html\`\`\` - Replace
{{Name}}and{{Email}}with Webflow’s CMS field values.
Summary
To prefill an Airtable form in Webflow, modify the form URL with prefill parameters, then embed it using an iframe. For dynamic values, use Webflow CMS fields inside the embed.