# Custom Form Help

**URL:** <https://forum.wixstudio.com/t/custom-form-help/21044>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [September 4, 2019, 6:21pm UTC](https://forum.wixstudio.com/t/custom-form-help/21044 "2019-09-04T18:21:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![alex95664](https://avatars.discourse-cdn.com/v4/letter/a/7c8e57/32.png) [@alex95664](https://forum.wixstudio.com/u/alex95664)\
**Post date:** [September 4, 2019, 6:21pm UTC](https://forum.wixstudio.com/t/custom-form-help/21044/1 "2019-09-04T18:21:38Z")

</div>

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

```javascript
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

 ![](https://us1.discourse-cdn.com/wix/original/3X/d/d/dd03980b47beb20d630efe74fc4f81db45eab6b8.jpeg)

---

<div class="post-metadata">

**Author:** ![viktoriian](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/viktoriian/32/14423_2.png) [@viktoriian](https://forum.wixstudio.com/u/viktoriian)\
**Post date:** [September 5, 2019, 10:08am UTC](https://forum.wixstudio.com/t/custom-form-help/21044/2 "2019-09-05T10:08:53Z")

</div>

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](https://www.wix.com/corvid/reference/$w.Repeater.html)

---

<div class="post-metadata">

**Author:** ![yisrael-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yisrael-wix/32/1107_2.png) [@yisrael-wix](https://forum.wixstudio.com/u/yisrael-wix)\
**Post date:** [September 5, 2019, 10:13am UTC](https://forum.wixstudio.com/t/custom-form-help/21044/3 "2019-09-05T10:13:57Z")

</div>

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](https://www.wix.com/code/home/forum/wix-tips-and-updates/example-todomvc) . The same functionality can be created using data binding or with the Wix Data API.