Preventing default form submit behaviour
Sometimes the Webflow behavior when the submit button is clicked is not what is required and we may need to prevent it. The code below prevents Webflow's default behaviour.
Press the reset button then the submit button to view the default form behavior. https://raw.githubusercontent.com/finsweet/jqueryCourse/main/forms/ex13.js?actionable=true
$(document).ready(function(){
XT1
});
</script>
Live demo
<div id="minidivpage" class="example-live"><h4 class="heading-4">Webflow form:</h4><h5 class="message">Message Text</h5><div class="w-form"><form id="email-form" name="email-form" data-name="Email Form" method="get" aria-label="Email Form"><label for="name">Name</label><input type="text" class="w-input" maxlength="256" name="Name" data-name="Name" placeholder="" id="name"><label class="w-checkbox"><input type="checkbox" id="checkbox" name="Checkbox" data-name="Checkbox" class="w-checkbox-input"><span class="w-form-label" for="Checkbox">Agree</span></label><input type="submit" value="Submit" data-wait="Please wait..." class="w-button"></form><div class="w-form-done" tabindex="-1" role="region" aria-label="Email Form success"><div>Thank you! Your submission has been received!</div></div><div class="w-form-fail" tabindex="-1" role="region" aria-label="Email Form failure"><div>Oops! Something went wrong while submitting the form.</div></div></div></div>
$(document).ready(function() {
XT1
});
</script>
