Input

Different versions of Webflow form input.

1. Default Input

   Name

   Thank you! Your submission has been received!

   Oops! Something went wrong while submitting the form.

   

2. Input with Icon

   Component

   Code

   Your Email

   Thank you! Your submission has been received!

   Oops! Something went wrong while submitting the form.

   

   <style>
   .form_input:focus ~ .form_input-icon {
   color: var(--body--color--foreground)
   }
   </style>

3. Password Input

   Component

   Code

   Password

   Thank you! Your submission has been received!

   Oops! Something went wrong while submitting the form.

   

   import { Thind } from "thind-js";
   const thind = new Thind({attribute : "thind"});
   //Show Password Inputs
   const showPasswordInputs = thind.element.getAll("showPassword");
   if (showPasswordInputs) {
     showPasswordInputs.forEach(showPasswordInput => {
       showPasswordInput.addEventListener("click", () => {
         const passwordInput = showPasswordInput.previousElementSibling;
         if (passwordInput.type === "password") {
           passwordInput.type = "text";
           showPasswordInput.classList.add("is-slash");
         } else {
           passwordInput.type = "password";
           showPasswordInput.classList.remove("is-slash");
         }
       });
     });
   }

4. OTP Input

   Component

   Code

   Enter OTP

   Thank you! Your submission has been received!

   Oops! Something went wrong while submitting the form.

   

   import { Thind, OTPInputHandler } from "thind-js";
   
   //Create a new constructor
   const thind = new Thind({attribute : "thind"});
   
   //Handle OTP Form
   const otpForm = thind.element.get("otpForm");
   thind.form.disable(otpForm);
   
   // New OTP Input constructor
   const otpInput = new OTPInputHandler(".otp-input");
   
   //Listen to events from otp input and take action on validation
   otpInput.onInputEvent((otpValue) => {
     //check if the otp is complete
     if (otpValue.length === 6) {
       console.log(otpValue);
     } 
   });
   
   
   

   Prerequisites

   Thind JS

5. Prefilled Input

   Component

   Code

   You Website

   https://

   Webflow Handle

   webflow.com/@

   Thank you! Your submission has been received!

   Oops! Something went wrong while submitting the form.

   

   <style>
      .form_input.is-prefill {
         padding-left: calc(var(--prefill-width) + 0.2rem);
       }
   </style>

   // Select all inputs with the is-prefill class
   const inputs = document.querySelectorAll('.form_input.is-prefill');
   
   inputs.forEach(input => {
     // Find the closest form_input-prefill element
     const prefill = input.closest('.form_input-relative').querySelector('.form_input-prefill');
   
     if (prefill) {
       // Calculate the width of the prefill element
       const prefillWidth = prefill.offsetWidth;
       
       // Set a CSS variable with the width of the prefill element
       input.style.setProperty('--prefill-width', `${prefillWidth}px`);
     }
   });

6. Input with Dropdown

   Phone Number

   US +1CA +1IN +91

   Thank you! Your submission has been received!

   Oops! Something went wrong while submitting the form.

   

7. Select Input

   Component

   Code

   Age Range

   Below 1818 to 2425 to 4546 or above

   Thank you! Your submission has been received!

   Oops! Something went wrong while submitting the form.

   

   <style>
   /* The container must be positioned relative: */
   .is-custom-select {
     position: relative;
   }
   
   .is-custom-select select {
     display: none; /*hide original SELECT element: */
   }
   
   .select-selected{
   width: 100%
   }
   
   /* Style the arrow inside the select element: */
   .select-selected:after {
     position: absolute;
     content: "";
     top: 45%;
     right: 10px;
     width: 0;
     height: 0;
     border: 6px solid transparent;
     border-color: var(--border--color--light) transparent transparent transparent;
   }
   
   /* Point the arrow upwards when the select box is open (active): */
   .select-selected.select-arrow-active:after {
     border-color: transparent transparent var(--border--color--light) transparent;
     top: 30%;
   }
   
   /* style the items (options), including the selected item: */
   .select-items div,.select-selected {
   		cursor: pointer;
       padding: 0.5rem 0.75rem;
       border-radius: 0.15rem;
       display: flex;
       flex-direction: column;
       justify-content: center;
       min-height: 3rem;
   }
   
   .select-items div{
       padding: 0.25rem 0.5rem;
       border-radius: 0.15rem;
       display: block;
       min-height: auto;
   }
       
   
   /* Style items (options): */
   .select-items {
   		display: flex;
   		gap: 2px;
   		flex-direction: column;
       position: absolute;
       background-color: var(--body--color--background);
       padding: 0.25rem;
       border: 1px solid var(--border--color--light);
       border-radius: 0.5rem;
       margin-top: 0.25rem;
       left: 0;
       right: 0;
       z-index: 99;
   }
   
   /* Hide the items when the select box is closed: */
   .select-hide {
     display: none;
   }
   
   .select-items div:hover, .same-as-selected {
     background-color: var(--border--color--light);
   }
   
   .same-as-selected {
    background-color: var(--border--color--light);
   }
   </style>

   //Custom select 
   var x, i, j, l, ll, selElmnt, a, b, c;
   /*look for any elements with the class "custom-select":*/
   x = document.getElementsByClassName("is-custom-select");
   l = x.length;
   for (i = 0; i < l; i++) {
     selElmnt = x[i].getElementsByTagName("select")[0];
     ll = selElmnt.length;
     /*for each element, create a new DIV that will act as the selected item:*/
     a = document.createElement("DIV");
     a.setAttribute("class", "select-selected");
     a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
     x[i].appendChild(a);
     /*for each element, create a new DIV that will contain the option list:*/
     b = document.createElement("DIV");
     b.setAttribute("class", "select-items select-hide");
     for (j = 0; j < ll; j++) {  // Start from 0 to include the first option
       /*for each option in the original select element,
       create a new DIV that will act as an option item:*/
       c = document.createElement("DIV");
       c.innerHTML = selElmnt.options[j].innerHTML;
       c.addEventListener("click", function(e) {
         /*when an item is clicked, update the original select box,
         and the selected item:*/
         var y, i, k, s, h, sl, yl;
         s = this.parentNode.parentNode.getElementsByTagName("select")[0];
         sl = s.length;
         h = this.parentNode.previousSibling;
         for (i = 0; i < sl; i++) {
           if (s.options[i].innerHTML == this.innerHTML) {
             s.selectedIndex = i;
             h.innerHTML = this.innerHTML;
             y = this.parentNode.getElementsByClassName("same-as-selected");
             yl = y.length;
             for (k = 0; k < yl; k++) {
               y[k].removeAttribute("class");
             }
             this.setAttribute("class", "same-as-selected");
             break;
           }
         }
         h.click();
       });
       b.appendChild(c);
     }
     x[i].appendChild(b);
     a.addEventListener("click", function(e) {
       /*when the select box is clicked, close any other select boxes,
       and open/close the current select box:*/
       e.stopPropagation();
       closeAllSelect(this);
       this.nextSibling.classList.toggle("select-hide");
       this.classList.toggle("select-arrow-active");
     });
   }
   
   function closeAllSelect(elmnt) {
     /*a function that will close all select boxes in the document,
     except the current select box:*/
     var x, y, i, xl, yl, arrNo = [];
     x = document.getElementsByClassName("select-items");
     y = document.getElementsByClassName("select-selected");
     xl = x.length;
     yl = y.length;
     for (i = 0; i < yl; i++) {
       if (elmnt == y[i]) {
         arrNo.push(i);
       } else {
         y[i].classList.remove("select-arrow-active");
       }
     }
     for (i = 0; i < xl; i++) {
       if (arrNo.indexOf(i)) {
         x[i].classList.add("select-hide");
       }
     }
   }
   
   /*if the user clicks anywhere outside the select box,
   then close all select boxes:*/
   document.addEventListener("click", closeAllSelect);

