⚙️ 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

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

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;

// 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 (input.attr("type") === "checkbox") {
    // Get all checked checkboxes with the same "gtm" attribute value
    var checkboxes = $("form [gtm='" + name + "']:checked");
    // Map the values of the checked checkboxes
    var values = checkboxes.map(function() {
      return this.value;
    }).get().join(",");
    // Set the cookie with the "gtm" attribute value as the name and the mapped values as the value
    document.cookie = name + "=" + values + "; path=/; domain=" + baseUrl;
  } else if (input.attr("type") === "radio") {
    // Get all radio inputs with the same "gtm" attribute value
    var radioButtons = $("form [gtm='" + name + "']");
    radioButtons.each(function() {
      if ($(this).prop("checked")) {
        // Set the cookie with the "gtm" attribute value as the name and the value of the selected radio as the value
        document.cookie = name + "=" + $(this).val() + "; path=/; domain=" + baseUrl;
      }
    });
  } else {
    // For other inputs, set the cookie with the "gtm" attribute value as the name and the input value as the value
    document.cookie = name + "=" + value + "; path=/; domain=" + baseUrl;
  }
});

Copy Code