Code Snippets for
Your Webflow!

A community repo with code crumbs to give your websites that extra bit of functionality! 😉
Start Searching
/
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Recent Code Crumbs

Swap All Values on Click

One click trigger to change & swap text, urls, attributes, display properties and more.

Style & Replace Matching Strings

Find all text that matches a string value, wrap them in a span element to style and/or replace the string value.

Floating Form Labels

With this crumb we can simply create what is commonly known as floating form labels. A UI effect that allows you to display form labels as placeholders initially and animate them to typical labels.

Clip Path - Slanted Edges

Shape the edge of your sections, buttons or other elements to give them more character with some CSS using the clip-path property.

Datepicker

Add a custom date picker to your form for consistent date input. No more manually typing it in for your visitors. Customize the look to match your design.

Custom Javascript Accordion

Smooth accordion that automatically closes an accordion item when a new one is selected. All elements are handled directly in Webflow.

<!-- SNIPPET NAME HERE -->
<style>
/* clip elements to specific shapes */
/* provide 4 values for each side in the order: top, right, bottom, left to create the polygon */
/* the calc() property is used to make calculations based on viewport  */
.cp-1{
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%); /* webkit browsers */
}

.cp-2{
	clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%); /* webkit browsers */
}

.cp-3{
	clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 90%); /* webkit browsers */
}

.cp-4{
	clip-path: polygon(0 0, 100% 0, 100% 90%, 25% 80%, 50% 100%, 5% 80%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 80%, 50% 100%, 25% 80%, 0 90%); /* webkit browsers */
}

.cp-btn {
	clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); /* webkit browsers */
}

.cp-btn:hover {
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); /* webkit browsers */
}
</style>
Preview Code Snippet. Get all the crumbs now!

Clip Path - Slanted Edges

Shape the edge of your sections, buttons or other elements to give them more character with some CSS using the clip-path property.

Author
N/A
Published
Jun 24, 2022
Demo
See Demo
No Demo
Get all the Crumbs
<!-- SWAP VALUES ON CLICK --> 
<script>
function setupSwitcher({
  /* Click Trigger Class */
  swapTrigger = "switcher",

  /* Essentials */
  swapText = "swap-text",
  swapDisplay = "swap-display",
  swapClass = "swap-class",
  swapUrl = "swap-url",

  /* Toggle and Add Attributes */
  swapToggleAttribute = "swap-toggle-attribute",
  swapAddAttribute = "swap-add-attribute",
  swapAddAttributeValue = "swap-add-attribute-value",

  /* Replace Attribute Value */
  swapAttributeTarget = "swap-attribute-target",
  swapTargetValue = "swap-target-value"

} = {}) {
  const swapAll = () => {
    // SWAP TEXT
    document.querySelectorAll(`[${swapText}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapText);
      const currentValue = swapDomElement.innerText;

      swapDomElement.innerText = nextValue;
      swapDomElement.setAttribute(swapText, currentValue);
    });

    // SWAP DISPLAY
    document.querySelectorAll(`[${swapDisplay}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapDisplay);
      const currentValue = swapDomElement.style.display;

      swapDomElement.style.display = nextValue;
      swapDomElement.setAttribute(swapDisplay, currentValue);
    });

    // SWAP CLASS
    document.querySelectorAll(`[${swapClass}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapClass);
      swapDomElement.classList.toggle(nextValue);
    });

    // SWAP URL
    document.querySelectorAll(`[${swapUrl}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapUrl);
      const currentValue = swapDomElement.href;

      swapDomElement.href = nextValue;
      swapDomElement.setAttribute(swapUrl, currentValue);
    });

    // TOGGLE ATTRIBUTE
    document.querySelectorAll(`[${swapToggleAttribute}]`).forEach((swapDomElement) => {
      const toggleAttribute = swapDomElement.getAttribute(
        swapToggleAttribute
      );
      swapDomElement.toggleAttribute(toggleAttribute);
    });

    // ADD ATTRIBUTE
    document.querySelectorAll(`[${swapAddAttribute}]`).forEach((swapDomElement) => {
      const newAttribute = swapDomElement.getAttribute(swapAddAttribute);
      const newAttributeValue = swapDomElement.getAttribute(
        swapAddAttributeValue
      );

      if (swapDomElement.hasAttribute(newAttribute)) {
        swapDomElement.removeAttribute(newAttribute);
      } else {
        swapDomElement.setAttribute(newAttribute, newAttributeValue);
      }
    });

    // REPLACE ATTRIBUTE VALUE
    document.querySelectorAll(`[${swapAttributeTarget}]`).forEach((swapDomElement) => {
      const attributeTarget = swapDomElement.getAttribute(
        swapAttributeTarget
      );
      let attributeValue = swapDomElement.getAttribute(attributeTarget);
      let newValue = swapDomElement.getAttribute(swapTargetValue);

      swapDomElement.setAttribute(attributeTarget, newValue);
      swapDomElement.setAttribute(swapTargetValue, attributeValue);
    });
  };

  document.querySelectorAll(`.${swapTrigger}`).forEach((switcherDomElement) => {
    switcherDomElement.addEventListener("click", swapAll);
  });
}

