Form-name as a property in components containing a form

Hi, I have a form built out on Webflow that my sales reps use to send to potential customers to fill out. This is a custom designed form with quite a few fields to fill out, multistep and custom code for many input fields.

Each sales rep gets their own form with a unique page/slug and form name.

I would like to build one page as a component with the form inside of it, and use instances for each sales reps page, so any changes to the form component will apply to all sales reps forms, without having to edit each form separately.

The problem is, I cannot change the form name for each instance, since Webflow doesn’t support ‘form name’ as a property that’s unique to each form. This is an issue because I need to give each reps form a unique name to know who brought in that client, and connect the submitted form via API to my CRM. If all forms have the same ‘form name’, I can’t know which submitted form is associated with which rep .

Is it possible for the Webflow team to please make an update so that forms within components can have unique form names by making ‘form name’ a property?

This would be greatly appreciated!

Thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @Airon_Studio, you can connect component properties to custom attributes on elements within the component. You could add a custom attribute to the form element called “rep”, and then connect that attribute to a rep property that you add to the component. Then you could use JavaScript to pass that rep value along to your CRM via the API.

@blakelam Thanks for the quick reply!

This sounds like a great solution. However, I’m not familiar with how to add custom attributes to elements in a component, and I’m very limited on JS knowledge (I mostly use ChatGPT to generate JS).

If it’s fairly simple to learn and implement this solution, I’m willing to do it. Though, I would need a bit more info/explanation on how to implement this.

If you’re able to please elaborate, I would greatly appreciate it.

Thank you!

EDIT

I misunderstood at first. I understand how to add custom attributes to form elements. What I need help with is the JS code, and how to pass it to a field in the form and hide the field so users won’t see it. Thanks again!

Also, I’m using Zapier as the API connector. Will I be able to pass attribute value to Zapier?

Welcome @Airon_Studio :wave:

I think what @blakelam mentioned is the way to go by taking it a step further.

Here is the relevent info on editing unique instances of a component:

See if you can edit the form name?

If not, see if you can add an embed element with a hidden form field. Give that hidden form field a unique value per form instance.

With Zapier, this get’s a bit tricky, I believe you’ll need to use “Paths” to accomplish this. If you use something like Make (Integromat), it’s simple and comes with a free account.

But… the idea is that when the form submit arrives to your automation service, you look at the value of the hidden form field (or the form name) and know how to handle it.