Hello there,
When everyone says that Webflow can develop a lot of things although it lacks some features but has custom code, ok.
I found a bug when we add a custom code to add a parameter in the redirect URL or something on a callback with action default (save in the database native).
The objective is for the user to type the email and redirect to “/form-typeform?e=X”, where X is the email from the form.
The name of the form is “waitlist”.
The simple code is:
<script>
document.addEventListener('DOMContentLoaded', () => {
$(".form-waitlist").submit((e) => {
let email = $(e.target).serializeArray()[0].value;
setTimeout(function() {
location.href = '/soft-launch?e=' + email;
}, 100);
})
});
</script>
or
<script>
document.addEventListener('DOMContentLoaded', () => {
$("form[data-name='waitlist']").submit(() => {
let action = form.attr("action");
let method = form.attr("method");
let data = form.serialize();
let email = form.serializeArray()[0].value;
$.ajax({
type: method,
url: action,
data: data,
success: (e) => {
setTimeout(() => {
location.href = "/form-typeform?e=" + email;
}, 100);
},
error: (e) => {
//error
}
});
});
});
</script>
I have tested other codes differently like change attribute redirect, the behavior is the same.
My client tested that something is wrong with the form that some of the emails don’t save in Webflow.
I tested that the desktop is saving the data but my iPhone doesn’t save sometimes, the form works fine but does not is saving email on data.
I added the breakpoint before the setTimeout() to debug better
I found out that Webflow sends the data “outside” this form because when the submit is successful, the network detected a XHR where Webflow saves the data, separately. Check the last item on the screenshot:
I think that this shows that the issue is the order of execution.
Sometimes the Webflow doesn’t have time to save when the redirect is executed.
When I change 100ms to 1000ms, it works well, but when happen to the poor internet user?
What is the best solution to run code while waiting for Webflow to save data? Like promise/await.
What could I have done better to prevent this data loss if I did something wrong with the code?