Paperform

Paperform adds design-first forms to your Webflow pages that accept Stripe or PayPal payments, route respondents through conditional paths, and collect structured data. Submission data can also flow into Webflow CMS collections through Zapier or a custom API pipeline.

Use this setup for campaign landing pages with lead routing, client intake and appointment bookings, or order forms with in-page checkout. Agencies managing multiple client sites also benefit from Paperform's brand-matching design tools and template library.

How to integrate Paperform with Webflow

What is Paperform? Paperform is an online form builder and no-code page creator that combines form design with native payment processing, scheduling, conditional logic, and quiz capabilities. It supports 26 field types, calculations with Excel-style functions, and over 2,000 integrations through native connections and Zapier. You can edit custom HTML and CSS on Pro plans and above.

Pair Paperform with Webflow when you need forms that go beyond simple data collection. A Webflow product page might embed a Paperform order form that calculates pricing and processes payment in one step. A service business might embed a multi-step intake form with conditional routing on its "Work With Us" page. Webflow stays the design and navigation layer while Paperform manages form logic, payments, and submission flow.

You can integrate Paperform with Webflow in 3 ways:

• Paperform embed code places forms directly on Webflow pages as inline elements, popups, or full-screen takeovers without writing application code.
• Zapier connects Paperform submission triggers to Webflow CMS actions, creating collection items automatically from form responses.
• The Webflow and Paperform APIs give you full control over bidirectional data sync, CMS item creation, and webhook-driven pipelines, but require server-side development.

Most setups combine two or more of these methods depending on complexity.

Embed Paperform forms with Code Embed elements

Paperform has several embed formats, including inline, popup, and full-screen, that you paste into Webflow using Code Embed elements or custom code in head and body tags. Use them for contact forms at a fixed position on a page, popup booking forms triggered by a button, or site-wide lead capture overlays.

You don't need Paperform API access or a third-party automation account. You do need a paid Workspace or Site plan, since the free Starter plan doesn't support custom code.

The embed script has several configuration attributes you can add to the embed div:

• lazy delays loading until the form scrolls into view, reducing initial page weight
• no-scroll="1" prevents unwanted scroll jumps on mobile when users tap form fields
• prefill="key=value" pre-populates fields with static values
• prefill-inherit passes URL parameters from the parent page into form fields
• spinner shows a loading indicator while the form loads
• onsubmit="functionName" calls a JavaScript function when the form is submitted

These options let you adjust how the embedded form behaves inside your Webflow layout.

Custom code doesn't render in the Webflow Designer canvas. You'll see a placeholder in the editor. Test all Paperform embeds on a published or staging URL.

Add an inline form

Paste the inline embed code into a Code Embed element where you want the form to appear. Use it for contact forms, surveys, order forms, and booking flows.

To add an inline Paperform form:

1. Open your form in Paperform and go to Share > Embed.
2. Copy the inline embed code.
3. In the Designer, open the Add panel (+) and drag a Code Embed element onto the canvas where you want the form to appear.
4. Double-click the Code Embed element to open the code editor.
5. Paste the Paperform embed code.
6. Click Save & Close.
7. Publish your site and verify the form on the live URL.

The inline embed code follows this structure:

<div data-paperform-id="your-form-slug"></div>
<script>
  (function() {
    var script = document.createElement("script");
    script.src = "https://paperform.co/__embed.min.js";
    document.body.appendChild(script);
  })()
</script>

To make the form blend with your page design, set the form's background to transparent in Paperform by going to Theme > Theme Settings > Colors > Background Color and setting opacity (A) to 0.

Add a popup form

Paste the popup embed code into your page to open the form in a lightbox overlay from a button click or a JavaScript event. This works well for lead capture CTAs and contact buttons because the form takes no visible space on the page until someone opens it.

To add a popup form:

1. In Paperform, go to Share > Embed and scroll to the popup section.
2. Copy the popup embed code.
3. Add a Code Embed element to the page and paste the code.
4. Click Save & Close and publish.

The popup embed code adds data-popup-button="1" to a trigger element:

<button data-paperform-id="your-form-id" data-popup-button="1">
  Open Form
</button>
<script>
  (function() {
    var script = document.createElement('script');
    script.src = "https://paperform.co/__embed.min.js";
    document.body.appendChild(script);
  })()
</script>

You can also trigger the popup programmatically by calling Paperform.popup('form-id') from any JavaScript event handler. To pass pre-filled values into a programmatic popup, use Paperform.popup('form-id', { prefill: { key1: 'value1', key2: 'value2' }}).