8. Multi Select Input

   Component

   Code

   Choose the tools you use daily

   WebflowFigmaNotionJavascriptTypescript

   Thank you! Your submission has been received!

   Oops! Something went wrong while submitting the form.

   

   <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
   <style>
   .select2-selection .select2-selection--multiple {
     background: transparent;
     border-radius: 0.5rem;
     border: 1px solid var(--border--color--light);
   }
   
   .select2-dropdown {
     background-color: var(--body--color--background);
     border: 1px solid var(--border--color--light);
     border-radius: 0.5rem;
   }
   
   .select2-container--default .select2-results__option--selected {
     background-color: var(--border--color--light);
   }
   
   .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
     background-color: var(--body--color--background);
     color: white;
   }
   
   .select2-container--default .select2-selection--multiple {
     background-color: var(--body--color--background);
     border: 1px solid var(--border--color--light);
     border-radius: 0.5rem;
     min-height: 3rem;
   }
   
   .select2-container--default.select2-container--focus .select2-selection--multiple {
     border: 1px solid var(--border--color--light);
   }
   
   .select2-container--default .select2-selection--multiple .select2-selection__choice {
     background-color: var(--body--color--background);
     border: 1px solid var(--border--color--light);
     border-radius: 4px;
   }
   
   .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
     background-color: var(--body--color--background);
     border: none;
     border-right: 1px solid var(--border--color--light);
   }
   
   .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
   .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
     border-color: var(--border--color--medium);
     border-bottom-left-radius: 0.5rem;
     border-bottom-right-radius: 0.5rem;
   }
   
   .select2-container--open .select2-dropdown--below {
     border-top: 1px solid var(--border--color--light);
     margin-top: 0.25rem;
     border-top-left-radius: 0.5rem;
     border-top-right-radius: 0.5rem;
   }
   
   .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
     background: var(--body--color--foreground);
     color: var(--body--color--background);
   }
   
   .select2-results__options {
     padding: 0.25rem;
     display: flex;
     gap: 2px;
     flex-direction: column;
   }
   
   .select2-results__option--selectable {
     padding: 0.25rem 0.5rem;
     border-radius: 0.15rem;
     display: block;
     margin: 0;
     min-height: auto;
   }
   
   .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
     background-color: var(--border--color--light);
     color: inherit;
   }  
   </style>

   /* Import jQuery in <Head> if not already using */
   <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

   <!-- Add this before </body> tag -->
   <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
   <script>
   $(document).ready(function() {
       $('[thind="multi-select"]').select2();
   
       function prefillSelect2() {
           var prefilledText = $('#field').val();
           if (prefilledText) {
               var valuesArray = prefilledText.split(',').map(value => value.trim());
               var select2Element = $('select[thind="multi-select"]');
               select2Element.val(valuesArray).trigger('change.select2');
           }
       }
       prefillSelect2();
   
       const multiSelectForm = document.querySelector('[thind="multi-select-form"]');
       const multiSelectInput = document.querySelector('[thind="multi-select"]');
   
       multiSelectForm.addEventListener("submit", async (e) => {
           e.preventDefault();
           let multiSelectValue = $(multiSelectInput).select2('data');
           multiSelectValue = multiSelectValue.map((value) => value.text);
           // Convert to JSON string
           multiSelectValue = JSON.stringify(multiSelectValue);
           showToast(`Selected values are ${multiSelectValue}`);
       });
   });
   </script>

   Prerequisites

   Thind JS