How to change form "name" as a component override

Design help Custom code
1

I have a form component in every page of a website I built.

I’d like to be able to use a different “form-name” without detaching the component.

For example, I want to name the form in the homepage “homepage form”, in a product page “product-name form”.

Is this possible with custom code or custom attributes?

Thank you so much!

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

2

Possibly. Here’s an easy way to test it-

  • On your form element, add a custom attribute of x-name and bind it to a component property, Form Name.
  • Set the form name on your component instance
  • Add SA5’s dynamic attributes to your site. On page load, it will overwrite name with x-name, so your form name will be set according to your component instance property.

Test it thoroughly, see how submissions come through. There’s a chance Webflow.js stores the form name somewhere internally on initialization, so you want to make certain it picks up your correct form name.

3

Hey Michael, thank you for your reply. I managed to resolve this in a simpler way.
Here’s the solution for the posterity:

  • Added a hidden text field called “page-name”
  • Wrote a script that auto populates the “page-name” field on page load with the page slug
  • Added the script to the code in the project settings

Here’s the code

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var pageNameField = document.getElementById('page-name');
    
    if (pageNameField) {
      var slug = window.location.pathname.split('/').filter(Boolean).pop();
      pageNameField.value = slug || 'home'; // Set 'home' for the root URL if needed
    }
  });
</script>