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
Ticker

Create a smooth continuous slider for all kinds of content such as testimonials, logos, and more. Use simple attributes to control the settings of each ticker.

New
Updated
Deprecated
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.

New
Updated
Deprecated
Dynamic Copyright Year

This short Javascript code crumb will allow you to dynamically set the current year for your © copyright year in your footer automatically.

New
Updated
Deprecated
Reveal Submit Button When Email is Validated

This awesome code crumb will hide the submit button on any form until the email is validated in the email input field. Adds a really nice visual experience.

New
Updated
Deprecated
Disable Form Submit with the "Enter" Key

Simple code to stop or prevent the enter or return key from submitting a form.

New
Updated
Deprecated
Cookie Notice

Cookie consent notice for your website visitors by Osano. Super easy to use & looks nice too.

New
Updated
Deprecated
<!-- CODECRUMBS TICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/ticker@0.1.5/index.min.js"></script>
<script>
  window.CodeCrumbs.Ticker({
    tickerSelector: ".cc-ticker"
  })
</script>
Preview Code Snippet. Get all the crumbs now!

Ticker

Create a smooth continuous slider for all kinds of content such as testimonials, logos, and more. Use simple attributes to control the settings of each ticker.

Author
Noah Raskin
Published
May 9, 2024
Demo
See Demo
No Demo
Get all the Crumbs
<!-- Dynamic Copyright Year -->
<script>
  // For using a class to select multiple elements
  const yearElems = document.querySelectorAll(".year")

  yearElems.forEach((yearElem) => {
    yearElem.innerText = new Date().getFullYear()
  })
</script>
Preview Code Snippet. Get all the crumbs now!

Dynamic Copyright Year

This short Javascript code crumb will allow you to dynamically set the current year for your © copyright year in your footer automatically.

Author
Noah Raskin
Published
May 8, 2024
Demo
See Demo
No Demo
Get all the Crumbs
<!-- 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
May 8, 2024
Demo
See Demo
No Demo
Get all the Crumbs
<!-- RESET WEBFLOW FORM AFTER SUBMIT --> 
<script>
  // when the DOM is ready
  $(function() {
    /*** START SCRIPT CONFIG ***/

    // Replace with value for your form. ie. "#your-form-id" or ".your-form-class"
    var FORM_SELECTOR = ".your-class";

    // Do you want to hide the success message after the form is submitted?
    var HIDE_SUCCESS_MESSAGE = false;

    // Do you want the success message to show above the form?
    var SUCCESS_MESSAGE_ABOVE_FORM = true;

    /*** END SCRIPT CONFIG ***/

    // define the resetCustomElement function
    var resetCustomElement = function(customElement) {
      // get the input element
      var inputElement = customElement.nextSibling;
      // if it's checked
      if (inputElement.checked) {
        // add the class "w--redirected-checked"
        customElement.classList.add("w--redirected-checked");
      } else {  // if not checked
        // remove the class "w--redirected-checked"
        customElement.classList.remove("w--redirected-checked");
      }
    };

    // define the resetForm function
    var resetForm = function(form, successDiv) {
      // Reset the inputs in the form
      form.reset();

      // Reset custom checkboxes
      document.querySelectorAll(".w-checkbox-input--inputType-custom").forEach(resetCustomElement);

      // Reset custom radio buttons
      document.querySelectorAll(".w-form-formradioinput--inputType-custom").forEach(resetCustomElement);

      // Show the form
      form.style.display = "block";

      // Hide Success Message
      if (HIDE_SUCCESS_MESSAGE) {
        successDiv.style.display = "none";
      }
    };

    // get the form
    var form = document.querySelector(FORM_SELECTOR);
    // get the successdiv
    var successDiv = form.nextSibling;

    // If we are not hiding the success message AND we want the message above the form
    if (!HIDE_SUCCESS_MESSAGE && SUCCESS_MESSAGE_ABOVE_FORM) {
      // Move the form last so that the success message appears before it
      form.parentElement.appendChild(form);
    }

    // Create an observer to run our resetForm function when Webflow hides our form after submission
    var observer = new MutationObserver(function(mutations) {
      // if the form's display is set to none
      if (form.style.display === "none") {
        // call the resetForm function
        resetForm(form, successDiv);
      }
    });

    // Listen for when the style attribute of our form changes
    observer.observe(form, { attributes: true, attributeFilter: ["style"] });
  });
</script>
Preview Code Snippet. Get all the crumbs now!

Reset Webflow Form

This code will reset your Webflow form after submit without hiding the form and still showing your success message. This is great for multiple submissions for different use cases.

Author
Chris Spags
Published
May 8, 2024
Demo
See Demo
No Demo
Get all the Crumbs

Date Picker

A beautiful themeable date picker / calendar with plenty of useful options. Supports several languages, date ranges and much more.

</ head> Code
</ body> Code
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@latest/index.min.js"></script>
<script>
  window.CodeCrumbs.DatePicker({
    dateFieldSelector: '.date-field-class',
    format: 'M S y',
  })
</script>
Author
Felice Gattuso
Published
May 8, 2024

How to use:

Date Picker Options:

Option Type Default Descrption
dateFieldSelector string -- class, id, or html tag
language string 'en' Read Documentation
isExpandable boolean true open/close full size picker
onlyShowAsExpanded boolean true full size picker only
format string 'd-m-y' Read Documentation
doubleView boolean false show two months at a time
disabledWeekDays string -- Read Documentation
minDate string -- Read Documentation
maxDate string -- Read Documentation
minYear string -- Read Documentation
maxYear string -- Read Documentation
startWeekOnMonday boolean false instead of Sunday
dateRange boolean false Read Documentation
minRange number -- Read Documentation
maxRange number -- Read Documentation
setDateForThisSelector string -- Read Documentation
showArrowsOnHover boolean true instead of always
overlay boolean false Show bg overlay when open
onChange callback () -- Read Documentation
onRangeSet callback () -- Read Documentation
onDatePickerOpen callback () -- Read Documentation
onDatePickerExit callback () -- Read Documentation
styles { object } -- Read Documentation


language Documentation:

Below is a list of languages. Copy the script for language you wish to use and place it underneath the Date Picker script (above the Date Picker function). Next, copy the abbreviated "value" from the second column and use that as the value for the language option in the Date Picker function.

Example:
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-ES.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
  language: 'es'
})
</script>
Language Value Script
Arabic 'ar'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-AR.min.js"></script>
          
Danish 'da'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-DA.min.js"></script>
          
German 'de'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-DE.min.js"></script>
          
Spanish 'es'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-ES.min.js"></script>
          
French 'fr'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-FR.min.js"></script>
          
Greek 'gr'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-GR.min.js"></script>
          
Hungarian 'hu'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-HU.min.js"></script>
          
Italian 'it'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-IT.min.js"></script>
          
Korean 'ko'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-KO.min.js"></script>
          
Dutch 'nl'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-NL.min.js"></script>
          
Polish 'pl'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-PL.min.js"></script>
          
Portuguese 'pt'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-PT.min.js"></script>
          
Russian 'ru'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-RU.min.js"></script>
          
Slovenian 'si'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-SI.min.js"></script>
          
Turkish 'tr'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-TR.min.js"></script>
          
Ukrainian 'uk'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-UK.min.js"></script>
          


format Documentation:

Below you will see values for various formatting options. The value is a string which means we can combine them any way we'd like. You can use /, - or , as an example in between the format values to display the date however you'd like.

Example: "WW the S" would display as "Monday the 5th." Play around with it!

Value Description
'y' four digit year value, e.g. 2019
'MM' full name of the month, e.g. January
'M' short name of the month, e.g. Jan
'WW' full name of the weekday, e.g. Monday
'W' short name of the weekday, e.g. Mon
'w' weekday number, as per getDay() javascript function, e.g. 1
'mm' month in numbers with leading zero, e.g. 01
'm' month in numbers without leading zero, e.g. 1
'dd' weekday in numbers with leading zero, e.g. 01
'd' weekday in numbers without leading zero, e.g. 1
'S' weekday in numbers with a suffix ending, e.g. 1st


disabledWeekDays Documentation:

If you'd like certain days of the week to not be selectable, then you can use the disabledWeekDays option. This option takes a 'string' as a value with the options listen below. You can combine these values in a string by using a comma to separate the values. For example: '0, 6' would disable Saturdays and Sundays from being selected.

Day Value
Sunday '0'
Monday '1'
Tuesday '2'
Wednesday '3'
Thursday '4'
Friday '5'
Saturday '6'


minDate and maxDate Documentation:

Use the minDate and the maxDate options if you want to make the dates selectable from or until the defined date. Dates must be provided in the standard format yyyy/mm/dd (e.g. '2019/03/28').

Example:
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
  minDate: '2019/01/01',
  maxDate: '2024/01/01',
})
</script>
Option Type
minDate string
maxDate string


minYear and maxYear Documentation:

Use the minYear and the maxYear options to set the maximum and minimum selectable year. The selected year must be provided in the format yyyy (e.g. '2019').

Example:
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
  minYear: '2019',
  maxYear: '2024',
})
</script>
Option Type Default
minYear number currentYear - 50
maxYear number currentYear + 50


dateRange Documentation:

The range option can be set up on one or two elements. When enabled, this option allows the user to select a start and an end date from the same date picker. In case of two inputs, it will automatically fill the start date on the first input and the end date on the last.

Option Type Default
dateRange boolean false


minRange and maxRange Documentation:

If set, these limit the range selection based on the value given when user starts selecting a range date. The value indicates the number of days selectable. Of course, it works only when the range option has been set as true.

Option Type
minRange number
maxRange number


setDateForThisSelector Documentation:

You can use setDateForThisSelector to set the selected date value as another input fields value. This might be useful if you want to trigger the Date Picker with a button instead of an input field for example. Then you can set a hidden input fields value with the date that has been selected. This option takes a string with the value being a class, id, attribute or html tag.

Option Type
setDateForThisSelector string


Event Callback Documentation:

We have 4 events we can listen for, which are the parameters listed below. They each take a callback function as their value. You can use the res argument to access the selected date output.

In the example below, you can see we are using the date output to show the user a message with the date that they have selected. You will also notice that we are using the format we want after res.output to display the date how we'd like.

Example:
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
  onChange: (res) => {
  	console.log(`You have selected ${res.output.mm} / ${res.output.dd} / ${res.output.y}`);
  }
})
</script>
Option Type arguments
onChange callback () res
onRangeSet callback () res
onDatePickerOpen callback () res
onDatePickerExit callback () res


styles Documentation:

The styles option takes an object as its value. Inside that object we have several style options we can use as shown in the table below, and you can choose to use only the ones you want. The style options take a 'string' as a value. That string can be any CSS value. For example, you can see that the default accentBackgroundColor is a gradient.

Example:
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
  styles: {
  	backgroundColor: '#FFFFFF',
		backgroundOverlay: 'rgba(0, 0, 0, .2)',
		primaryTextColor: '#333333',
		secondaryTextColor: '#FFFFFF',
		tertiaryTextColor: '#FD4741',
		accentBackgroundColor: 'linear-gradient(45deg, #e61e68 0%, #FD4741 100%)',
		borderRadius: '.35em',
		dropShadow: '0 0 2.5em rgba(0, 0, 0, 0.1)',
		dateRangeBackgroundColor: 'rgba(0, 0, 0, 0.05)',
  }
})
</script>
Option Type default description
backgroundColor string '#ffffff' general background color
backgroundOverlay string 'rgba(0, 0, 0, .2)' bacground overlay color
primaryTextColor string '#333333' main text color on background
secondaryTextColor string '#ffffff' text color on top of accent
tertiaryTextColor string '#fd4741' accent text color
accentBackgroundColor string 'linear-gradient(45deg, #e61e68 0%, #FD4741 100%)' accent background color
borderRadius string '.35em' the border radius size
dropShadow string '0 0 2.5em rgba(0, 0, 0, 0.1)' Date Picker drop shadow
dateRangeBackgroundColor string 'rgba(0, 0, 0, 0.05)' background color between date ranges

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>
	window.CodeCrumbs.CoolSnippet({
    selector: ".selector-name",
    activeClass: "active",
    callback: (res) => {
    	console.log(`Cool new snippets for ${res.output.type}!`)
    }
	})
</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