Add inputs to a form with a button

Design help Custom code
1

Hello everybody!

I’m bulding an application form (it’s a multi-step form) and I need a button that allows users to add other job experiences.

For what I understood, the only way to do it in Webflow is through custom code, but since I’m not a developer, could anyone please help me out with this issue in a simple e clear way?

I have already built the 3/4 inputs that a user has to fill out (company name, role and so on) and I need to replicate them everytime he clicks on “add another job”.

Thanks for your help and comprehension!

Here is my site Read-Only (it’s in Italian): [LINK][1]

2

Hi Denny, it’s a fair bit of work. There are at least three main parts you need to build it well;

  • The add-row feature, which duplicates and assigned new names to the fields
  • Possible limits, e.g. no more than 3 added rows
  • A remove-row feature, which likely has to rename later fields for consistency

My point is that if you build a crude version of it ( just part 1 ), it likely won’t be a good user experience. You will probably be better off bringing in a developer for this piece or use a 3rd party form solution instead like Jotform which provides this.

Another easier approach is this-

  • Choose a maximum number of repeating field groups, e.g. 3
  • Make all 3 of them, but hide two
  • Use interactions and your Add another Job buttons to show

So for example lets call them group 1, 2, and 3.
The “add” button in group 1 would;

  • reveal group 2
  • which includes another “add” button at the end of group 2 that would reveal group 3
  • hide the group 1 add button that was just clicked

This will create a simple progressive feel, and you can do this all with no code. Be careful of form validations in these field groups, because a form cannot submit with an invalid field, even if it’s hidden.

3

Hello Michael, first of all, thanks for your help and for your super complete and precise answer.

I followed your second approach, so I duplicated other 2 groups and I set all the interactions hide/show.

Here another problem came up: since it is a multistep form, when a tap the botton “next” the groups that I duplicated appear again.

I don’t know if it’s clear, here the link Webflow - Kung-Fu Lab Sito Def

4

Hey Denny, I’m quite full on at the moment, but if you need help unpacking this, you can DM me for rates.

Multistep forms can be challenging especially if you have form validations occurring. Best I can suggest is that you dig into your MSF setup and also the new interactions you’ve added, they shouldn’t conflict if you’ve set them up right. I’d check your MSF setup first, it doesn’t seem to be organizing your “pages” properly.