Code Snippets for
Your Webflow!

A community repo with code crumbs to give your websites that extra bit of functionality! 😉
Start Searching
Recent Code Crumbs

Math Captcha for Forms

Prevent spam with this awesome code snippet that validates the submission by answering a simple math problem.

Apple Frost Blur

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

Disable Form Submit with the "Enter" Key

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

Custom Selection & Highlight Color

With this snippet you can change the selection / highlight colors that you see when selecting a bit of text for example.

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.

Dynamic Weekday

This snippet will generate the text dynamically for the correct weekday where ever you want in your project.

<!-- MATH CAPTCHA --> 
<script>
// Contact Form Captcha
  (function($) {
      "use strict";

      $.fn.captcha = function(param) {

          // DEFAULT VARIABLES
          var params = $.extend({
              idCaptchaText: 'captchaText',   // The ID for the captcha text which is the label as the math question. Default is 'captchaText'.
              idCaptchaInput: 'captchaField', // The ID for the captcha input. Default is 'captchaInput'.
              class: ''                       // Class name for the submit button toggle. Default is ''.
          }, param);

          // Find and disable the submit button
          var submit = $(this).find('input[type=submit]');
          submit.attr('disabled', 'disabled');

          // Insert captcha text and input before the submit button with the given ID's
          $('');
          $('');   

          // Select text and input elements to fill
          var label = this.find('#' + params.idCaptchaText);
          var input = this.find('#' + params.idCaptchaInput);

          // Generate random numbers and the sum of them
          var rndmNr1 = Math.floor(Math.random() * 10),
              rndmNr2 = Math.floor(Math.random() * 10),
              totalNr = rndmNr1 + rndmNr2;

          // Print the numbers to screen
					//$(label).text(rndmNr1 + ' + ' + rndmNr2 + ' =');
          $(input).attr("placeholder", rndmNr1 + ' + ' + rndmNr2 + ' =');

          // Check the input value, enable it if the sum is correct
          $(input).keyup(function () {
              if ($(this).val() == totalNr)
                  submit.removeAttr('disabled').addClass(params.class);
              else
                  submit.attr('disabled', 'disabled').removeClass(params.class);
          });

          // Don't breake jQuery chain!
          return this;
      }
  })(jQuery);
  
  

	//Run the Code
  $(document).ready(function () {
    $('.form-class-name').captcha();
  });
</script>
Preview Code Snippet. Get all the crumbs now!

Math Captcha for Forms

Prevent spam with this awesome code snippet that validates the submission by answering a simple math problem.

Author
N/A
Published
May 26, 2020
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
May 22, 2020
Demo
See Demo
No Demo
Get all the Crumbs
<!-- DISABLE SUBMIT WITH ENTER KEY --> 
<script>
$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});
</script>
Preview Code Snippet. Get all the crumbs now!

Disable Form Submit with the "Enter" Key

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

Author
N/A
Published
May 22, 2020
Demo
See Demo
No Demo
Get all the Crumbs
<!-- RESET WEBFLOW FORM AFTER SUBMIT --> 
<script>
$(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 ***/

  var resetCustomElement = function(customElement) {
    var inputElement = customElement.nextSibling;
    if (inputElement.checked) {
      customElement.classList.add("w--redirected-checked");
    } else {
      customElement.classList.remove("w--redirected-checked");
    }
  };

  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";
    }
  };

  var form = document.querySelector(FORM_SELECTOR);
  var successDiv = form.nextSibling;
  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 (form.style.display === "none") {
      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 21, 2020
Demo
See Demo
No Demo
Get all the Crumbs

HTML Tables

Here is an HTML table you can use in your Rich Text Elements or E-Commerce websites for products or simply to show data since Webflow doesn't natively support it yet.

</ head> Code
</ body> Code
Author
Noah Raskin
Published
May 21, 2020

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