I'm trying to build a typeform like form with several sections where the user input options are images taken from a collection. The options presented in the second section of the form need to change based on the options selected on the first section of the form. I also need to make these options exhibit checkbox like behavior (multiple can be selected) in some sections and radio like (only one can be selected). Can someone help out with some ideas or examples on how to build this
Here is an example screenshot of what I'm trying to do.
To make a form with repeater items as dynamic choices, do the following:
Set up the HTML structure with a place for repeater items, a button to add items, and a send button.
2. Set the CSS styles for the things in the repeater.
3. Put the dynamic choices in a JavaScript array.
4. Write a method that adds an item to a repeater on the fly.
5. Create a select element inside the function and fill it with choices from the array of dynamic options.
6. Connect the select element to the repeater item and add the repeater item to the container.
7. Add the choices you want to the array of dynamic options.
8. Use server-side code or JavaScript, as needed, to handle form submissions.
KanTime Medicare
To build a Wix form with repeater items as dynamic options, you can follow these steps:
Log in to your Wix account and navigate to the Wix Editor.
Open the page where you want to add the form or create a new page.
Drag and drop a "Repeater" element from the Add menu onto your page. This will be the container for the repeated items.
Customize the appearance and layout of the repeater by adjusting the settings in the Wix Editor.
Within the repeater, add the form fields that you want to repeat. This could include input fields, checkboxes, dropdowns, or any other relevant form elements.
Set up the dynamic options for the repeated items. You can achieve this by connecting your form to a database collection in Wix. a. Go to the Database tab in the Wix Editor and create a new collection or use an existing one. b. Define the fields in the collection that correspond to the options you want to display in the repeater. c. Go back to the page with the form repeater and connect it to the database collection. d. Configure the form fields within the repeater to fetch their options from the connected collection.
Customize the styling and design of the form and repeater to match your desired look.
Add any additional form validation or submission logic as needed.
Save your changes and publish the website to make the form with dynamic options available to your users.
By following these steps, you should be able to create a Wix form with repeater items that display dynamic options fetched from a database collection. KMFusa
Hi, thanks for the detailed reply. This is great, but does wix accept code in this way? Or is this for use in a normal website?
Hello,
To build a form with repeater items as dynamic options, you can use HTML, CSS, and JavaScript. Here's a step-by-step guide on how to achieve this:
Set up the HTML structure:
<form>
<div id="section1">
<!-- Section 1 content -->
</div>
<div id="section2">
<!-- Section 2 content -->
</div>
</form>
Create the necessary JavaScript code:
// Define your collection of options
const options = {
option1: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
option2: ['image4.jpg', 'image5.jpg', 'image6.jpg'],
// Add more options as needed
};
// Function to populate section 2 options based on section 1 selection
function populateSection2Options() {
const section1Select = document.getElementById('section1-select');
const section2Options = document.getElementById('section2-options');
// Clear previous options
section2Options.innerHTML = '';
// Get selected option from section 1
const selectedOption = section1Select.value;
// Create new options based on selected option
options[selectedOption].forEach(option => {
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.name = 'section2-option';
checkbox.value = option;
const label = document.createElement('label');
label.appendChild(checkbox);
label.appendChild(document.createTextNode(option));
section2Options.appendChild(label);
});
}
// Add an event listener to the section 1 select element
document.getElementById('section1-select').addEventListener('change', populateSection2Options);
Style the form using CSS
Customize the HTML content for your sections.