I’ve got a situation where a client has one digital product for sale on their site and needs to collect a variety of additional customer data (about 10 fields worth) to complete a sale and take payment using Stripe.
It seems that the Webflow checkout form is very limited in additional fields you can add - am I missing something?
How have others dealt with this situation? Making the user complete multiple forms and redirects etc seems like a pretty terrible UX.
Alternatively, is there any easy way to gather the required customer data in a regular Webflow form on a previous page and then on success, redirect the customer to the checkout with the single product pre-selected?
I’m looking for the most elegant solution I can to the problem above but really hitting a wall at every turn…
Hey! Have you looked into using Memberstack for this? You can have users sign-up and create an onboarding process with as many form-inputs as you want.
If you’re only looking to sell the one digital product with a one-time fee, you can create a single membership plan for it and that connects to Stripe payments directly.
This would be handy but your not going to get previously filled fields like email into the checkout flow. Another option is snipcart / webflow for now. You can add custom fields pretty easily and has digital products too.
A workaround you could try… but is a bit ugly in your case where you need 10 fields… Is to do the following :
1/ In your checkout form, add embed element and write in html and css your extra input fields.
2/ Add a “Additional information” element from the webflow components and name it “Order details” or something like that
3/ In page settings, write a script that picks up each extra input’s value and writes a string with all values as if it was a sentence with separators inside the webflow component of additional information
4/ Hide this component from user or show it as a “recap”
This enables you to pass the information with the order (inside the email and if you use automation afterwards, you could parse again the content to fill different fields in an airtable or other…) and works fine with webflow checkout.
I’ve used this workaround to enable users to choose a dynamic same day or day + 1 / 2 /3 delivery slot. Works like a charm
Apologies for the late response but this was a bit of a journey (and totally shouldn’t be, please take note Webflow!) I wanted to post my solution which is essentially what you proposed above.
Add additional form fields in Embed HTML element on the checkout page
Add Additional Info field to checkout and hide to user
Add some custom JS to page to copy custom field values to Additional Info field on form submit (https://codepen.io/ctrlaltchrs/pen/oNbNKqg) so team gets this critical additional data as part of the sales process
Good luck everyone and Webflow, please give us greater flexibility here to make more robust checkout/shopping experiences.
Thanks for the suggestion but not looking for additional fees or a solution that’s quite this detailed at present. That said I’m looking forward to trying Memberstack for an upcoming project that will make full use of the user accounts and membership system.
Then you’ll need to learn some my man, custom bits and pieces like this will be impossible without it until Webflow come to the party and start adding this functionality natively.
I’m going to be working on a jewellery project soon. However there are some complicated things I need to do. The Client wants an ecommerce website that involves an api. The api contains a filter that shows the stock of certain diamonds. The API looks like this (it is on the right hand side) - > https://www.77diamonds.com/diamond-necklaces/diamond-pendants?metal=2&itemId=379 . The client already has the code for the api ready but I just need help integrating it with the e commerce on webflow. I will compensate this time but i need to know if you are able to do this or not. Please get back to me ASAP.
Hey Chris,
are step 2 and 3 happening still on the webflow product page or are these fields in the stripe checkout page? To my knowledge there is no way to add custom fields on stripes end, so I presume it’s the former. But then how do you pass the data on to stripe?
Hi! I’ve been scratching my head trying to get this implementation to work.
I really appreciate the codepen snippet but could you elaborate a bit more on how to get this to copy the HTML form fields into the Additional Info element?
Specifically where do I put the JS code? (At the moment it’s in the page settings.)
Does the #submit function correspond to a button that’s in the HTML embed?
Would love to see a slightly more elaborated recommendation for what I’m sure is a very common feature request.
Thanks!
You have 2 links on your website, have you already implemented a project with the addition of custom forms on those links? Please answer yes. I really need a solution where I can add custom forms to the checkout page:pray:
Hi, follow up question on this - as my use case requires a similar setup (online tailoring service requiring measurements with orders).
Would love your advice on my line of thinking. Perhaps I am making to complicated for myself, but what happens in the scenarios:
user adds product to cart but then removes it from cart later on before checkout
user goes on to add other items to cart that also require additional info
User ends browsing session and comes back later
In the first scenario, my guess would be to write custom JS to identify the event triggered by the user removing item from cart, and subsequently delete the previously saved session variables. In case the user had multiple items in the cart, you need to somehow make sure to delete the right session variables.
In the second scenario, I guess you’d have to write custom JS to somehow create more session variables to save the additional info to, with each item that is added to cart.
Regarding scenario 3 - would using local storage make more sense so that the data persists throughout browsing sessions, just like cart data does?
Gets complicated quite fast, even though adding and deleting from cart are very common actions from the users’ end
Hey @asleischow, I went through your YouTube Tutorial (which was awesome) but don’t quite have it working yet.
I get the Additional fields in, the code runs and I can see it populate the field before submitting, but when I check the order details, it doesn’t display the field I’ve populated to with the #add-info tag. First I was inputting the data into the Text field like you were and left the Textarea available for comments = The Textarea received user data and showed in my order details, but the Text Field didn’t display at all. So I switched my #add-info ID to my Textarea instead, and now that field doesn’t display any additional information. Whatever element has the #add-info ID doesn’t display in my order details. Help?
Workaround edit: I use the ‘Checkbox’ to “submit” field data first.
@toqeer.94 for my workaround, I used the Additional Info Checkbox as my ‘first click’. So set the checkbox ID to ‘submit’ instead of the Place Order Button. Then require the field and name it something like “Confirm Details”.
Clicking the checkbox populates the hidden Textarea, and the Purchase submits the order.
