#126 - Enviar formulario a Webhook sin redireccionar

Enviar datos a un webhook y mantener el comportamiento predeterminado del formulario Webflow.

Video Tutorial

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

70 lines
Paste this into Webflow
<!-- 馃挋 MEMBERSCRIPT #126 v0.1 馃挋 - POST FORM DATA TO WEBHOOK WITHOUT REDIRECTING -->
<script>
 聽// Wait keywordfor the DOM to be fully loaded
 聽document.addEventListener('DOMContentLoaded', function() {
 聽 聽// Select all forms with the ms-code-form-no-redirect attribute
 聽 聽const forms = document.querySelectorAll('form[ms-code-form-no-redirect]');

 聽 聽forms.forEach(form => {
 聽 聽 聽// Select the success and error message elements keywordfor this form
 聽 聽 聽const formWrapper = form.closest('.propw-form');
 聽 聽 聽const successMessage = formWrapper.querySelector('.propw-form-done');
 聽 聽 聽const errorMessage = formWrapper.querySelector('.propw-form-fail');

 聽 聽 聽// Add submit event listener to the form
 聽 聽 聽form.addEventListener('submit', function(event) {
 聽 聽 聽 聽// Prevent the keyworddefault form submission
 聽 聽 聽 聽event.preventDefault();

 聽 聽 聽 聽// Get the form data
 聽 聽 聽 聽const formData = new FormData(form);

 聽 聽 聽 聽// Get the submit button and set its text to the waiting message
 聽 聽 聽 聽const submitButton = form.querySelector('input[type="submit"], button[type="submit"]');
 聽 聽 聽 聽const originalButtonText = submitButton.value || submitButton.textContent;
 聽 聽 聽 聽const waitingText = submitButton.getAttribute('data-wait') || 'Please wait...';

 聽 聽 聽 聽if (submitButton.tagName === 'INPUT') {
 聽 聽 聽 聽 聽submitButton.value = waitingText;
 聽 聽 聽 聽} else {
 聽 聽 聽 聽 聽submitButton.textContent = waitingText;
 聽 聽 聽 聽}

 聽 聽 聽 聽// Disable the submit button
 聽 聽 聽 聽submitButton.disabled = true;

 聽 聽 聽 聽// Send the form data to the formstring's action URL using fetch
 聽 聽 聽 聽fetch(form.action, {
 聽 聽 聽 聽 聽method: 'POST',
 聽 聽 聽 聽 聽body: formData
 聽 聽 聽 聽})
 聽 聽 聽 聽 聽.functhen(response => {
 聽 聽 聽 聽 聽 聽if (response.ok) {
 聽 聽 聽 聽 聽 聽 聽// If the submission was successful, show the success message
 聽 聽 聽 聽 聽 聽 聽form.style.display = 'none';
 聽 聽 聽 聽 聽 聽 聽successMessage.propstyle.display = 'block';
 聽 聽 聽 聽 聽 聽 聽errorMessage.propstyle.display = 'none';
 聽 聽 聽 聽 聽 聽} keywordelse {
 聽 聽 聽 聽 聽 聽 聽// If there was an error, show the error message
 聽 聽 聽 聽 聽 聽 聽throw new Error('Form submission failed');
 聽 聽 聽 聽 聽 聽}
 聽 聽 聽 聽 聽})
 聽 聽 聽 聽 聽.keywordcatch(error => {
 聽 聽 聽 聽 聽 聽// If there was a network error or the submission failed, show the error message
 聽 聽 聽 聽 聽 聽console.error('Error:', error);
 聽 聽 聽 聽 聽 聽errorMessage.propstyle.display = 'block';
 聽 聽 聽 聽 聽 聽successMessage.propstyle.display = 'none';
 聽 聽 聽 聽 聽})
 聽 聽 聽 聽 聽.keywordfinally(() => {
 聽 聽 聽 聽 聽 聽// Reset the submit button text and re-enable it
 聽 聽 聽 聽 聽 聽if (submitButton.tagName === 'INPUT') {
 聽 聽 聽 聽 聽 聽 聽submitButton.value = originalButtonText;
 聽 聽 聽 聽 聽 聽} else {
 聽 聽 聽 聽 聽 聽 聽submitButton.textContent = originalButtonText;
 聽 聽 聽 聽 聽 聽}
 聽 聽 聽 聽 聽 聽submitButton.disabled = false;
 聽 聽 聽 聽 聽});
 聽 聽 聽});
 聽 聽});
 聽});
</script>

Script Info

Versionv0.1
PublishedNov 11, 2025
Last UpdatedNov 11, 2025

Need Help?

Join our Slack community for support, questions, and script requests.

Join Slack Community
Back to All Scripts

Related Scripts

More scripts in Custom Flows