v0.1

Flujos personalizados
#87 - Eliminar un plan despu茅s de la cuenta atr谩s
Cree contenidos seguros y urgentes
Enviar datos a un webhook y mantener el comportamiento predeterminado del formulario Webflow.
Watch the video for step-by-step implementation instructions
<!-- 馃挋 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 form string'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>More scripts in Custom Flows