Custom Form Help

Ask the community
,
1

I am trying to create a web form for clients to fill out information like Phone #, Email, Addresses etc.

I have the form set up currently, the problem I am running into is allowing clients to “Expand” the form to add an additional email address or phone number, I have already created a simple onclick command to expand a collapsed email slot but I cannot seem to find a way to allow clients to click the “Add” button again to create a 2nd email slot.

We need setup in such a way where the client can add as many email addresses or phone numbers they want by clicking a “+” button to expand a new slot to enter information. (also needs to have a “-” button to remove unwanted ones)

But I cannot figure out how to create another onclick event for the same button to expand these input fields at the will of the client, I would hate for it to be a massive expanded form especially for a clients that may only have 1 email and 1 phone # they want to provide.

The code I am currently using to expand one element is as follows

export function EmailAddButton_click(event) {
    $w('#EmailAddressesGroup').expand();
}

export function EmailRemoveButton_click(event) {
    $w('#EmailAddressesGroup').collapse();
}

EmailAddButton is the Blue +
EmailRemoveButton is the Red -

This works great until the client wants to add an additional email address beyond what is expanded.

Hope this made sense, any help would be greatly appreciated

1555×874 123 KB

2

I would think about using a repeater in this case, but it will require some additional code:

  • you create a repeater and put your “type”, “email” and “-” button inside the repeater container;
  • inside onReady create a onRepeaterReady function and pass an array with one object (which contains _id, type and value object keys);
  • set this array as repeater data;
  • add onClick for “EmailAddButton” which will push a new object to array and reassign repeater data;

More info on repeaters: https://www.wix.com/corvid/reference/$w.Repeater.html

3

This example shows how to use a repeater to create a list that can grow (or shrink)…

To-Do List

Let users create, filter, and update their own customized to-do list . The same functionality can be created using data binding or with the Wix Data API.