Webflow Scripts

Scripts

Hubspot Submit

A form controller script that overrides the default Webflow form behavior to submit form data to Hubspot via API. It will target ALL forms on a page that have the required attributes, and will ignore forms that don't have the required attributes so that other forms can retain default behavior if desired.

IMPORTANT

• The field types and names must match the Hubspot form fields exactly.
• email property in Hubspot must have corresponding input with name email in Webflow.
• Properties other that Contact Properties use dot notation: company.name, company.industry, etc.
• Install the Hubspot tracking code on the site to attribute submissions with the Hubspot cookie.
• It is highly recommended to turn off non-Hubspot form captures for all forms in Hubspot to avoid duplicate submissions. Manage Settings Docs

Currently Supported Field Types

These are the tested field types that are supported. More field types are planned to be supported in future versions with backward compatibility.

• Text Inputs - including text, phone, email, number
• Text Areas
• Checkboxes
• Selects (native select elements - not dropdowns)

Usage

<script
  data-webflow-hubspot-submit
  data-use-ip="false"
  data-use-utm="false"
  data-use-gclid="false"
  src="https://cdn.jsdelivr.net/npm/webflow-scripts@<VERSION>/dist/hubspot-submit/index.js"
></script>

=1.1.0 (or latest version)

Script Tag

PLACE IN GLOBAL FOOTER | OR | PLACE IN PAGE FOOTER (if per page usage)

The script embed should have the following attribute to work as expected: data-webflow-hubspot-submit.

The script embed has the following OPTIONAL flags:

• data-use-ip [true | false] (default: false) - If true, the script will attempt to get the client IP and add to the Hubspot context.
• data-use-utm [true | false] (default: false) - If true, the script will attempt to get the UTM parameters from the URL and add to the Hubspot context. NOTE: The form in Hubspot must have identical utm fields to be collected, otherwise the submission data will be noisy.
• data-use-gclid [true | false] (default: false) - If true, the script will attempt to get the GCLID parameter from the URL and add to the Hubspot context. NOTE: The form in Hubspot must have identical gclid field to be collected, otherwise the submission data will be noisy.

Webflow Form Block

The Webflow form block includes a wrapper with a form element, success block, and error block. It also includes a class w-form which is the selector used for default behavior. This script will remove the class in preparation for the custom behavior - therefore, don't style the wrapper using that selector.

Required Attributes

= Form Element =

(NOT THE FORM BLOCK, but the form element itself)

• data-hs-portal-id - The Hubspot portal ID. (found on the script embed code from Hubspot)
• data-hs-form-id - The Hubspot form ID. (found on the script embed code from Hubspot)

= Form Success Block =

It will be set to display: block when the form is successfully submitted, therefore style the inner elements accordingly.

• data-form-success - Success block target.

= Form Error Block =

It will be set to display: block when the form submission fails, therefore style the inner elements accordingly.

• data-form-error - Error block target.

Optional Attributes

= Redirects =

Applied to form element.

• data-redirect-url - The URL to redirect to after successful form submission. (e.g. /thank-you)
• data-redirect-timeout - The number of milliseconds to wait before redirecting. (e.g. 1000 = 1 second) - default is 0 if a redirect URL is provided without a timeout.

= Resource Downloads =

Applied to form element.

• data-resource-url - The URL to download a resource after successful form submission. These can be PDFs uploaded to the Webflow Assets library, for example.
• data-resource-filename - The filename of the resource to download. This is the name that will be used when the browser prompts the user to save the file. (e.g. "whitepaper.pdf")
• NOTE: if a resource URL is provided but a filename is not, the resource will open a new browser tab to the resource URL instead.

Hello World

A script that logs "Hello, world!" to the console. Helpful for testing CDN fetches.

<script src="https://cdn.jsdelivr.net/npm/webflow-scripts@<VERSION>/dist/hello-world/index.js"></script>