⚙️ Webflow Script Builder

This is a collection of scripts that we have hand-crafted specifically for extending the capabilities of Webflow beyond what is currently offered. These should always be tested on staging before pushing live.

⚠️ Remember when you paste these scripts into your footer code, you'll want to make sure to paste them within the document ready function.

<script>
  $("document").ready(function() {
    // Code goes here
  });
</script>

Copy Code

📝 Form Enhancements

Append current page URL to all forms

This script appends the current page URL as a hidden text input to all forms on the website. It allows you to capture the URL from which the form was submitted.

jQuery

// Append current page URL to all forms as a hidden text input
$('form').append(`<input type="hidden" id="insertpageurl" name="Page URL" value="${location.href}" />`);

Copy Code

Append user's IP address to all forms

This script retrieves the user's IP address using an API and appends it as a hidden text input to all forms on the website. It helps in capturing the user's IP address along with form submissions.

jQuery

// Append user's IP address to all forms
$.getJSON("https://api.ipify.org?format=json", function(data) {
  $('form').append(`<input type="hidden" id="insertipaddress" name="IP Address" value="${data.ip}" />`);
});

Copy Code

Prevent empty dropdown form field options from being selected

This script disables all form dropdown options with no value set.

jQuery

// Disable empty dropdown form field option
$('form option[value=""]').attr('disabled', true);

Copy Code

Format phone number input to U.S. format

This script formats the phone number input field to the U.S. format when the user unfocuses the field. It ensures that phone numbers entered by users are displayed consistently.

⚠️ You must add a custom attribute to the field named "format-phone" and leave the value empty.

jQuery

$('input[format-phone]').focusout(function() {
  var phone = $(this).val();
  function formatPhoneNumber(phoneNumberString) {
    var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
    var match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
    if (match) {
      return '(' + match[1] + ') ' + match[2] + '-' + match[3];
    }
    return null;
  }
  $(this).val(formatPhoneNumber(phone));
});

Copy Code

🎉 Fun Stuff

Cookie enabled popups

This script targets your popup to be shown after a 5 second delay, and cookies it for 24 hours upon closing it so it is not shown for 24 hours.

⚠️ You must add an ID of "sale-pop-up" to your popup wrapper AND you must add an ID of "close-pop-up" to the close or "x" icon within it.

⚠️ Make sure your '#sale-pop-up' element is set to {display: none; opacity: 0} by default using the Webflow style settings.

jQuery

    // Function to set a cookie
    function setCookie(name, value, days) {
      var expires = "";
      if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
      }
      document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }

    // Function to get a cookie by name
    function getCookie(name) {
      var nameEQ = name + "=";
      var cookies = document.cookie.split(';');
      for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i];
        while (cookie.charAt(0) === ' ') {
          cookie = cookie.substring(1, cookie.length);
        }
        if (cookie.indexOf(nameEQ) === 0) {
          return cookie.substring(nameEQ.length, cookie.length);
        }
      }
      return null;
    }

    // Function to check if the pop-up should be displayed
    function checkPopUpDisplay() {
      var lastPopUpDate = getCookie("lastPopUpDate");
      var currentDate = new Date().toUTCString().split(' ').slice(0, 4).join(' ');

      // If the pop-up has not been seen today, display it with a delay
      if (lastPopUpDate !== currentDate) {
        setTimeout(function() {
          $("#sale-pop-up").css("display", "flex").animate({ opacity: 1 }, 500);
        }, 5000); // 5 second delay
      }
    }

    // Function to close the pop-up and set the cookie
    function closePopUp() {
      $("#sale-pop-up").animate({ opacity: 0 }, 500, function() {
        $(this).css("display", "none");
      });
      setCookie("lastPopUpDate", new Date().toUTCString().split(' ').slice(0, 4).join(' '), 1); // Set the cookie to expire in 1 day
    }

    // Check if the pop-up should be displayed when the page loads
    checkPopUpDisplay();

    // Event listener for the close button
    $("#close-pop-up").click(closePopUp);

Copy Code

Keep copyright year up to date

This script updates the copyright year dynamically to the current year. It ensures that the year displayed in the copyright notice is always up to date.

⚠️ You must add a custom attribute to an element named "update-year" and leave the value empty. This will replace the text inside your element with the current year.

jQuery

changeYear = () => {
  var newDate = new Date();
  var dateYear = newDate.getFullYear();
  $('[update-year]').html(dateYear);
}

Copy Code

Count Up Numbers

