Code Snippets for
Your Webflow!
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.
Custom Select Field
This snippet allows you to customize the select field for your forms replacing the default select UI and UX for an arguably nicer one.
Browser Back Button
This short JQuery code crumb will allow you to add make any button (your dedicated back button) return the user to the previous page using the browser history.
Custom Placeholder Animation
This small snippet allows you to animate or add a transition to your placeholder text when an input field is focused. You can expand on the transition animations to whatever you'd like.
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
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>
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:
- This is a numbered list item.
- This is a numbered list item.
- This is a numbered list item.
- 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>
<!--Delay Page Transition-->
<script>
$('classOrIdNameHere').click(function (e){
e.preventDefault(); var goTo = this.getAttribute("href");
setTimeout(function() {
window.location = goTo;
}, 1000);
});
</script>
<!--Delay Page Transition-->
<script>
$('classOrIdNameHere').click(function (e){
e.preventDefault(); var goTo = this.getAttribute("href");
setTimeout(function() {
window.location = goTo;
}, 1000);
});
</script>
<!--Delay Page Transition-->
<script>
$('classOrIdNameHere').click(function (e){
e.preventDefault(); var goTo = this.getAttribute("href");
setTimeout(function() {
window.location = goTo;
}, 1000);
});
</script>
<!--Delay Page Transition-->
<script>
$('classOrIdNameHere').click(function (e){
e.preventDefault(); var goTo = this.getAttribute("href");
setTimeout(function() {
window.location = goTo;
}, 1000);
});
</script>
Awesome Contributors
CodeCrumbs would not exist without these awesome contributions from the amazing people. They too believe in helping others achieve more with their designs and projects in Webflow.
Helpful Resources
Want to contribute to the community?
