Webflow sync, pageviews & more.
NEW

How can I correctly assign this function to a specific Webflow form on a page with the class "dashboard-form" using JavaScript?

TL;DR
  • Assign your function by targeting form.dashboard-form in a DOMContentLoaded event listener.
  • Use form.addEventListener("submit") to run your custom function on submit, optionally using event.preventDefault() based on whether you want to override Webflow’s default behavior.

To assign a custom JavaScript function to a specific Webflow form with the class "dashboard-form", you need to wait for the DOM to load and then add your function to the appropriate form event.

1. Identify the Form Element

  • Make sure the form has a class name of "dashboard-form" in Webflow Designer.
  • Webflow wraps forms in a <form> element, so the class should be applied directly to that <form> element, not just a wrapper.

2. Use JavaScript to Target the Form on Page Load

  • Add this script at the end of the <body> under Page Settings > Before tag, or through Page Custom Code.
document.addEventListener("DOMContentLoaded", function () {  const form = document.querySelector("form.dashboard-form");  if (form) {    form.addEventListener("submit", function (event) {      event.preventDefault(); // Optional: prevent actual submission      myCustomFunction(form);    });  }});

3. Define Your Custom Function

  • Create the function named myCustomFunction anywhere above or within the same script tag.
function myCustomFunction(formElement) {  // Your custom logic, e.g., data parsing, validation, API calls, etc.  console.log("Form submitted:", formElement);}

4. Alternate: Use Webflow’s w-form Wrapper

  • Webflow often adds the class w-form to the outer container, and uses the form tag inside it.
  • You can still target with querySelector("form.dashboard-form") if that class is applied directly to the form element.

5. Avoid Conflicts with Webflow Native Behavior

  • If you want to run your function in addition to the native Webflow form functionality, do not use event.preventDefault().
  • If you want to replace Webflow’s form submission (e.g., to use AJAX), then you must include event.preventDefault().

Summary

To assign a function to a Webflow form with class "dashboard-form", use document.querySelector("form.dashboard-form") inside a DOMContentLoaded event, and attach your function using addEventListener("submit"). This ensures the script runs only when the form exists and is fully loaded.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Which Webflow subscription would be the most suitable for a hosting and development service that plans to have separate website plans for each customer in the workspace?
What could be causing the image in Webflow to not display properly in IE11?
What is the best way to center the content of a grid in Webflow, as shown in the provided screenshot?
What is the best Webflow architecture for a website with four sales markets, each with their own requirements, copy, and graphics? Should I use one project with duplicate pages for shared content or four separate projects with duplicate everything? Also, how do I ensure proper SEO implementation for either option?
How can I stretch a body background image in Webflow to fill the entire screen without preserving its aspect ratio?
What could be the issue if the Webflow Onboarding Form (Full Page) is showing "Oops! Something went wrong while submitting the form" even though the Form Block setting is set to Method: GET and reCAPTCHA has been turned off and published on the site?
Can I automatically change the color of a Webflow template to match the colors of my app without manually updating each element? Also, how can I remove "www" from my website's URL? Lastly, is it possible to change the color of the small circles on the home page of my Webflow website?
Is it possible to create a CSS Masonry grid in Webflow without the need for custom code?
How can I create a fixed-size grid/table in Webflow that remains 940px across all device sizes and enables side-scrolling for overflow on small devices?
Has anyone experienced a situation where after migrating a WordPress site to Webflow and connecting the domain from GoDaddy, BuiltWith still shows WordPress as the CMS instead of Webflow?
What is causing the "TypeError: Cannot convert undefined or null to object" error on multiple pages in Webflow?
Is it possible to have a user account in Webflow where customers can view their past orders and tracking information for physical goods?
How can I include list items in Webflow collections? How can I change the pictures within the Lightbox via Webflow collections? How can I include maps and/or embedded code on Webflow CMS pages? How do SEO and OG settings work for Webflow CMS pages?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I prevent horizontal scroll bars and white space from appearing on a webpage longer than the vertical height when using 100vw in Webflow?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?