How to enable membership accounts to submit new collection list items?

I’m rebuilding a memberships site on Webflow (formerly on Wordpress, ew) for puppy breeders to advertise their puppies, and this is what I’d like to happen:

  1. User submits a form with their puppy information
  2. User pays the appropriate subscription fee with the Stripe integration
  3. The puppy listing (ad) gets published in a collection list

I’ve created the “Puppy Listings” collection list and have user accounts and ecommerce set up, but I can’t figure out how to connect the submission form in a way that it creates a new collection list item after the form is submitted and the user submits payment.

Any help would be appreciated. Note that I’d love to avoid third-party integrations as much as possible (the memberships capabilities aren’t perfect but I’m hoping they’re robust enough for what I need).

Ryan


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Even though the system sounds simple, it’s likely to need full CRUD functionality. Users won’t just need to create & retrieve those listings, they’ll need to update & delete them too. That not only adds to the UX complexity- it means you need a strong binding between user accounts and the data they create.

Pretty quickly you’re in “app” territory, even though it’s a very simplistic app.

Add to that your need for a payment facility ( one time, per listing? ), and you’re needing a number of features that aren’t baked into Webflow yet.

WEBFLOW-ONLY
Realistically, if you want to stay WF only, you can reasonably create-

  1. Paid membership account, either monthly or one-time ( i.e. per user, not per-listing ).
  2. Ability to add a listing- you’d use Logic and forms, and a user ID, and Sygnal’s free User Info lib.

Once that’s created that’s it. Removing it, editing it, they’d really need to contact you.

WEBFLOW + MAKE.COM
If you use a 3rd party automation service like Make, you can add the full CRUD functionality much more easily using webhooks + the CMS API. The per-listing payment functionality would still be a bit tricky to implement, but you might be able to with Stripe and javascript. In that case, I’d probably separate create-listing, payment, and activate-listing, so that the data is protected and the user flow makes sense.

WEBFLOW + WIZED
This is what you really want. It will roughly double your monthly hosting costs, but it provides the framework for everything you need to build basic applications on Webflow.

Welcome @rvanwag :wave:

This is straightforward and fairly simple to hookup.

You’ll want to use Webflow Webhooks for this.

In a nutshell, a Webhook will capture an event (your form submission, or member creation, or ecommerce payment, etc., lot’s of options).

Once that event is captured it’s sent somewhere.

In this case you can use Make (Integromat) to capture that, yes you’ll need to use a free 3rd party app for this, and have Make create your CMS Item through the Webflow API.

That may sound like a lot, but it’s really simple once you get the hang of it.

Here are some tutorials and screencasts that’ll help you:

Here’s a simple tool to hook up Webflow Webhooks (with it’s own learning resources):


Once you go through setting this up once, you’ll take this approach often. It’s simple and adds a ton of power.

Hope that helps!

@memetican Thanks so much for the reply, this is super helpful. As much as I want to make this work with just Webflow Memberships, sounds like it’s not realistic.

Re: the Webflow + Make option, would that give users the flexibility to manage the listings they’ve bought & created? (edit, delete, etc.). Really I want to connect the payment (subscription) to the listing so that when they cancel the subscription it removes the listing, and vice versa.

Re: the Webflow + Wized option, that one’s intriguing to me but it looks like Wized is currently in a closed beta…any chance you have an invite for that that you could share? No worries if not.

Also FYI: Here’s the read-only link to my very WIP site.

Ryan

@ChrisDrit Thanks for the reply! Really appreciate the informative post.

Two follow-up questions on going the webhook route:

  1. Will that allow users to submit multiple listings at the time they’re signing up for the subscription? Basically I’m wanting the flow to go (1) user selects how many ads they’d like to create, (2) user fills out all puppy information for all of those ads, (3) user pays via Stripe ($5/puppy/week), (4) once payment goes through, all submitted puppy listings go live.

Here’s the read-only link to my very WIP site.

Should be fine. Your workflow looked doable.

@ChrisDrit Apologies, still having trouble figuring out how I would set this up so that users would create multiple listings before submitting payment, and how to then carry forward the number of subscription items into checkout.

So user submits information for multiple listings (somehow using an “Add another” button) and selects whether each one is a standard listing ($5/week) or featured listing ($15/week). Then when they’re done they should go to the checkout page and pay for the total (often a combination of standard listings and featured listings). Then when they click “pay now”, it posts all the ads from the previous step.

Can I somehow get away with accomplishing that using Webflow with Webhooks, or would I need something like Memberstack or Wized?

Note: here’s the “create new ad” page: Puppy Connector

@rvanwag lot’s of approaches to make this work, no 1 right answer.

That said, here is one way to accomplish that.

That’s easy enough. Use native Webflow forms along with Make (Integromat). Submit each form, have Make collect the info, store it within their Datastore or Airtable, and have Make respond by redirecting the user to the next step (form). You’ll need to pass a unique id through each stage of form submission to track who is doing this.

The basics of that are found in this screencast:

You could very easily hook up Stripe Payment Links (or something similar) for this.

Stripe is nice in that they offer Webhooks to update when the payment is made and by who. Tap into the Webflow Webhook Creator tool to help set all that up.

I’m not totally sure about this part.

The “posts all the ads” is easy enough. The payment Webhook get’s sent through Make (Integromat) and updates the Webflow CMS (or Airtable, or whatever) and flips a “published” field to true.

The part I’m uncertain about is where they are posted. CMS template pages? Static pages? Both? It’s not so much a technical issue as it is a business rule, just not sure what you’re doing with that.

One thing that may help is Finsweet’s awesome set of tools. Lot’s of solutions to help from them. For an example, checkout the Powerful Rich Text one. It has a neat feature where you include a snippet of text and it replaces it with any element(s) you create within the Webflow designer.

Hope that helps!

Incredible helpful, I’m excited to dig in here. Can’t thank you enough for the tips and advice!

1 Like

Hey Ryan,

I am building a similar site for a client. Out of curiosity, what route did you end up going here to get your feature to function? Thanks!