Okay, what I want to do is fairly simple. Basically, I want the last section of the form to operate as an estimate input area. Each item would be input with 3 fields as indicated - Description, Materials, and Cost.
At the end of the 3 fields is a “+” button that I want to add a new set of those 3 fields.
I’ve been playing around with various bits of custom code, but I’m a nub when it comes to this. If someone knows the best way to accomplish this, be it through a plugin, custom code, or if its even possible with webflow (I bet it is, I’m just shite at code). I’m hoping to hear back soon with some solutions!
I’ve built this a few times for clients, and it’s not too terrible. It can get complex however if you also need support for middle-item removals and reordering.
Basically your Javascript just needs to do DOM manipulations. Wrap your field, label, etc. in a DIV, and give it an ID. Wrap that DIV in another DIV as the container, and just keep duplicating that ID’d div at the end of that parent container.
<div>
<div id="cloneMe">
<input ... >
</div>
...
... copies go here
</div>
... add button
I haven’t seen any solutions that work with Webflow forms, but you might check Formly Pro.
If you want to use an embedded 3rd party form, check Jotform, it’s quite capable.
