I need a piece of information to understand how to handle a client’s request.
I need to build a form to collect membership information for a gym membership.
Information such as: first name, last name, email, type of sport and services included.
Signing up multiple family members will give a discount.
So the need is to fill out the form, click the “add a family member” button and fill out the exact same form again.
At this point sum up the costs of the chosen products, apply the discount and send the information to the front desk via e-mail (which will take care of closing the sale).
How can I implement a similar mechanism?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
I guess webflow can handle this
to create a form for gym memberships with multiple family and automatic cost calculations, you can use webflow’s cms (content management system) features
i can help to set it up
- create a CMS collection for “memberships” and set up fields for first name, last name, email, type of sport, services, and maybe a discount field
- create a form in your webflow project with the fields you need. you can add a button labeled “Add a Family Member” to duplicate the form section. use webflow interactions to show/hide the duplicated form when that button is clicked
- use conditional visibility settings to show the total cost and discount only when multiple family members are added. u’ll need to use custom code to calculate the total cost based on the options selected
- when someone submits the form, you can set up webflow to send an email notification to the front desk with all the collected info
this is a more complex use case, and it might require some custom coding or integrations, especially for the dynamic cost calculations and email notifications
hope that will help
Hi Andrea, as Julia suggested you can build this in Webflow using interactions, however the end result can be a fairly complex form setup that is difficult to maintain when they want to change something.
When I build these I typically use JS to handle the section-duplication rather than interactions so that the notification email does not contain a lot of blank fields from the hidden sections.
If you’re more concerned about solid functionality than you are about the styling of the form, I’d strongly recommend you consider just dropping in a JotForm or something similar instead. The designer is much easier to use and lets you do much more advanced business logic.
You could even take payments that way if you like.
If there’s a reason you need to build the form in Webflow however, let me know, I’ve been playing with a general attributes-based solution for form-section-duplication that I might release as a free tool for others who need it.
Hi @mmcarteeri, Hi @memetican,
thank you very much for your help.
This is a very particular need and thinking about it better, I think I will use webflow to create the ui for the form sections and js for all the logic.
I was thinking of duplicating the form with js to collect all the information.
There can be multiple people registered, so using a “traditional” form seems complex to me. The summary email could be very confusing.
My idea: when submitting the form, I create a json object (using js) and send it to an api created with zapier.
Zapier will enter the data into airtable and then send html emails with the registration summary.
What do you think?
@memetican , if you send me your script to hide sections I will appreciate it.
Thank you very much.
I think using Zapier is a good idea!
but I still want to hear Michael’s opinion about an api created with Zapier
@memetican, what is your opinion about it?
I think to use Zapier webhooks.
Hi Andrea & Julia,
I’d recommend Make, Pipedream, or n8n instead of Zapier for three reasons-
- Better for things like loops ( if you’re adding one row per person registered )
- These three all support webhook responses, so you can indicate an actual success response, results information or an error message if needed
- Generally far less expensive
But I’d just start with the form design, and the client side programming on your repeating section. You can use that even with Webflow’s native email notification and then add the automation piece afterwards.
I don’t have a generic script for you, each client situation is different, but the basic thing you’ll want to do is identify any empty section, remove them, and the renumber your other section fields, e.g.
name-2. For automation support I like to keep a hidden field as well which stores the count of repeating sections, this makes life much easier for you on the server side since you’ll know exactly how many you have and exactly what their JSON field names are.
You can also use that hidden count field as a part of your form validation to ensure you have e.g. at least 1 section being submitted.
Thanks Michael for your suggestions.