Forms
Here are some tools, resources and recommendations you may find useful for your next or any future projects. Will continue to grow 😉
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>
HTML/Embed Code
Quick Grab
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
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.
</ head> Code
<!-- FLOATING FORM LABEL STYLES -->
<style>
.input-label {
pointer-events: none;
}
.input::placeholder {
opacity: 0;
transition: opacity .2s ease-out;
}
.input:focus::placeholder {
opacity: 1;
}
</style>
</ body> Code
<!-- FLOATING FORM LABELS -->
<script defer src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/floating-form-labels@0.1.1/index.min.js"></script>
<script>
window.CodeCrumbs.FloatLabels({
inputSelector: ".input",
labelActiveClass: "float",
})
</script>
HTML/Embed Code
Quick Grab
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
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://cdn.prod.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
--right-arrow: url('https://cdn.prod.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>
HTML/Embed Code
Quick Grab
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Now you can add really nice custom buttons for your products quantity field. This is great so users don't have to type the amount anymore.
</ head> Code
<!-- CUSTOM QUANTITY BUTTONS -->
<style>
/* remove form styles & set margin at 0 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
</style>
</ body> Code
With Code Comments:
<!-- CUSTOM QUANTITY BUTTONS -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/quantity-buttons@v0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.QuantityButtons({
quantityGroupClass: 'q-group',
quantityIncrementButtonClass: 'q-inc',
quantityDecrementButtonClass: 'q-dec',
quantityNumberFieldClass: 'q-num',
disableDecrementAtOne: true,
})
</script>
HTML/Embed Code
Quick Grab
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Prevent spam with this awesome code snippet that validates the submission by answering a simple math problem.
</ head> Code
</ body> Code
<!-- MATH CAPTCHA -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/math-captcha@0.1.7/index.min.js"></script>
<script>
window.CodeCrumbs.MathCaptcha({
formClassSelector: ".contact-form",
captchaLabelSelector: ".math-label",
captchaInputSelector: ".math-field",
validTargetAttribute: "valid-captcha-class",
invalidTargetAttribute: "invalid-captcha-class",
removeClassesOnEmptyInput: true
})
</script>
HTML/Embed Code
Quick Grab
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Simple code to stop or prevent the enter or return key from submitting a form.
</ head> Code
</ body> Code
<!-- DISABLE SUBMIT WITH ENTER KEY -->
<script>
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
</script>
HTML/Embed Code
Quick Grab
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
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.
</ head> Code
</ body> Code
<!-- REVEAL SUBMIT BUTTON WHEN EMAIL IS VALIDATED -->
<script>
$(function(){
// Only show submit button on proper email
;( function( $, window, document, undefined ) {
'use strict';
var form = '.email-form',
className = 'email-active',
submit = 'input[type="submit"]',
email = 'input[type="email"]';
$( form ).each( function(){
var $form = $( this ),
$email = $form.find( email ),
$submit = $form.find( submit ),
val = '';
$email.on( 'keyup.addClassWhenEmail', function(){
val = $email.val();
$submit.toggleClass( className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( val ) );
});
});
})( jQuery, window, document );
})
</script>
HTML/Embed Code
Quick Grab
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This snippet allows you to customize the select field for your forms replacing the default select UI and UX for an arguably nicer one.
</ head> Code
<!-- Custom Select Field Styles -->
<style>
/************ ADD YOUR VALUES BELOW ************/
:root {
/* ----------- Colors ----------- */
--list-bg-color: white;
--list-text-color: inherit; /* Use "inherit" to take on parent text color */
--select-field-arrow-color: black; /* This is the select field arrow color */
--border-color-active: black; /* Active State */
--border-color-hover: #dcdcdd; /* Select Field could be the same as your form field border color */
--list-item-bg-color: #ededed; /* Select Field Hover/Focus State */
/* ----------- Spacing ----------- */
--select-field-padding-left: 12px; /* Match the padding values for your form fields */
--select-field-padding-right: 12px; /* Match the padding values for your form fields */
--list-padding-top-bottom: 10px; /* This is the top and bottom padding for the dropdown list */
--list-max-height: 150px; /* You can set this to "Auto" as well */
--list-item-padding-left: 18px;
--list-item-padding-right: 18px;
--list-item-min-height: 40px; /* This is the height of each list item in the dropdown */
--list-item-line-height: 40px; /* This is the height of each list item in the dropdown */
/* ^^^ Make sure both "line-height" and "min-height" are the same! ^^^ */
}
/************ END OF CUSTOM VALUES ************/
.nice-select {
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
clear: both;
padding-left: var(--select-field-padding-left);
padding-right: var(--select-field-padding-right);
position: relative;
text-align: left !important;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
}
.nice-select:hover {
border-color: var(--border-color-hover);
}
.nice-select:active, .nice-select.open, .nice-select:focus {
border-color: var(--border-color-active);
}
.nice-select:after {
border-bottom: 2px solid var(--select-field-arrow-color);
border-right: 2px solid var(--select-field-arrow-color);
content: '';
display: block;
height: 5px;
margin-top: -4px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
-webkit-transform-origin: 66% 66%;
-ms-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
width: 5px;
}
.nice-select.open:after {
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.nice-select.open .list {
opacity: 1;
pointer-events: auto;
-webkit-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
.nice-select.disabled {
border-color: #ededed;
color: #999;
pointer-events: none;
}
.nice-select.disabled:after {
border-color: #cccccc;
}
.nice-select.wide {
width: 100%;
}
.nice-select.wide .list {
left: 0 !important;
right: 0 !important;
}
.nice-select.right {
float: right;
}
.nice-select.right .list {
left: auto;
right: 0;
}
.nice-select.small {
font-size: 12px;
height: 36px;
line-height: 34px;
}
.nice-select.small:after {
height: 4px;
width: 4px;
}
.nice-select.small .option {
line-height: 34px;
min-height: 34px;
}
.nice-select .list {
background-color: var(--list-bg-color);
color: var(--list-text-color);
border-radius: 5px;
box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
border-color: 3px solid #ededed;
box-sizing: border-box;
margin-top: 4px;
opacity: 0;
overflow: hidden;
padding: var(--list-padding-top-bottom) 0px;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
overflow-y: scroll;
overflow-x: hidden;
max-height: var(--list-max-height);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: scale(0.75) translateY(-21px);
-ms-transform: scale(0.75) translateY(-21px);
transform: scale(0.75) translateY(-21px);
-webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
z-index: 9;
}
.nice-select .list:hover .option:not(:hover) {
background-color: transparent !important;
}
.nice-select .option {
cursor: pointer;
font-weight: 400;
line-height: var(--list-item-line-height);
list-style: none;
min-height: var(--list-item-min-height);
outline: none;
padding-left: var(--list-item-padding-left);
padding-right: var(--list-item-padding-right);
text-align: left;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nice-select .option:first-child {
display: none;
}
span.current {
color: var(--list-text-color);
}
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
background-color: var(--list-item-bg-color);
}
.nice-select .option.selected {
font-weight: bold;
}
.nice-select .option.disabled {
background-color: transparent;
color: #999;
cursor: default;
}
.no-csspointerevents .nice-select .list {
display: none;
}
.no-csspointerevents .nice-select.open .list {
display: block;
}
</style>
</ body> Code
<!-- CUSTOM SELECT FIELD -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
<script>
$(document).ready(function() {
$('select').niceSelect();
});
</script>
HTML/Embed Code
Quick Grab
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
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.
</ head> Code
<!-- Input Field Placeholder Animation -->
<style>
::placeholder {
transition: all 350ms ease;
}
.your-input-class:focus::placeholder {
transform: translate(20px, 0);
opacity: 0.0;
}
.your-textarea-class:focus::placeholder {
transform: translate(20px, 0);
opacity: 0.0;
}
</style>
</ body> Code
HTML/Embed Code
Quick Grab
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This small bit of CSS will remove those unwanted shadows that show up on Safari's default input field styles. This way your forms input fields can look the way you intended them to.
</ head> Code
<!--Removes iOS form styling-->
<style>
/* Set css appearance to none & border radius to 0 */
input, textarea {
-webkit-appearance: none; /* webkit browsers */
-moz-appearance: none; /* firefox browser */
appearance: none;
border-radius: 0;Â Â
}
</style>
</ body> Code
HTML/Embed Code
Quick Grab
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
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.
</ head> Code
</ body> Code
<!-- 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>
HTML/Embed Code
Quick Grab
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Know when new crumbs drop!
Never spam. Just honest updates about new snippets!