I want to have a multi-selection, multi-quantity product checkbox at the end of a form. My client wants to be able to see the form submission with what their customer needs and then contact them knowing all this information. How do I put this in? I tried WIX Velo coding but it was saying errors all across the board. Here is a screenshot of what we have now
You can have a multi-choice field in your Wix form with all your products listed manually (as it appears in your screenshot) and the users can select all the products they are interested in purchasing - no code needed. But if you want the users to also specify the quantity for each option selected - that’s where it gets complex. For this you will need to create a custom form using input fields and repeaters along with Velo.
So I’d suggest reaching out to a Velo developer if you’re not familiar with writing code.
What are you using for form and Products? CMS or Wix Apps like forms and Wix Store?
Hiring them costs several hundreds of dollars. I need a different option as its also really hard to get ahold of them
I’m using NEW WIX Forms
Okay, I have played around with velo a bit and have a solution. Use the following code on your page -
import wixData from 'wix-data';
let productsData = [];
$w.onReady(function () {
$w("#successMessage").hide();
$w("#errorMessage").hide();
wixData.query("Stores/Products")
.find()
.then((results) => {
productsData = results.items;
const products = results.items.map(product => {
return { label: product.name, value: product._id };
});
$w("#multiCheckbox").options = products;
})
.catch((err) => {
$w("#errorMessage").text = "Error loading products. Please refresh the page.";
$w("#errorMessage").show();
$w("#successMessage").hide();
console.error("Error fetching products:", err);
});
$w("#submitButton").onClick(() => {
const name = $w("#nameInput").value;
const email = $w("#emailInput").value;
const phone = $w("#phoneInput").value;
const selectedProductIds = $w("#multiCheckbox").value;
if (!name || !email || !phone || selectedProductIds.length === 0) {
$w("#errorMessage").text = "Please fill in all fields and select at least one product.";
$w("#errorMessage").show();
$w("#successMessage").hide();
return;
}
const selectedProductNames = selectedProductIds.map(productId => {
const product = productsData.find(p => p._id === productId);
return product ? product.name : productId;
});
const productsText = selectedProductNames.join("; ");
const newItem = {
name: name,
email: email,
phone: phone,
richTextField: productsText
};
wixData.insert("FormSubmission", newItem)
.then(() => {
$w("#successMessage").text = "Form submitted successfully!";
$w("#successMessage").show();
$w("#errorMessage").hide();
$w("#nameInput").value = "";
$w("#emailInput").value = "";
$w("#phoneInput").value = "";
$w("#multiCheckbox").value = [];
})
.catch((err) => {
$w("#errorMessage").text = "Error submitting form. Please try again.";
$w("#errorMessage").show();
$w("#successMessage").hide();
console.error("Error submitting form:", err);
});
});
});
This code automatically fetches all your products and adds them in a Multi-Checkbox. Website visitors can then fill out the form and submit it. In your CMS collection, you will find the selected product names, email, phone number, and visitor’s name.
Add 4 Text input fields, give them element IDs nameInput,emailInput, and phoneInput.
Then add a Multi checkbox with ID “multiCheckbox”
Finally, 2 texts with IDs successMessage and errorMessage
Create a CMS collection to store the data, in this example, I have just called it “FormSubmission”. Make sure its permission is set to “Collect Content”
in the CMS, add 3 text fields with names name, phone, and email. Add a Rich Text element with name “richTextField” In this field, you will get product names separated by “;”.
And finally add a Button with ID “submitButton”
You can change the names of collections, fields, and element IDs by matching to the given code. Furthermore, create a Dashboard page, add a repeater in it and connect to the CMS to make it easier for your client. Finally create a automation to alert for the form submission.
Feel free to ask any follow-up questions.
Hope that helps
Best Regards
FYI, I forgot to mention, if you change the collection name, make sure to change collection ID in
wixData.insert("FormSubmission", newItem)
You can get it from Code>Databases
This sounds great but so confusing. I have products added to my website (not visible as we just want products listed in a form). I added your code but don’t know where to go from there. Its confusing to see what I add in CMS and what a text input field is
Hmm…I might have created a video but I have exams. If its fine with you, I can set it up in your website(as help, no fee). Its a simple setup. Or you can make a Call on Google Meets and I can guide you through the process.
The text input field is in the Input area of the website elements. They are used to collect user data from frontend.
Hi I would appreciate that. What role would you need to edit that? I’d have to check with my client and if not, we can do a google meet for sure! I appreciate you helping me here
Google Meet is better for security since its a client website. Send me message.
1 Like
This is exactly what they had built initially using Wix Forms, just that you’re using input elements & some code to create a custom form - with the products fetched dynamically.
Since they don’t want any kind of e-commerce functionality, just want to list the names of their products in the form, I’d suggest not using Wix Stores at all, so as to not complicate the whole thing. Simply listing all the products in the multi-checkbox field will do the job.
But here’s the tricky part:
They’ve mentioned that they need a multi-quantity selection flow - wherein users can specify the quantities of each of the products that they select using the multi checkbox, and that info should also appear in the submission. That is where the Wix Forms app ends up being of no use, and this is why the entire form will need to be designed using custom input elements and code, in order to build this multi-quantity functionality.
That’s correct - coding is much more complex and difficult as compared to building a simple drag-and-drop website. And advanced skills come at a higher price. That being said - a professional developer will barely take under an hour to build this out. So if the solutions provided by other community members work for you - that’s great. Else you can reach out to us if you want us to build this out for you. We’re Wix Studio Certified Developers and specialize in developing custom coded solutions. Feel free to reach out through my website (by clicking on my profile) if you need a quote.
Hey where is the best contact for you? We can google meet whenever you have a chance that works for both our schedules