Article

Displaying form data on another element

https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js
Copy to clipboard

We can modify any element on our page when a Webflow form is submitted by doing: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/forms/ex15.js?actionable=true

In the above code, $(".heading-4") is the selector that stores the heading of our Webflow form. We are adding the value of the name field to our form title when the submit button is clicked.

If you want to display form data in the success message, like in the video, you can use $(".w-form-done") instead. This is the selector that stores the default message of a typical Webflow form.

<script>
$(document).ready(function(){
  XT1
});
</script>
Copy to clipboard
Send to Live Demo

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"><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>

<script>    
$(document).ready(function() {
  XT1
});
</script>
<script>
  
</script>
Copy to clipboard
Press the Run Demo button to execute the scripts above.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Your browser is too small

Resize your browser to be at least 769px wide.