Wufoo

Wufoo is a hosted form builder whose forms can take payments and show or hide questions with Field Rules, and it drops into any Webflow page through a Code Embed. Native Webflow forms already cover inputs, checkboxes, selects, and file uploads, though Webflow file upload accepts one file of up to 10MB per upload button and is available on the Premium Site plan and the two upper Ecommerce plans. Wufoo is the option when a form needs payment collection or rule-driven questions on the same page.

Embedding a Wufoo form keeps the page in Webflow while Wufoo stores and processes each submission. Its hosted forms also support multi-page flows. Each entry lands in Wufoo, where a webhook or Zap can create a matching item in the Webflow CMS. A Wufoo redirect can also send respondents to a Webflow thank-you page.

The same setup suits client onboarding forms that collect brand files.

How to integrate Wufoo with Webflow

What is Wufoo? Wufoo is a hosted online form builder owned by SurveyMonkey. It has a drag-and-drop builder, hundreds of templates, and payment integrations including Stripe, PayPal, Square, Braintree, and Authorize.Net. It also exposes a REST API and per-form webhooks for pushing entries to other systems.

Teams reach for Wufoo when a Webflow page needs a form that does more than store fields. Wufoo handles the form logic and storage while Webflow handles the page around it.

You can connect the two in three ways, each covered below. The Wufoo embed code places a form on a page through the Code Embed element, and you only paste code Wufoo generates. Zapier moves entries between the apps, creating or updating Webflow CMS items from Wufoo entries and copying Webflow form submissions into Wufoo. For custom sync, the Webflow and Wufoo APIs give you full control over field mapping and publishing, but they need server-side code. Many setups pair the embed with one of the other two.

Embed Wufoo forms with the Code Embed element

Wufoo's Share page generates embed code that you paste into a Code Embed element on the Webflow page. Wufoo documents the Share flow in its Embed forms article. Embedding works on every Wufoo plan, including Free, though free forms show a Wufoo-branded footer. On the Webflow side, Code Embed needs a Core, Growth, Agency, or Freelancer Workspace, or a site with an active Site plan.

Embed with the JavaScript snippet

Wufoo recommends the JavaScript embed because the container resizes as the form changes. When a validation error appears, the form grows and the submit button stays visible. The snippet creates a WufooForm object with userName, formHash, autoResize, height, and ssl parameters. Wufoo serves its forms over HTTPS on every plan, so keep 'ssl':true on a Webflow site.

To embed the JavaScript snippet:

1. In Wufoo, go to Forms and click the Share icon next to the form.
2. Choose Embed with JavaScript and click Copy Code.
3. In Webflow, open the Add panel and drag a Code Embed element onto the canvas.
4. Paste the snippet into the code editor, then save and close it.
5. Publish the site. Custom code stays off in preview mode until you turn on Enable custom code.

If the same form belongs on every page, paste the snippet into the site-wide Footer code field under Site settings > Custom code instead. The form then renders at the end of every page, so you give up canvas placement in exchange for a single place to maintain it.

Embed with the iFrame code

The iFrame embed isolates the form from your page's CSS and JavaScript. Use it when a Webflow interaction or another script conflicts with the JavaScript snippet. The trade-off is that the iFrame height does not adjust, so a long validation message can push the submit button out of view.

To embed the iFrame:

1. In Wufoo, click the Share icon and choose Embed with iFrame, then Copy Code.
2. Drop a Code Embed element on the Webflow page and paste the code.
3. Increase the height attribute to leave room for instructions and validation errors.

Wufoo's JavaScript embed fallback guide shows how to nest the iFrame inside <noscript> tags below the JavaScript snippet, so visitors with scripts blocked still see the form.

Embed a Wufoo report widget

A public Wufoo report can put a live chart, graph, or single number from your entries on a Webflow page. Marking a report Public makes it readable by anyone outside your Wufoo account, so publish only summaries you are happy to show.

To embed a report widget:

1. In Wufoo, go to Reports and check Public next to the report.
2. Click Widgets below the report and copy the Embed Widget Code for the widget you want.
3. Paste the snippet into a Code Embed element on the Webflow page and publish.

Wufoo's report sharing article covers the other share methods, including a full-page report embed.

