Our Webflow site integrates third-party services, so we have customers that come back from a third-party site to a certain Webflow landing page. When this happens, we want to save this event into our Webflow form submissions.
We use a custom JavaScript (inside an HTML embed symbol) that stores user data inside the browser’s localStorage before the user leaves our site. Technically, our script overrides the default (made in Webflow designer) form’s onsubmit event without preventing the default form submission. The form’s redirect URL makes Webflow redirect the user to the third party.
Now we have form submission data about the user, but we do not know yet, if they will complete the third-party action. This is why we will need another submission once they have returned to our site.
Our landing page for returning customers checks if there is any user data stored in localStorage, and if there is, we create a form element with hidden input fields populated with the stored values. The form behaves like a regular default Webflow form, with the redirect URL set to # (maybe this should better be window.location.pathname?) After creating the form and appending it to the document body, we trigger its submit function.
All of the above is achieved using JavaScript, it works, but not in an elegant way.
1.) Form submission causes a visual site reload.
2.) The redirect URL contains the form values, as we have to use GET (tried POST and got a method not allowed error from Webflow’s server).
3.) Submit has no callback, so error handling is currently missing (and might be a hack to implement).
All issues could be resolved by using AJAX to submit the form data to Webflow silently in the background, and use proper callbacks to verify if the data has been sent, so we can either delete localStorage or retry sending.
I did not find an API documentation for frontend JavaScript customization yet, maybe there is already a perfect solution hidden inside the Webflow object.
Maybe I am just overthinking the problem and looking into the wrong direction. If this can be achieved with default designer settings, that would even be better.
