In this section we show case all webflow + JS form functionality working in a fluid manner. We will do validation, error reporting, default behaviour prevention, and handling of submitted data in one big demo! https://raw.githubusercontent.com/finsweet/jqueryCourse/main/forms/ex18.js?actionable=true In the above code we define two functions function get_data and validate_inputs that are used by to present data and check our inputs. validate_inputs will have a (true / false) variable which indicates whether the form is ready for submission or not. if its not ready we use event.preventDefault() to prevent submission until all valid information is received by the user. JSON.stringify() will convert the object type data emitted by get_data() to a text.
$(document).ready(function(){
XT1
});
</script>
Live demo
<div id="minidivpage" class="example-live"><h4 class="heading-4">Webflow form:</h4><h5 id="error-message" class="message">Error Text here</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-2" data-name="Name 2" placeholder="" id="name"><label for="email">Email Address</label><input type="email" class="w-input" maxlength="256" name="email-2" data-name="Email 2" placeholder="" id="email"><select id="field" name="field-2" data-name="Field 2" class="w-select"><option value="">Select one...</option><option value="First">First Choice</option><option value="Second">Second Choice</option><option value="Third">Third Choice</option></select><label class="w-checkbox"><input type="checkbox" id="checkbox" name="checkbox-2" data-name="Checkbox 2" class="w-checkbox-input"><span class="w-form-label" for="checkbox-2">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>