This script defines the easeInOutQuad easing function and then applies a count-up animation to elements with the attribute [countup]. Each element's text value will be gradually animated from 0 to the specified countTo value using the defined easing function. This animation will trigger when the element is scrolled into view

⚠️ You must add a custom attribute to an element named "countup" and the value should be the desired value to be counted up to.

Count Up Speed (Milliseconds)

jQuery


// Define the easeInOutQuad easing function
$.easing.easeInOutQuad = function(x, t, b, c, d) {
  if ((t /= d / 2) < 1) return c / 2 * t * t + b;
  return -c / 2 * ((--t) * (t - 2) - 1) + b;
};

// Listen to the scroll event on the window
$(window).on('scroll', function() {
  // Iterate through all elements with the 'countup' attribute
  $('[countup]').each(function() {
    var $this = $(this);
    var countTo = parseInt($this.attr('countup'));
    var windowHeight = $(window).height();
    var scrollPosition = $(window).scrollTop();
    var elementPosition = $this.offset().top;

    // Check if the countup animation has not been triggered and the element is within the viewport
    if (!($this.data('countup-triggered')) && elementPosition < (scrollPosition + windowHeight)) {
      $this.data('countup-triggered', true);

      // Animate the countup
      $({ countNum: 0 }).animate({
        countNum: countTo
      }, {
        duration: 2500,
        easing: 'easeInOutQuad',
        step: function() {
          $this.text(Math.floor(this.countNum));
        },
        complete: function() {
          $this.text(this.countNum);
        }
      });
    }
  });
});

Copy Code

Confetti

This script enables a confetti effect on an element when it has the attribute confetti-target set with a class of ".active". It uses CSS animations and dynamically adds confetti particles to create a festive visual effect

⚠️ [confetti-target] is used to identify the element that will display the confetti effect, while [confetti-trigger] is used to identify the element that triggers the activation or deactivation of the confetti effect. When [confetti-target] is given the ".active" class, the confetti will begin.

Here's an example of toggling the ".active" class on a [confetti-target] element.

Confetti Trigger

Confetti Target

Confetti Color 1 Hex

Confetti Color 2 Hex

CSS

[confetti-target].active {
    position: relative;
}

[confetti-target].active > .particle {
    opacity: 0;
    position: absolute;
    animation: confetti 3s ease-in infinite;
    z-index: 0;
}
[confetti-target].active > .particle.c1 {
    background-color: #f47929;
}
[confetti-target].active > .particle.c2 {
    background-color: #f47929;
}

@keyframes [confetti-target] {
    0% {
        opacity: 0;
        transform: translateY(0%) rotate(0deg);
    }
    10% {
        opacity: 1;
    }
    35% {
        transform: translateY(-800%) rotate(270deg);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(2000%) rotate(1440deg);
    }
}

Copy Code

jQuery


function initparticles() {
    confetti();
}

function confetti() {
    $.each($("[confetti-target].active"), function(){
        var confetticount = ($(this).width()/50)*5;
        for(var i = 0; i <= confetticount; i++) {
            $(this).append('<span class="particle c' + $.rnd(1,2) + '" style="top:' + $.rnd(10,50) + '%; left:' + $.rnd(0,100) + '%;width:' + $.rnd(6,8) + 'px; height:' + $.rnd(3,4) + 'px;animation-delay: ' + ($.rnd(0,30)/10) + 's;"></span>');
        }
    });
}

jQuery.rnd = function(m,n) {
    m = parseInt(m);
    n = parseInt(n);
    return Math.floor( Math.random() * (n - m + 1) ) + m;
}

initparticles();

$("[confetti-trigger]").on("click", function() {
   $(`[confetti-target=${$(this).attr('confetti-trigger')}]`).toggleClass("active");
   initparticles();
});

Copy Code

🎯 Sticky CTA Bar

Fixed Footer CTA Display logic

This script controls the display logic of a fixed footer call-to-action (CTA) element. It shows the fixed CTA when the user scrolls up and hides it when the user scrolls down.

Fixed Element Class Name

jQuery

var lastScrollTop = 0;
var fixedNav = $('.fixed-footer-cta');
$(window).scroll(function() {
  var st = $(this).scrollTop();
  ((st < lastScrollTop)) ? fixedNav.slideDown(150) : fixedNav.slideUp(150);
  lastScrollTop = st;
});

Copy Code Copy Webflow Component

🤖 SEO Scripts

Canonicalize a paginated blog

