How to collect additional custom data at checkout?

Hello friends,

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.

Any help much appreciated!

Example of all client data required in regular Webflow form: https://preview.webflow.com/preview/managed-staging?utm_medium=preview_link&utm_source=designer&utm_content=managed-staging&preview=b6aefd9c9b545d074ca4f474d662666a&pageId=5ec3575ff9aaf9efe1433800&mode=preview

Example of checkout page, which I cannot seem to add additional required form fields to: https://preview.webflow.com/preview/managed-staging?utm_medium=preview_link&utm_source=designer&utm_content=managed-staging&preview=b6aefd9c9b545d074ca4f474d662666a&pageId=5ec35abf9156a43040d197c3&mode=preview

1 Like

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…

Come on Webflow, help a brother out! :slight_smile:

2 Likes

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. :slight_smile:

Examples here:

  1. https://multi-step-signup-form.webflow.io/
  2. https://onboarding-ui.webflow.io/

(Disclosure: I’m on the Memberstack team — if you do decide to give it a try, I’d love to know what you think.)

1 Like

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 :slight_smile:

2 Likes

Hi @pepperclip, thanks for weighing in!

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.

  1. Add additional form fields in Embed HTML element on the checkout page

  2. Add Additional Info field to checkout and hide to user

  3. 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.

Cheers,
Chris

12 Likes

Hi Naitik,

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.

Cheers,
Chris

1 Like

I dont know JS and i need help in embeding this in my website. PLEASE HELP!

I dont know JS properly and i need help in embeding this in my website. PLEASE HELP!

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.

2 Likes

Hi Chris,

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.

Thanks

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?

Thanks

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?

  1. Specifically where do I put the JS code? (At the moment it’s in the page settings.)
  2. 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!

1 Like

It’s almost 2023. Any solid solution for this without 3rd party apps? :sweat_smile:

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::pray::pray: