Form action override with component props

What is it?

In this cloneable, we highlight how you can you make the action for your form inside a component dynamic. If you have your own service you're using to process forms, then this can be useful to help route forms to different folks or platforms depending on a forms instance

How does it work

Webflow component setup

Create a component with a form, and also add a text element to the canvas and remove the default text and leave it empty.

For your form, give the form element a class name we can reference (I used form) and in the form settings, make sure and switch the method to what your endpoint needs (should be GET). Then add an endpoint as a fallback in case someone who adds the component to a page doesn't specify a new endpoint.

IMPORTANT: You need an endpoint added inside Webflow, or adding an action to the form on page load with JavaScript won't work. The form will still be processed by Webflow.

Select your section, container, wrapper (whatever your prefer) and create a component and give it a name. Double click to edit it, select your empty text element and crate a prop for it. I gave mine the name "endpoint".

Then I wrapped that text element in a div with the class of hidden and set it to "display:none".

Custom code

To tie all of this together we're using a small amount of JavaScript to get each instance of the component (technically a div inside the component with the class "form-component"). Then we're using that as a selector to get the props passed through the component and then attaching that to the form as the action.

If a prop isn't added, we'll use the default endpoint and console warn on page load.