Identify a form submission based on button clicked

I have multiple buttons on one page that all open and submit the same form in a modal.

I was hoping to be able to identify each form submission based on which button was clicked as each button represents a different service.

I have been able to get a form submission to grab the unique ‘service name’ but only from the first button.

Am I missing something obvious or is this not doable in the manner I am proceeding?


Here is my site Read-Only: [LINK]1

(how to share your site Read-Only link)

Should be fine to but there is a bit of scripting involved.
You’re invoking the modal as an interaction which means that to do this, you’ll want to bind a second click event listener to your button. jQuery is the easiest way.

If you can bind your button text to the Service name, you can keep it pretty tight;

Create a hidden input element in your form, let’s ID it service

Pseudocode;

$('.button-3').click(function() {
  $('#service').val($(this).text());
}); 

This way, clicking the button will populate a hidden field with the appropriate service name. Submitting the form will carry that through. If they are then on the same page, and click another button, the same thing will happen with that new next.

Thanks so much for the guidance, much appreciated. This is a bit above my development experience but I think I am close.

  • I can see that the jQuery is collecting the service name (still not passing it though)
  • I can submit the form
  • I can see a column named ‘service’ in the collected form

As mentioned, the service is still not populating within the submitted forms data. As you can see I can’t seem to separate the code (I’ve left it visible) which returns the ‘service names’ as they all now appear on the form at the same time. I think if I limit them I will only get the first service name with each button.

It may just be my lack of understanding with what order to place things or something basic like that.

https://preview.webflow.com/preview/chorevoyant-temp-site-8e8-e01236bdaef28?utm_medium=preview_link&utm_source=designer&utm_content=chorevoyant-temp-site-8e8-e01236bdaef28&preview=62d5e35424c5dca76a6b854e1f5e7be1&pageId=63744d19fb7e46216e22bd52&workflow=preview

  • jquery needs to be in the page </body>
  • it needs to be within <script> tags
  • you’ll need to read up a bit on jquery to make the selector adjustments you need
  • button text needs to contain the service name you want to display
  • form needs a hidden field to insert it into

If you’re really not familiar with coding and don’t want to research those details, I do programming work, PM me if you’d like to book an hour or two. This is a small piece though, you should be able to work out the details with what I’ve given and a bit of google time

1 Like

This worked!

Something you think would be straight forward in webflow but is not unfortunately.

The only issue for my particular situation is that changing the button names to match the service names makes the design a bit cumbersome and repetitive.

1 Like