The Webflow + PassKit integration allows you to embed custom pass enrollment forms directly into your website, letting users receive loyalty cards, coupons, or membership passes straight into their Apple or Google Wallet after form submission.

Setting Up The Integration

To add a PassKit form to your Webflow site:

  1. In your PassKit project, navigate to the Distribution tab.
  2. Click the Share icon next to your entry tier.
  3. Copy the SmartPass enrollment URL (e.g., https://pub1.pskt.io/c/abc123).
  4. Create a custom HTML form with method="post" and action set to your SmartPass URL. Example:
<form action="https://pub1.pskt.io/c/abc123" method="post">
  <div>
    <label for="displayName">Name</label>
    <input id="displayName" name="person.displayName" required />
  </div>
  <div>
    <label for="emailAddress">Email</label>
    <input id="emailAddress" name="person.emailAddress" required />
  </div>
  <div>
    <label for="mobileNumber">Mobile</label>
    <input id="mobileNumber" name="person.mobileNumber" />
  </div>
  <button type="submit">Join</button>
</form>
  1. In Webflow, open your site in the Designer.
  2. Drag in an Embed element and paste your form HTML inside.
  3. Style it as needed and publish your Webflow site.

Once a visitor fills out the form, their data is submitted directly to PassKit, and a pass is issued instantly.

Common Use Cases

This setup is great for brands who want to collect signups directly on their site and send passes to users immediately:

  • Embed a loyalty program sign-up form on your homepage
  • Offer digital coupons through a campaign landing page
  • Let event guests register and receive their tickets in one step
  • Use Webflow CMS to show different forms per product, region, or campaign

Requirements

You’ll need:

  • A PassKit account with a published pass and active enrollment tier
  • A Webflow site with access to the Designer and Embed element
  • The SmartPass URL for the correct tier (found in Distribution)
  • A basic understanding of HTML to structure your form correctly

No backend, JavaScript, or APIs are required. Everything is handled via a direct POST to PassKit.

Support And Documentation

Helpful resources to guide you:

Creating custom enrollment forms

Introduction to Data Collection Forms

SDK and API Configuration Settings

Subscribe to PassKit Webhooks

Using Long-Lived API Tokens

Frequently Asked Questions

Can I Embed a Pass Sign-Up Form Directly Into My Webflow Site?

Yes. Just use Webflow’s Embed component and paste the PassKit-generated HTML form code.

Will the Pass Be Sent Automatically After Form Submission?

Yes. As soon as the form is submitted, PassKit will create the pass and trigger any welcome email or SMS you’ve configured.

Can I Customize the Look of the Form?

Absolutely. You can style the embedded HTML with Webflow’s designer or by editing the code directly.