I’m working on a WordPress site where I have a form field for addresses that was built using Airtable. I need to capture whatever the user types into this address field so I can send it to the Zillow API and fetch some property information for them.
The issue I’m running into is that when I check the page source, all I can see is the Airtable script code. I can’t figure out how to access the actual value that gets entered into the field.
Does anyone know the best way to grab input values from form elements that are dynamically created by Airtable? I’ve tried the usual JavaScript methods but they don’t seem to work with these embedded forms.
Been down this road with Airtable forms. The problem is everything renders in an iframe, so you can’t access the DOM directly because of cross-origin restrictions.
I ditched trying to access fields directly. Instead, I set up a webhook endpoint in WordPress that Airtable hits when someone submits the form. You can set this up in your Airtable base settings under automations.
Once the webhook gets the data, you can trigger your Zillow API call server-side and handle everything from there. Way cleaner than fighting iframes and cross-origin policies.
If you need real-time interaction before form submission, switch to a native WordPress form plugin like Gravity Forms or Contact Form 7. Then you can easily hook into field values with standard JavaScript.
Here’s a solid walkthrough of the webhook approach:
The server-side approach has been way more reliable for me, especially with external APIs that need consistent data flow.
Had the same problem with Airtable embeds recently. What worked for me was using postMessage if you can tweak the Airtable form settings. Just add custom JavaScript to the form that sends field values to the parent window when they change. Listen for input events on the address field inside the iframe, then use window.parent.postMessage() to send the value to your WordPress page. On the WordPress side, add an event listener for the message event. You’ll need access to Airtable’s custom code section though. If you can’t do that, go with the webhook solution mentioned above. The real-time approach only works if Airtable lets you add custom scripts in their form builder - depends on your plan.
Hit this same issue six months back building a real estate lead system. Airtable’s cross-origin stuff with embeds is a pain, but here’s what worked for me. Skip fighting the iframe - use Airtable’s REST API instead and build a custom form. Just create it natively in WordPress with regular HTML inputs, then grab the address with JavaScript as they type. Fire your Zillow API call in real-time and push everything to Airtable when they submit. You’ll control the whole experience and dodge iframe headaches completely. Yeah, you lose Airtable’s form features, but you can integrate with external APIs without breaking your brain. Their API docs are solid and you just need a personal access token to get started.
try MutationObserver to watch for when Airtable loads the form elements. the inputs take time to render, so regular DOM queries fail. wrap it in a timeout and poll every few hundred ms until they appear. it’s hacky but works with third-party embeds.