This script adds canonical links to paginated CMS pages. It retrieves the previous and next page URLs from the pagination links and appends the appropriate tags to the website's head. Additionally, if the current page has a query parameter _page, indicating a paginated blog page, it adds a canonical link to the main CMS page.

⚠️ You must add this to the page-level footer code, no need to run this globally.

CMS Slug

jQuery

var cms_prev_link = window.location.origin + window.location.pathname + $('.w-pagination-previous').attr('href');
var cms_next_link = window.location.origin + window.location.pathname + $('.w-pagination-next').attr('href');

if ($('.w-pagination-previous').attr('href')) {
  prev_canonical = "<link rel='prev' href="" + cms_prev_link.toString() +"" />";
  $('head').append(prev_canonical);
}

if ($('.w-pagination-next').attr('href')) {
  next_canonical = "<link rel='next' href="" + cms_next_link.toString() + "" />";
  $('head').append(next_canonical);
}

if (window.location.search.indexOf('_page=') > 0) {
  $('head').append("<link rel="canonical" href="" + window.location.origin + "/blog">");
}

Copy Code

Append tracking parameters to form fills

If a user hits the website after clicking an ad link, we want to store those URL parameters into cookies for the purpose of attaching those values to form fills.

⚠️ YOU MUST ADD THIS ABOVE (OUTSIDE OF) THE DOCUMENT READY FUNCTION

jQuery

// Get the value of the UTM parameters from the URL
const trackingParameters = new URLSearchParams(window.location.search);
const utmSourceValue = trackingParameters.get('utm_source');
const utmMediumValue = trackingParameters.get('utm_medium');
const utmCampaignValue = trackingParameters.get('utm_campaign');
const utmTermValue = trackingParameters.get('utm_term');
const utmContentValue = trackingParameters.get('utm_content');
const gclidValue = trackingParameters.get('gclid');
const _gclidValue = trackingParameters.get('_gclid');
const fbclidValue = trackingParameters.get('fbclid');
const campaignIdValue = trackingParameters.get('campaign_id');
const adGroupIdValue = trackingParameters.get('ad_group_id');
const creativeValue = trackingParameters.get('creative');
const matchTypeValue = trackingParameters.get('match_type');
const networkValue = trackingParameters.get('network');
const deviceValue = trackingParameters.get('device');
const keywordValue = trackingParameters.get('keyword');

// Check if the parameters exist and set cookies accordingly
if (utmSourceValue) {
  document.cookie = `utmSource=${utmSourceValue}; path=/;`;
}
if (utmMediumValue) {
  document.cookie = `utmMedium=${utmMediumValue}; path=/;`;
}
if (utmCampaignValue) {
  document.cookie = `utmCampaign=${utmCampaignValue}; path=/;`;
}
if (utmTermValue) {
  document.cookie = `utmTerm=${utmTermValue}; path=/;`;
}
if (utmContentValue) {
  document.cookie = `utmContent=${utmContentValue}; path=/;`;
}
if (gclidValue) {
  const expiryDate = new Date();
  expiryDate.setDate(expiryDate.getDate() + 90); // 90 days
  document.cookie = `gclid=${gclidValue}; path=/; expires=${expiryDate.toUTCString()};`;
}
if (_gclidValue) {
  const expiryDate = new Date();
  expiryDate.setDate(expiryDate.getDate() + 90); // 90 days
  document.cookie = `_gclid=${_gclidValue}; path=/; expires=${expiryDate.toUTCString()};`;
}
if (fbclidValue) {
  const expiryDate = new Date();
  expiryDate.setDate(expiryDate.getDate() + 7); // 7 days
  document.cookie = `fbclid=${fbclidValue}; path=/; expires=${expiryDate.toUTCString()};`;
}
if (campaignIdValue) {
  document.cookie = `campaignId=${campaignIdValue}; path=/;`;
}
if (adGroupIdValue) {
  document.cookie = `adGroupId=${adGroupIdValue}; path=/;`;
}
if (creativeValue) {
  document.cookie = `creative=${creativeValue}; path=/;`;
}
if (matchTypeValue) {
  document.cookie = `matchType=${matchTypeValue}; path=/;`;
}
if (networkValue) {
  document.cookie = `network=${networkValue}; path=/;`;
}
if (deviceValue) {
  document.cookie = `device=${deviceValue}; path=/;`;
}
if (keywordValue) {
  document.cookie = `keyword=${keywordValue}; path=/;`;
}

Copy Code

⚠️ YOU MUST ADD THIS INSIDE OF THE DOCUMENT READY FUNCTION

jQuery

