Dynamic ACTION field for forms in CMS Collection Pages

Design help CMS
1

Hi everyone.

I’m currently setting up a CMS Collection Page that will help me automate the creation of a lot of landing pages with a form, pretty standard stuff.

The catch is that each landing page needs it’s own individual form handler placed on the ACTION field in the form settings. I see there’s no way to natively be able to endow every iteration of the CMS Page with its unique form handler on the ACTION field, so I think I need to create a custom code for this.

I’ve seen in previous forum entries that this very same issue but for the dynamic REDIRECT URL has been solved with a code like this:

<script>
$('#**FORM-ID** ')
.attr('redirect','**CMS-URL** ')
.attr('data-redirect','**CMS-URL** ');
</script>

where the CMS-URL can be replaced with a dynamic value inside the page settings.

My question is, would this method work for the ACTION field of the form too? I’d try that myself but I don’t have the first clue about JS to tweak the code appropriately.

Thank you very much in advance.

Screenshot 2023-08-14 at 10.47.26 AM
Screenshot 2023-08-14 at 10.47.26 AM1034×888 62.7 KB

Here is my public share link: Webflow - Lytho PPC

1 Like
2

@EFFIQS_MARKETING - you can do it with something like this:

<script type="text/javascript">
document.getElementById('#form_id').action = "CMS-PROPERTY-VALUE";
</script>
3

Hi Sam, thank you very much for your quick reply.

I will run a couple of tests and let you know how it goes. :pray:

4

Hi Sam, I ran a couple of test and it seems the code is not working properly, the submissions are not getting registered correctly.

I’ve read on a separate thread that a step to unbind Webflow’s native POST-URL is needed first, that looks like this:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {

  // === Custom Form Handling ===
  
  // unbind webflow form handling
  $(document).off('submit');

  // new form handling
  $('form').submit(function(evt) {
    evt.preventDefault();
    alert("Your custom action here");
  });
});

Does this make any sense to you? Thanks!

5

@EFFIQS_MARKETING - looking at your code, it looks like you are targeting the parent div by id rather than your form. Your form id is wf-form-Whitepaper-Form---DAM-Solution your code is targeting #whitepaper-form which is the parent div.

6

Thank you Sam, my mistake of course.

Now that I’ve addressed this I’ll try again.

Thank you again for your time and kindness.

7

Hi Sam, it seems after correctly targeting the form block instead of the wrapper, the form submissions are still not registering on their end location. I’m sorry if I’m making another mistake but it’s the first time I need to set up a complex lead tracking system in a non-native way like this.

8

Hey Effiqs,
I haven’t tested dynamically changing the form action myself, but it does make some sense that in the publish process Webflow would auto-bind those forms to its own submit handler if the action is initially blank.

You can try your un-binding trick to undo that, or you can put a placeholder like # in the form action field before you publish. That should keep Webflow from binding its handler and your script can change it to whatever you like.

9

Hi Michael, thank you for your input.

It makes sense, however the ACTION field won’t take a # as a value as it would automatically be changed to http://# the reason why is beyond me.

If you happen to have any additional insights or advice I’d be very thankful.

10

Yeah, I saw that change too, that’s totally fine.

11

I’m not sure if it’s that change or not, but ever since I fill out that ACTION field with the #, it redirects to a blank page, and the form handler still does not receive the submission.

I’m currently testing the script that Sam-G very kindly helped me produce

<script type="text/javascript">
document.getElementById('#form_id').action = "CMS-PROPERTY-VALUE";
</script>

The other one I mentioned I haven’t tried because I’m not sure how to implement.

12

Remove the # here-

document.getElementById('#whitepaper-form').action

1 Like
13

@EFFIQS_MARKETING - the last I checked your script was still targeting the parent div rather than the form itself.

14

I prefer to skip that pain :smile:

I do things like this instead:

// prevent default behavior form submit behavior
event.preventDefault();
	
// setup + send xhr request
let formData = new FormData(event.target);
let xhr = new XMLHttpRequest();
xhr.open('POST', event.srcElement.action);
...
...
...
xhr.send(formData);

Find my code example here. This goes with one of my screencasts if you want to see it in action.

For the high level of what this is doing…

  1. Stops the default form from doing its thing (after the forms been captured).
  2. Grabs the form and creates a form data object for it.
  3. Grabs the forms action field (here’s where you inject the URL you’ve added to your CMS making it dynamic per CMS item :+1: )
  4. Sends it!

Then when the form submits successfully, in this example, I redirect the user to a CMS template page by the slug that is returned:

window.location.assign(event.srcElement.dataset.redirect + data.slug);

FYI, this calls a Make (Integromat) endpoint to add data to the CMS and Make returns the slug of the newly created CMS item.

If this is too much for you to follow along with, then you 2 options:

  1. Hire someone.
  2. Skill up by digging in and learning it!

Good luck!

15

Hi Sam, It looks like your code solved my problem, after I correctly targeted the form, the only thing missing was the need to add a # on the default ACTION value. Now it seems every submission is registering correctly.

Thank you very much Sam for your help, and Michael for chiming in!

16

Thank you Michael for your input, it was the missing piece together with Sam’s code, now it seems everything is working correctly, thank you very much!

17

Hi Chris, thank you for your input.

I do think I get the gist of it but indeed the understanding of the code is beyond me at this point. I’m sure someone will benefit from this too. The current code sam shared is working perfectly with Michael’s addition of setting # as the default ACTION value.

I see there are many ways of solving this so if anyone encounters this in the future this thread might be useful.