How can I prefill an Airtable form embedded in a Webflow page using URL parameters?
TL;DR
- Open your Airtable form to identify field IDs for URL parameters.
- Construct a URL with
?prefill_FieldName=YourValuefor each field. - Embed this URL in your Webflow page using an
<iframe>. - Test and adjust to ensure the form pre-fills as intended.
To pre-fill an Airtable form embedded in a Webflow page, you need to utilize URL parameters to pass data into the form fields.
1. Identify Airtable Form's URL Parameters
- Open your Airtable form and find out what input fields can accept URL parameters. Airtable allows you to pre-fill fields using query strings in the URL.
- Determine the field IDs that you want to pre-fill. These are usually available when you inspect the form using developer tools or based on Airtable documentation.
2. Construct the Pre-filled URL
- Begin with your form's base URL, for example,
https://airtable.com/yourformid. - Append URL parameters using the format
?prefill_FieldName=YourValuefor each field you wish to pre-fill. For instance, to pre-fill a "Name" field, your URL might look like:?prefill_Name=John+Doe. - Ensure field names match exactly, including punctuation and spacing, replacing spaces with
+.
3. Embed the Form in Webflow
- Go to your Webflow project and navigate to the page where you want to embed the form.
- Use an Embed element from the Webflow Designer and paste your constructed Airtable form URL with pre-filled parameters into an
<iframe>or a direct link. - For best practice, you might use
loading="lazy"for the<iframe>to enhance page load performance.
4. Test Your Embedded Form
- Publish your Webflow site and verify that the form fields are pre-filled with the specified data when accessed.
- Make adjustments as needed for any discrepancies in the field names or URL parameters.
Summary
To pre-fill an Airtable form on a Webflow page, create a URL with query parameters corresponding to your form's fields, embed this URL in Webflow, and ensure that it functions correctly upon testing.