// Get the value of the cookies
const utmSourceValue = getCookie("utmSource");
const utmMediumValue = getCookie("utmMedium");
const utmCampaignValue = getCookie("utmCampaign");
const utmTermValue = getCookie("utmTerm");
const utmContentValue = getCookie("utmContent");
const gclidValue = getCookie("gclid");
const _gclidValue = getCookie("_gclid");
const fbclidValue = getCookie("fbclid");
const campaignIdValue = getCookie("campaignId");
const adGroupIdValue = getCookie("adGroupId");
const creativeValue = getCookie("creative");
const matchTypeValue = getCookie("matchType");
const networkValue = getCookie("network");
const deviceValue = getCookie("device");
const keywordValue = getCookie("keyword");

// Append UTM Sources as hidden fields to each form
jQuery('form').append(`<input type="hidden" id="utmSource" name="UTM Source" value="${utmSourceValue}" />`);
jQuery('form').append(`<input type="hidden" id="utmMedium" name="UTM Medium" value="${utmMediumValue}" />`);
jQuery('form').append(`<input type="hidden" id="utmCampaign" name="UTM Campaign" value="${utmCampaignValue}" />`);
jQuery('form').append(`<input type="hidden" id="utmTerm" name="UTM Term" value="${utmTermValue}" />`);
jQuery('form').append(`<input type="hidden" id="utmContent" name="UTM Content" value="${utmContentValue}" />`);
jQuery('form').append(`<input type="hidden" id="gclid" name="Gclid" value="${gclidValue}" />`);
jQuery('form').append(`<input type="hidden" id="fbclid" name="Fbclid" value="${fbclidValue}" />`);
jQuery('form').append(`<input type="hidden" id="campaignId" name="Campaign ID" value="${campaignIdValue}" />`);
jQuery('form').append(`<input type="hidden" id="adGroupId" name="Ad Group ID" value="${adGroupIdValue}" />`);
jQuery('form').append(`<input type="hidden" id="creative" name="Creative" value="${creativeValue}" />`);
jQuery('form').append(`<input type="hidden" id="matchType" name="Match Type" value="${matchTypeValue}" />`);
jQuery('form').append(`<input type="hidden" id="network" name="Network" value="${networkValue}" />`);
jQuery('form').append(`<input type="hidden" id="device" name="Device" value="${deviceValue}" />`);
jQuery('form').append(`<input type="hidden" id="keyword" name="Keyword" value="${keywordValue}" />`);

Copy Code

Store form values as first-party cookies for GTM

An event listener is added to form elements with the "gtm" attribute. Whenever a change event occurs, the script captures the attribute value ("gtm") and the corresponding input value. It then sets a cookie with the "gtm" attribute value as the name and the input value as the value.

⚠️ You must add a custom attribute named "gtm" to each input you want stored. The value should exactly match the name of your cookie in GTM (case-sensitive).

jQuery

// Get the base website URL
var baseUrl = document.location.hostname;

// Function to convert phone numbers to E.164 format
function toE164(phoneNumber) {
  // Remove everything except digits
  var digits = phoneNumber.replace(/\D/g, "");
  // If it has 10 digits, assume it's a US number and add +1
  if (digits.length === 10) {
    return "+1" + digits;
  }
  // If it already includes country code (like 11 digits starting with 1)
  else if (digits.length === 11 && digits.startsWith("1")) {
    return "+" + digits;
  }
  // Otherwise, return as-is
  return phoneNumber;
}

// Event listener for changes in form elements with "gtm" attribute
$("form [gtm]").on("change", function() {
  var input = $(this);
  var name = input.attr("gtm"); // Get the "gtm" attribute value for naming the cookie
  var value = input.val();

  // If the input is a tel type, convert the phone number to E.164 format
  if (input.attr("type") === "tel") {
    value = toE164(value);
  }

  if (input.attr("type") === "checkbox") {
    var checkboxes = $("form [gtm='" + name + "']:checked");
    var values = checkboxes.map(function() {
      return this.value;
    }).get().join(",");
    document.cookie = name + "=" + values + "; path=/; domain=" + baseUrl;
  } else if (input.attr("type") === "radio") {
    var radioButtons = $("form [gtm='" + name + "']");
    radioButtons.each(function() {
      if ($(this).prop("checked")) {
        document.cookie = name + "=" + $(this).val() + "; path=/; domain=" + baseUrl;
      }
    });
  } else {
    document.cookie = name + "=" + value + "; path=/; domain=" + baseUrl;
  }
});

Copy Code