Connect Wufoo and Webflow with Zapier

Zapier is the connection Wufoo itself lists for Webflow, and it needs a paid Wufoo plan: Wufoo's plan table puts integrations on Starter and above, so the Zapier route does not work on Wufoo Free.

Zapier publishes five Wufoo and Webflow templates:

• Create items: The real-time item template creates a Webflow CMS item from each new Wufoo entry.
• Create live items: The live item template creates the item and publishes it in the same step.
• Update items: The item update template updates an existing Webflow item from each new Wufoo entry.
• Update live items: The live update template runs on Wufoo's New Form trigger, which Zapier describes as firing when you build a new form, not when someone submits one, so check the trigger before you rely on it.
• Webflow to Wufoo: The reverse template creates a Wufoo entry from each new Webflow form submission.

The entry templates use Zapier's instant New Entry trigger, which needs a Wufoo webhook pointing at Zapier. To set it up:

1. In Zapier, choose the New Entry trigger and copy the webhook URL Zapier provides.
2. In Wufoo, go to Forms, click the More icon, and open Integrations.
3. Select WebHook from the dropdown, click Add Integration, paste the URL, and click Save.

The New Entry (poll) trigger skips the webhook step but checks Wufoo on a schedule, so items appear with a delay. Make and n8n also work with both apps, but you build the flow yourself from their modules. Make has a Wufoo app and a Webflow Create an Item module, and n8n pairs its Wufoo Trigger node with a Webflow node that can create items.

Build with the Webflow and Wufoo APIs

Wufoo's per-form webhook sends an HTTP POST on each new entry, and your endpoint calls the Webflow Data API to create the item. Server-side code between Wufoo and Webflow gives you control over field mapping and deduplication that the Zap templates do not offer. In reverse, a Webflow form_submission webhook can post to your endpoint, which then writes to Wufoo's entries endpoint. You need a public HTTPS endpoint, which can run on Webflow Cloud or any serverless host.

Use these API and authentication resources:

• Wufoo API: Wufoo's API documentation covers forms, fields, entries, reports, and webhook registration at https://{subdomain}.wufoo.com/api/v3/. It uses HTTP Basic Auth with your API key as the username and any string as the password.
• Webflow Data API: Webflow's Data API handles CMS collection items and forms at https://api.webflow.com/v2/.
• Authentication: Send a Bearer site token generated under Site settings > Apps & integrations > API access.
• Webflow webhooks: Webflow webhooks send real-time events such as form_submission, collection_item_created, and site_publish.

Site tokens are limited to five per site and expire after 365 consecutive days of inactivity, so store them in your function's environment variables. Find your Wufoo API key and each field's API ID under Forms > More > API Information, as Wufoo's API information article describes.

Sync Wufoo entries to the Webflow CMS with a webhook

Moments after a respondent clicks submit, the Wufoo entry can appear as a Collection item. It suits member directories and testimonial walls rendered in a Collection List. Wufoo webhooks are a paid-plan feature, and a form can hold up to 10 of them. A webhook fires only for entries submitted after you add it, so pull historical entries from the entries endpoint or a CSV export.

To build the sync:

1. Get the collection's field slugs with GET https://api.webflow.com/v2/collections/{collection_id} (scope cms:read). The fields[].slug values become keys in fieldData.
2. Deploy a function that accepts form-encoded POST bodies. If you allow-list traffic, permit Wufoo's outbound IPs 44.227.81.211, 52.34.241.162, and 100.20.46.177.
3. Register the webhook in Wufoo under Forms > More > Integrations > WebHook, or call the Webhooks API:

curl -X PUT \
  -u "{api_key}:footastic" \
  -d "url=https://your-middleware.example.com/wufoo-hook" \
  -d "handshakeKey={your_secret}" \
  -d "metadata=true" \
  "https://{subdomain}.wufoo.com/api/v3/forms/{identifier}/webhooks.json"

4. In the function, reject any POST whose HandshakeKey value does not match your secret. Then read the Field{N} values, EntryId, and DateCreated from the body. With metadata=true, FieldStructure carries the form's field definitions as a JSON string.
5. Create the item with scope cms:write:

POST https://api.webflow.com/v2/collections/{collection_id}/items
Authorization: Bearer {site_token}
Content-Type: application/json

{
  "isDraft": false,
  "fieldData": {
    "name": "<mapped value>",
    "slug": "<mapped value>",
    "<custom-field-slug>": "<mapped value>"
  }
}

A successful call returns HTTP 202. Both fieldData.name and fieldData.slug are required.

6. Publish with POST https://api.webflow.com/v2/collections/{collection_id}/items/publish and a body of { "itemIds": ["<new_item_id>"] }, or post to /items/live in step 5 to skip this step.

Wufoo's webhook documentation says nothing about retries, so store the EntryId in a CMS field and check for it before creating another item; that check keeps a duplicate delivery from producing a duplicate profile. If you later need to pull an item off the live site, call DELETE /v2/collections/{collection_id}/items/{item_id}/live, because setting isDraft: true does not unpublish an item, as the CMS publishing guide explains.

Send Webflow form submissions to Wufoo

The Webflow form_submission webhook posts JSON to your endpoint, and the endpoint writes a Wufoo entry. Teams that already route Wufoo entries to reports or other tools can copy native Webflow form submissions into the same dataset.

To build the reverse sync:

1. Create the webhook in Site settings > Apps & integrations > Webhooks with the Form submission trigger, or call the Create Webhook endpoint (scope sites:write) with a filter for one form:

POST https://api.webflow.com/v2/sites/{site_id}/webhooks
Authorization: Bearer {access_token}
Content-Type: application/json

{
  "triggerType": "form_submission",
  "url": "https://your-middleware.example.com/webflow-hook",
  "filter": { "name": "Your Form Name" }
}

2. Verify each request. Compute an HMAC-SHA256 of timestamp + ":" + JSON.stringify(body) with the webhook's signing key and compare it to the x-webflow-signature header. The signing key is the webhook's own secret key when a site token created it, or your OAuth app's client secret. Reject requests whose x-webflow-timestamp is older than 5 minutes.
3. Look up Wufoo field IDs with GET https://{subdomain}.wufoo.com/api/v3/forms/{identifier}/fields.json.
4. Map the payload.data keys to Wufoo field IDs and submit the entry:

curl -X POST \
  -u "{api_key}:footastic" \
  -d "Field1=value1" \
  -d "Field2=value2" \
  "https://{subdomain}.wufoo.com/api/v3/forms/{identifier}/entries.json"

5. Check the response. Success is 1 on a saved entry, and FieldErrors lists any field that failed validation.

Return HTTP 200 quickly from your endpoint. Any other status triggers up to 3 additional delivery attempts at 10-minute intervals before the delivery fails, and Webflow deactivates a webhook that keeps failing. Zapier's reverse template covers this flow if you want to skip the endpoint.

What you can build with the Wufoo Webflow integration

These setups keep specialized submission processing in Wufoo while Webflow manages the surrounding site.

• Event registration with payment: Build a conference site where the schedule and speaker pages live in the Webflow CMS and the registration form runs on Wufoo. Wufoo's Event Registration Form template collects fees and logistics, and Field Rules show session picks by ticket type. Payments require a Wufoo Professional plan or above. In a 2015 Wufoo post, John Carroll University described using Wufoo for everything from "fundraising, to event registration, to surveys", with staff pasting forms straight into their own web pages.
• Careers page with resume uploads: Pair a Collection List of open roles with an embedded Employment Application form. Wufoo stores the uploaded files with each entry, and reviewers can comment on applications inside Wufoo. File uploads start on the Wufoo Starter plan.
• Member directory published to the CMS: A Wufoo application form takes each member's details and photo. A Zap or webhook creates the Collection item, and a Collection List renders the directory page. Zapier's Create Live Item action publishes the profile without a manual step.
• Lead capture that feeds Mailchimp or Salesforce: Put a quote or contact form on a Webflow landing page and let Wufoo's native Mailchimp and Salesforce integrations route each entry. In a 2013 case study, Great Black Speakers said adding an email opt-in checkbox to its embedded Wufoo forms "increased email subscriptions by about 30%!"

If you need more control over deduplication and field mapping when entries land in the CMS, the API path above covers those cases. Set up the Webflow side first with our CMS API guide.