setupSwitcher();
</script>
Preview Code Snippet. Get all the crumbs now!

Swap All Values on Click

One click trigger to change & swap text, urls, attributes, display properties and more.

Author
CodeCrumbs
Published
Jun 24, 2022
Demo
See Demo
No Demo
Get all the Crumbs
<!-- APPLE FROST BLUR --> 
<style>
.frost-blur {
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
</style>
Preview Code Snippet. Get all the crumbs now!

Apple Frost Blur

This simple CSS snippet will apply a background frosted blur effect like Apple is known for.

Author
N/A
Published
Jun 17, 2022
Demo
See Demo
No Demo
Get all the Crumbs
// this is the url format for each button link that when clicked navigates to the tabs page
/page-name?tab=tab-name-here
<!-- OPEN SPECIFIC TABS -->
<script>
// get the webflow array or define a new one if none exists
var Webflow = Webflow || [];
// push the click tabs handler function into the webflow array
Webflow.push(function () {
  // get the respective tab name using the getParam function and store it in a tabName variable
  var tabName = getParam('tab');
  // terminate the function if no tab name was found
  if (!tabName) return;

  // click on the tab
  $('.' + tabName).triggerHandler('click');

  // define the getParam function
  function getParam(name) {
    // replace any '[' in the tab name with '\['
    // & also replace any ']' in the tab name with '\]'
    // this escapes the symbols '[' & ']' so they can be used in regex
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    // define a regex to search for the tab name
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      // search for the tab name in the query string part of the page's url
      results = regex.exec(location.search);
    // return the tab name OR "" if no tab name found
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
});
</script>
Preview Code Snippet. Get all the crumbs now!

Open Specific Tabs from other Pages

Link to and open a specific tab from any other page on your website with Webflow's native tabs element.

Author
N/A
Published
Jun 17, 2022
Demo
See Demo
No Demo
Get all the Crumbs

Datepicker

Add a custom date picker to your form for consistent date input. No more manually typing it in for your visitors. Customize the look to match your design.

</ head> Code
<!-- DATE PICKER STYLES -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<style>
:root {
	/* Color Settings */
  --accent-color: #7262e6;							/* Controls BG Color for Selected Date */
  --secondary-accent-color: #9287e2;		/* Controls Text Color for Current Date */
	--main-bg-color: #1f2023;							/* Controls BG Color of the Calendar */
  --secondary-bg-color: #27292d;				/* Controls BG for Calendar Dates */
  --heading-color: #ffffff;							/* Controls Main Heading Color */
  --font-color: #c1c9d2;								/* Controls Main Font Color */
  --accent-top-text-color: #ffffff;			/* Controls Font Color on top of Accent Color */
  --disabled-font-color: #999999;				/* Controls Disabled Font Color */
  --shadow-color: 0 5px 15px -5px rgba(0,0,0,.5);
  
  /* Size & Spacing Settings */
  --border-radius: 4px;									/* Controls Large Border Radius (Calendar Itself) */
  --border-radius-sm: 2px;							/* Controls Small Border Radius (Calendar Dates) */
  --font-size: 16px;										/* Controls Font Size */
  --table-gap: 2px;											/* High number is not recommended */
  
  /* Arrow Icons */
  --left-arrow: url('https://assets-global.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
  --right-arrow: url('https://assets-global.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dbca268421b03c01abf6_chevron-right.svg');   
  --arrow-bg-color: transparent;
}



/* Picker Element Itself */
.pika-single {
  color: var(--heading-color);
  background: var(--main-bg-color);
  border: none !important;
  border-bottom-color: none !important;
  border-radius: var(--border-radius);
  font-family: inherit !important;
}

/* Datepicker Shadow */
.pika-single.is-bound {
  box-shadow: var(--shadow-color) !important;
}

/* Month & Year Displayed in Middle */
.pika-label {
  color: var(--heading-color);
  background-color: transparent !important;
}

.pika-prev, .is-rtl .pika-next {
	background-image: var(--left-arrow);
}
.pika-next, .is-rtl .pika-prev {
  background-image: var(--right-arrow);
}

/* This is the table element which includes the days labels and the days in the month */
.pika-table {
	border-spacing: var(--table-gap) !important;
  border-collapse: separate;
  font-size: var(--font-size) !important;
}

/* Days of the Week Labels */
.pika-table th {
  color: var(--font-color);
  text-align: center;
}

/* Days of the Week Underline - Example = underline dotted */
abbr[title] {
  text-decoration: none !important;
  cursor: default !important;
}

/* Month Days on Calendar - Default State */
.pika-button {
  color: var(--font-color);
  background: var(--secondary-bg-color);
  border-radius: var(--border-radius-sm);
  text-align: center;
  font-size: 12px !important;
}

/* Week Label */
.pika-week {
  color: var(--font-color);
}

/* Current Day Text/Number Color */
.is-today .pika-button {
  color: var(--secondary-accent-color) !important;
}

/* The Selected Date/Day */
.is-selected .pika-button {
  color: var(--accent-top-text-color) !Important;
  background: var(--accent-color);
  box-shadow: none !important;
}

/* Styles for any Disabled Dates/Days  */
.is-disabled .pika-button {
  color: var(--disabled-font-color);
  opacity: .3;
  background: transparent !important;
}

/* Styles for Date/Day Hover (can be same styles as "selected" styles) */
.pika-button:hover {
  color: var(--accent-top-text-color) !important;
  background: var(--accent-color) !important;
  border-radius: var(--border-radius-sm) !important;
}

/* Next & Prev Arrow Buttons */
.pika-prev, .pika-next {
	display: block;
	cursor: pointer;
	position: relative;
	outline: none;
	border: 0;
	padding: 0;
	width: 20px;
	height: 30px;
	text-indent: 20px;
	white-space: nowrap;
	overflow: hidden;
	background-color: var(--arrow-bg-color) !important;
	opacity: .5;
}
</style>
</ body> Code
<!-- DATE PICKER JS --> 
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<!-- FOR 'SINGLE' DATE PICKER ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
var picker = new Pikaday({ 
	field: document.getElementById('datepicker'),
	disableWeekends: true, // Disables option to select weekend days
	firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
	minDate: new Date(), // Disables option to select days prior to current day
  //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>





<!-- FOR 'MULTIPLE' DATE PICKERS ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
$('.date-picker').each(function() {  // ".date-picker" is the class name you would set on each field that needs a date picker.
    $(this).data('pikaday', new Pikaday({ 
      field: $(this)[0],
      disableWeekends: true, // Disables option to select weekend days
      firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
      minDate: new Date(), // Disables option to select days prior to current day
      //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
    }));
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>
Author
David Bushell & Ramiro Rikkert
Published
Jun 13, 2022

How to use:

Scroll To Top

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

<!--Delay Page Transition-->
<script>
 $('classOrIdNameHere').click(function (e){
   e.preventDefault(); var goTo = this.getAttribute("href");
     setTimeout(function() {
       window.location = goTo;
     }, 1000);
 });
</script>

Author
Unknown
Published
Oct 13 2019

How to use:

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Things to keep in mind:

  1. This is a numbered list item.
  2. This is a numbered list item.
  3. This is a numbered list item.
  4. This is a numbered list item.

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

<!--Delay Page Transition-->
<script>
 $('classOrIdNameHere').click(function (e){
   e.preventDefault(); var goTo = this.getAttribute("href");
     setTimeout(function() {
       window.location = goTo;
     }, 1000);
 });
</script>

Author
Unknown
Published
Oct 13 2019
Text Link

<!--Delay Page Transition-->
<script>
 $('classOrIdNameHere').click(function (e){
   e.preventDefault(); var goTo = this.getAttribute("href");
     setTimeout(function() {
       window.location = goTo;
     }, 1000);
 });
</script>

Author
Unknown
Published
Oct 13 2019

<!--Delay Page Transition-->
<script>
 $('classOrIdNameHere').click(function (e){
   e.preventDefault(); var goTo = this.getAttribute("href");
     setTimeout(function() {
       window.location = goTo;
     }, 1000);
 });
</script>

Author
Unknown
Published
Oct 13 2019
Text Link

<!--Delay Page Transition-->
<script>
 $('classOrIdNameHere').click(function (e){
   e.preventDefault(); var goTo = this.getAttribute("href");
     setTimeout(function() {
       window.location = goTo;
     }, 1000);
 });
</script>

Author
Unknown
Published
Oct 13 2019

<!--Delay Page Transition-->
<script>
 $('classOrIdNameHere').click(function (e){
   e.preventDefault(); var goTo = this.getAttribute("href");
     setTimeout(function() {
       window.location = goTo;
     }, 1000);
 });
</script>

Author
Unknown
Published
Oct 13 2019

Written Code for your Projects!

Pre-written snippets of code for you to quickly copy & paste into your projects. Tutorials for each snippet are also available to make things easier and understandable.

Javascript
CSS 3
HTML 5
<!-- Ready to use Code Crumbs! --> 
<script>
	Webflow.onReady.then(function(member) {
   if (member.loggedIn && member.membership.id === 'yourMemberId') {    // Replace 'yourMemberId' with your membership ID
      window.location.href = "/upgrade"                                 // Replace "/upgrade" with your own page slug
   }
	})
</script>
Preview Code Block

Awesome Contributors

CodeCrumbs would not exist without these awesome contributions from some amazing people. They too believe in helping others achieve more with their designs and projects in Webflow.

Meet the Contributors

Helpful Resources

Diamond Tee

Now you can rep & show your support for the CodeCrumbs family & team with our new merch.

Now Available!
Order Today
Text Link
Built by
Built with
Note: Currently updating the library & tutorials for official launch.
CodeCrumbs - Code snippets for your Webflow! | Product Hunt Embed