Hello Webflow Community,
I’m experiencing a peculiar issue with form submissions on the mobile version of my website, and I’m hoping you can help me sort it out. The problem is that, upon form submission from a mobile device, the page reloads instead of displaying the “Thank You” pop-up as expected. On the desktop version, the form submission works perfectly fine.
I’ve narrowed down the issue to the custom script I’m using to capture the Google Analytics client ID and include it in the form submission data. When I remove this script, the form submission works correctly on mobile devices, but when I add it back, the page reloads upon submission, preventing the “Thank You” pop-up from being displayed. Here’s the script I’ve been using:
<script>
function getClientId() {
return new Promise((resolve) => {
gtag('get', 'G-NPMK0QCMH4', 'client_id', (client_id) => {
resolve(client_id);
});
});
}
async function handleFormSubmit(event) {
event.preventDefault();
const form = event.target;
const clientIdInput = form.querySelector('#google-client-id');
const clientId = await getClientId();
if (clientId) {
clientIdInput.value = clientId;
}
form.submit();
}
document.addEventListener('DOMContentLoaded', () => {
const contactUsForm = document.querySelector('#wf-form-Contact-Us-Form');
const presentationForm = document.querySelector('#wf-form-Presentation-form');
if (contactUsForm) {
contactUsForm.removeEventListener('submit', handleFormSubmit);
contactUsForm.addEventListener('submit', handleFormSubmit);
}
if (presentationForm) {
presentationForm.removeEventListener('submit', handleFormSubmit);
presentationForm.addEventListener('submit', handleFormSubmit);
}
});
</script>
This script works as intended on desktop, but when used on mobile devices, the form submission fails to trigger the “Thank You” pop-up, and the page just reloads.
I’ve made sure that the Google Analytics tracking code is correctly set up on my website, and I’ve also checked the console for any error messages or warnings, but nothing seems to provide any insight into the issue.
If anyone has encountered a similar issue or has any suggestions on how to resolve this, I would greatly appreciate your help. Please let me know if you need more information about my Webflow project’s settings or interactions.
Thank you in advance for your assistance!
Here is my site Read-Only:
https://preview.webflow.com/preview/goldenharbors?utm_medium=preview_link&utm_source=dashboard&utm_content=goldenharbors&preview=6bc2d64ddac958b21bd51882b5b43c69&workflow=preview