Paperform doesn't include a built-in popup width control. To constrain the width, add CSS to your page: .Paperform__popupcontent { max-width: 400px; }. See Paperform's popup width documentation for details.

Load the Paperform script site-wide

If you need popup triggers on multiple pages, load the Paperform script once at the site level instead of adding a Code Embed element to every page. This works well alongside custom trigger attributes placed on buttons or links throughout the site.

To add the script to every page on your site:

1. Go to Site settings > Custom Code.
2. Paste the Paperform script tag into the Footer code field (before the </body> tag).
3. Click Save changes and publish.

To limit the script to a single page instead:

1. Open the Pages panel and click the gear icon next to the target page.
2. Scroll to the Custom Code section.
3. Paste the script into the Before </body> tag field.
4. Save and publish.

With the script loaded site-wide, any element on any page can trigger a Paperform popup by including data-paperform-id="your-form-id" and data-popup-button="1" as custom attributes. This keeps popup setup consistent across the site.

Embed a form inside CMS collection items

You can place Paperform forms inside blog posts or other CMS-driven pages using the Rich Text field's HTML embed option. This is useful for adding unique forms to individual collection items, like a feedback form on each product page or a registration form on each event post.

To embed a form in a CMS item:

1. Open the CMS collection item in the editor.
2. In the Rich Text field, click the + icon.
3. Select HTML embed (or Code block).
4. Paste the Paperform inline embed code.
5. Save the collection item and publish.

This gives each CMS item its own embedded form placement while you keep the page structure managed in the CMS.

Keep in mind that each form embed needs its own script tag. For collection items that share the same form, load the Paperform script at the site level and place only the <div data-paperform-id="your-form-slug"></div> in each Rich Text embed.

Connect Paperform and Webflow with Zapier

Zapier gives you a no-code path to sync Paperform submissions with Webflow CMS collections. Both platforms have native Zapier connectors with a Paperform-Webflow integration page, so you can build a Zap without writing code or managing webhooks. It's the fastest way to turn form responses into CMS items for use cases like testimonial walls, directory listings, job boards, or event registrant pages.

Zapier supports these Paperform-to-Webflow trigger-action pairs:

• Paperform: New Form Submission (instant) → Webflow: Create CMS Item or Create Live Item
• Paperform: New Partial Form Submission (instant) → Webflow: Create CMS Item

Available Webflow actions for the Paperform-to-Webflow Zapier workflow include Create Item, Create Live Item, Update Item, Update Live Item, Fulfill Order, Update Order, Find Item, Find Live Item, and API Request (Beta). These options make Zapier a practical fit when you want CMS updates without custom middleware.

To set up the Paperform-to-Webflow Zapier integration:

1. Log in to Zapier and click Create Zap.
2. Set the trigger app to Paperform, choose New Submission, connect your Paperform account, and select the form.
3. Set the action app to Webflow, choose Create CMS Item (or Create Live Item to publish immediately), connect your Webflow account, and select the target collection.
4. Map each Paperform field to its corresponding CMS field.
5. Test the Zap with a sample submission.
6. Turn the Zap on.

Once the Zap is live, new Paperform responses can create or publish CMS items automatically.

You map fields manually for each form-and-collection pair. Zapier's free tier limits monthly task runs, so high-volume forms may need a paid Zapier plan.

Build with the Webflow and Paperform APIs

You can connect the Paperform and Webflow APIs directly through server-side middleware when you need full control over how submission data moves between systems. This approach handles use cases that embed code and Zapier can't cover: custom field transformations, conditional CMS routing, bidirectional data sync, and high-volume pipelines. You need a Paperform Pro plan or higher (for webhooks and Standard API access) and server-side development.

The relevant APIs are:

• The Paperform API handles form listing, submission retrieval, and webhook configuration (Business plan for programmatic webhook management)
• The Webflow Data API supports CMS collection item creation, updates, and publishing
• Webflow webhooks trigger real-time events like collection_item_created or ecomm_new_order to kick off Paperform-related workflows

Both APIs use Bearer token authentication. Generate Paperform API keys at paperform.co/account/developer. Create Site tokens in site settings.

Sync Paperform submissions to Webflow CMS items

Write Paperform submission data into CMS collections by using a Paperform webhook that fires on each new submission, hits your middleware endpoint, and creates a CMS item through the Webflow Data API.

To implement this pipeline:

1. In your Paperform form editor, go to After Submission > Integrations & Webhooks > Webhooks > Add Webhook. Enter your middleware endpoint URL, select New Submission as the trigger type, and click Create.
2. Deploy a serverless function (on Vercel, Netlify, or a similar platform) that receives the Paperform POST payload. Return a 200 response immediately, because Paperform enforces a roughly 10-second request timeout. Process the data asynchronously after responding.
3. In the async handler, map Paperform field values from the data array to Webflow fieldData keys. The name and slug fields are required. Use the Paperform submission_id as a deterministic slug (e.g., submission-${submission_id}).
4. Call POST /v2/collections/{collection_id}/items/live to create and publish the CMS item in one request. Alternatively, call POST /v2/collections/{collection_id}/items/bulk to create a draft, then POST /v2/collections/{collection_id}/items/publish to publish it.

A Node.js handler for this pipeline looks like:

export default async function handler(req, res) {
  // Return 200 immediately - Paperform enforces ~10s timeout
  res.status(200).json({ received: true });

  const submission = req.body;

  const webflowPayload = {
    fieldData: {
      name: submission.data?.find(f => f.key === "your-name-field-key")?.value || "Untitled",
      slug: `submission-${submission.submission_id || Date.now()}`,
      email: submission.data?.find(f => f.key === "your-email-field-key")?.value,
    },
    isDraft: false,
    isArchived: false
  };

  const COLLECTION_ID = process.env.WEBFLOW_COLLECTION_ID;
  const WEBFLOW_TOKEN = process.env.WEBFLOW_API_TOKEN;

  await fetch(
    `https://api.webflow.com/v2/collections/${COLLECTION_ID}/items/live`,
    {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${WEBFLOW_TOKEN}`,
        "Content-Type": "application/json"
      },
      body: JSON.stringify(webflowPayload)
    }
  );
}

To retrieve your collection's field slugs, call GET /v2/collections/{collection_id} and inspect the response. All field objects in the Paperform data array are present even for unanswered or hidden questions, so your middleware should handle null and empty values.

Update existing CMS items from form submissions

You can also use Paperform as an editing interface for existing CMS items. Pass a CMS item ID into the form URL as a query parameter, capture it with a hidden field, and use the webhook payload to update the corresponding CMS item.

To implement this:

1. Create a Paperform hidden field with a custom key like webflow_item_id.
2. Link to the form with the item ID in the URL: https://yourform.paperform.co?webflow_item_id={item_id}. Add prefill-inherit to the embed div so the parameter passes through.
3. In your middleware, extract the webflow_item_id value from the webhook payload's data array.
4. Call PATCH /v2/collections/{collection_id}/items/{item_id}/live with the updated fieldData.

This pattern works well for community directories, team profiles, or any CMS-driven content where external contributors need to update their own records.

Trigger pre-filled Paperform links from Webflow CMS events

When a new CMS item is created, such as a new client record or project, a Webflow webhook can trigger middleware that builds a pre-filled Paperform URL and sends it via email or Slack.

To set this up:

1. Register a Webflow webhook at POST /v2/sites/{site_id}/webhooks with triggerType: "collection_item_created".
2. When the webhook fires, fetch the full item data with GET /v2/collections/{collection_id}/items/{item_id}.
3. Build a Paperform URL with query string parameters: https://form.paperform.co/{slug}?client_name=value&project=value.
4. Dispatch the URL through your email or messaging service.

This approach doesn't require any Paperform API calls. It uses Paperform's URL-based prefill feature, documented in the pre-filling guide.

What can you build with the Paperform Webflow integration?

Integrating Paperform with Webflow lets you add form-driven functionality to any page without rebuilding your site architecture or managing a separate checkout system.

• In-page order forms with payment processing: Embed a Paperform order form on a product page that calculates totals, applies coupon codes, and processes payment through Stripe or PayPal. Customers complete the entire purchase without leaving the page.
• Multi-step client intake with conditional routing: Place a branching intake form on your services page that asks different follow-up questions based on the visitor's selections. Responses auto-route to your CRM or project management tool through Paperform's native integrations.
• CMS-powered testimonial or directory pages: Use Zapier or a webhook pipeline to write Paperform submissions into CMS collections. Each new submission becomes a published collection item that appears on a testimonials page, team directory, or event listing built with a Collection List.
• Pricing calculators and quote request forms: Embed a Paperform calculation form on your pricing page. Visitors select options, see a real-time price estimate generated by Paperform's calculation fields, and submit a quote request that triggers a sales notification.

If you need more control over how submission data flows into CMS collections or triggers downstream workflows, the API integration path covers those cases.