Dashboard

Search

Color Pallete

Buttons

ToolTip

News Letter CTA

Card

iPhone Mockups

Primary Color

Accent Color

Secondary Color

Buttons hovers

Hover v1
Hover v2
Hover v3
Hover v4
Hover v5
Hover v6
Hover 7

ToolTip

Tooltip onClick
Tooltip onHover
Social Media Influencers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

UGC Creators

Discover how to craft authentic content, connect with brands, and monetize your skills as a UGC creator.

Passionate Video Creator

From production tips to collaboration insights, this guide has everything you need to succeed.

Passionate Video Creator
Bypass agencies and get reached out directly by brands on Veel for faster, hassle-free collaborations.
Monetization Opportunities
Earn cash and non-cash rewards for your video creations. Veel's secure payment system ensures you get paid what your content deserve.
Secure Collaborations
Protect your interests with legally binding contracts. Seamless contract management between creators and brands

Business

Elevate your social media, ad campaigns, website,  eCommerce, or app.


Content created with Veel ensures legal protection for both your brand and creators, fostering fairness for everyone. Plus, our Video Reviews Hub helps drive more customers to your business.

Learn More

Online Business

  • Compatible on Shopify , eBay and other marketplaces
  • Social Media on Autopilot
  • Budget Friendly Campaign
  • Greater Audience Reach and Visibility
  • Real-time analytics
Sign Up
iPhone 14 Pro– Gold
Screenshot: 393 x 852 @2x
iPhone 14 Pro– Space Black
Screenshot: 393 x 852 @2x
iPhone 14 Pro– Deep Purpble
Screenshot: 393 x 852 @2x

Mockups with shadows

You have to change the shadow values in the embed element. If you want to use shadows you still can use Webflow symbols (see iPhone example below).

Text Inputs

☝️ How this works

The svg icon to the right is a native Webflow dropdown that opens on hover. I generally find these easier to work with that custom CSS or Webflow IX.

This is the description for this input
☝️ How this works

There's some custom code in here that disables the element on load. All you have to do is add the class "disabled" in Webflow.

☝️ How this works

There's some optional CSS in here that styles the icon SVG when the input is focused.

Custom CSS
⌘K
https://
https://
Not a valid input
☝️ How this works
Custom CSS

There's some custom CSS in here that turns the input border color red, the svg red, and the help text red.

The styling will automatically apply to any input that has a parent with the class MS Error

Minimum of 8 characters.
☝️ How this works

This element uses Webflow's tab component to toggle between the "show" and "hide" states. The tabs and the input have attributes which tie into the custom code.

Add the following code to your page before the closing <body> tag.

I recommend copying the code on the published site to preserve line breaks.

<!--🟢 SHOW/HIDE PASSWORD CODE 🟢-->
<script>
//attach a click handler to the button to make it transform when clicked, via our transform() function below. Add right before your closing body tag.
document.querySelector("[data-transform]").addEventListener("click", transform);
//flag of whether or not it is a password field or text field
var isPassword = true;
//this function will toggle the input between being a password or a text input
function transform() {
   //copy the element itself, its html source, and value text to a variable
   var myInput = document.querySelector("[data-show]");
   var oldHtml = myInput.outerHTML;
   var text = myInput.value;
   if (isPassword) {
       //replace "password" with "text" in the html if it is a password field
       var newHtml = oldHtml.replace(/password/g, "text");
   } else {
       //replace "text" with "password" if it is a text field
       newHtml = oldHtml.replace(/text/g, "password");
   }
   //update the html
   myInput.outerHTML = newHtml;
   //restore the text value
   myInput = document.querySelector("[data-show]");
   myInput.value = text;
   //toggle the isPassword flag
   isPassword = !isPassword;
}
</script>

Copy
☝️ How this works
Step 1 - Code

Below is some custom javascript that you should add before the closing <body> tag.

CUSTOM JS
<!--🟢 COPY BUTTON CODE 🟢-->
<script>
const copyBtns = document.querySelectorAll('[data-copy-button]');copyBtns.forEach(copyBtn => {
 const inputId = copyBtn.getAttribute('data-copy-button');
 const input = document.querySelector(`[data-input="${inputId}"]`);  copyBtn.addEventListener('click', async () => {
   try {
     await navigator.clipboard.writeText(input.value);
     console.log('Text copied to clipboard');
     
     // Change button text to "Copied" and add class "success" for 3 seconds
     const originalBtnText = copyBtn.innerHTML;
     copyBtn.innerHTML = 'Copied';
     copyBtn.classList.add('is-success');
     setTimeout(() => {
       copyBtn.innerHTML = originalBtnText;
       copyBtn.classList.remove('is-success');
     }, 3000);
     
   } catch (err) {
     console.error('Failed to copy text: ', err);
   }
 });
});
</script>

Step 2 - Attributes

Make sure your input and your copy button have attributes that look like data-input="INPUT_NAME" and data-copy-button="INPUT_NAME".

The "INPUT_NAME" is something that you pick. As long as the button and input match each other you should be fine.

Step 3 - Multiple inputs

If you have multiple input/button pairs on the same page be sure to change the "INPUT_NAME" so that each pair is unique.

Step 4 - Styling

When the copy button is clicked, a class of is-success is added for 3 seconds. You can style it below.

☝️ How this works

This element uses a transparent input in conjunction with a series of "fake" input boxes in the background.

The CSS below is what applies styling to the "fake" input's in the background.

CUSTOM CSS

Here's a quick video that explains the feature in greater detail.

Radio Groups

These all work with Memberstack. Here's a getting started tutorial for radio buttons.
This is optional description text
This is optional description text
This is optional description text
This is optional description text
☝️ How this works
Custom CSS

Each of these radio groups has some Custom CSS. You only need one per page, but I included one in each to make it easy for you copy and paste.

And each group of radio buttons has a unique name. The value is what gets saved/submitted.

If you're using Memberstack, each radio input has a data-ms-member attribute. You'll need one custom field per radio group.

Radio Rows
Select an Option w/ Description
This is optional description text
☝️ How this works

These are default Webflow radio buttons. I'm using custom CSS to change the label styles when checked.

Custom CSS
Custom CSS
Custom CSS
This is optional description text
☝️ How this works
Custom CSS

The images are background images. Give each MS Radio Image it's own combo class so your images don't override each other.
‍
Each of these radio groups has some Custom CSS. You only need one per page, but I included one in each to make it easy for you copy and paste.

And each group of radio buttons has a unique name. The value is what gets saved/submitted.

If you're using Memberstack, each radio input has a data-ms-member attribute. You'll need one custom field per radio group.

Only one option can be selected at a time.
☝️ How this works
Custom CSS

These are mostly Webflow elements which are lightly styled with custom CSS. I tried to keep as much in Webflow as possible.

Custom CSS
Custom CSS

Checkboxes

☝️ How this works

This is the default Webflow Checkbox with a bunch of sibling elements. The label is positioned on top so that users can click anywhere to toggle it.

Use the following CSS to change the "Checked" styling.

Custom CSS
☝️ How this works

This is very similar to the above element with some additional classes to avoid conflicts.

Custom CSS
☝️ How this works
Custom CSS

These are mostly Webflow elements which are lightly styled with custom CSS. I tried to keep as much in Webflow as possible.

This is optional description text
This is optional description text
☝️ How this works

These are default Webflow checkbox. I'm using custom CSS to change the label styles when checked.

Custom CSS
☝️ How this works

These are default Webflow checkbox. I'm using custom CSS to change the label styles when checked.

There's an SVG embed inside of each checkbox. It's only visible if the checkbox is checked.

Custom CSS

Select Fields

☝️👇 How this works

It's a native Webflow select field with a custom dropdown icon.
‍
You can edit the dropdown SVG by selecting the input and then hit the right arrow key.

The CSS for the icon is below.

CUSTOM CSS
Generate a Select Input →

It's annoying to manually change the select options, so I made a tool which can do it automatically https://select-input-tool.webflow.io/

☝️ How this works
Step 1

Below is some custom CSS that you need to add to the page <header> code.

CUSTOM CSS
Step 2

You'll want to add the class name nice-select to any select input you want styled.

Step 3

Add the following code to your page before the closing <body> tag.

I recommend copying the code on the published site to preserve line breaks.

<!--🟢 CUSTOM SELECT CODE 🟢-->
<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() {
  $('.nice-select').niceSelect();
});
</script>

Credits

I originally discovered this component thanks to Noah Raskin on the Webflow Showcase.

☝️ How this works
Step 1

Below is some custom CSS that you need to add to the page <header> code.

CUSTOM CSS
Step 2

Add the following code to your page before the closing <body> tag.

I recommend copying the code on the published site to preserve line breaks.

<!--🟢 DATE PICKER CODE 🟢-->
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
<script>
   $(document).ready(function () {
       $('[data-input="datepicker"]').datepicker({
           format: 'mm-dd-yyyy'
       });
       // Available date placeholders:
       // Year: yyyy
       // Month: mm
       // Day: dd
   });
</script>

Credits

I discovered this code on the Flowbase blog.

☝️ How this works
Step 1

Add the following code to your page before the closing <body> tag.

I recommend copying the code on the published site to preserve line breaks.

<!--🟢 COLOR PICKER CODE 🟢-->
<script src="https://cdn.jsdelivr.net/npm/@jaames/iro/dist/iro.min.js"></script>
<script>
   // Create a new color picker instance
   // https://iro.js.org/guide.html#getting-started
   var colorPicker = new iro.ColorPicker(".ms-colorpicker", {
       // color picker options
       // Option guide: https://iro.js.org/guide.html#color-picker-options
       width: 180,
       color: "rgb(255, 0, 0)",
       borderWidth: 5,
       borderColor: "#f5f5f5",
   });    var values = document.getElementById("values");
   var hexInput = document.getElementById("hexInput");
   var swatch = document.getElementById("colorSwatch");    // https://iro.js.org/guide.html#color-picker-events
   colorPicker.on(["color:init", "color:change"], function(color){
       // Show the current color in different formats
       // Using the selected color: https://iro.js.org/guide.html#selected-color-api
       values.innerHTML = [
           "hex: " + color.hexString,
           "rgb: " + color.rgbString,
           "hsl: " + color.hslString,
       ].join("<br>");
       
       hexInput.value = color.hexString;
       swatch.style.backgroundColor = color.hexString;
   });    hexInput.addEventListener('change', function() {
       colorPicker.color.hexString = this.value;
       swatch.style.backgroundColor = this.value;
   });
</script>

Credits

Iro.js is color picker widget for JavaScript with a modern SVG-based user interface. No jQuery or extra CSS / images.

Head to iro.js.org for full documentation and features, or check out the source code on GitHub!

I discovered this package thanks for James Daniel on Codepen.

Iro.js is color picker widget for JavaScript with a modern SVG-based user interface. No jQuery or extra CSS / images.

Head to iro.js.org for full documentation and features, or check out the source code on GitHub!

I discovered this package thanks for James Daniel on Codepen.

Custom Multi-Select Fields

All of the solutions below rely on a native Memberstack feature called "Checkbox Groups". You can learn more about how they work in in Memberstack documentation.

Custom Dropdown w/ Checkboxes & Webflow IX
Select all that apply
Custom Multi-select Input
Custom Multi-select + Custom Instant Search
Multi-select Buttons

Rich Text

Please note the rich text editor is provided through Quill JS.  Follow their documentation to make edits.
☝️ How this works

There's a lot going on with this one... let's let Julian explain 🎉

Clone the Original Project

Buttons

Save Order
Save & Publish
Download
Contact us
Save Draft
Resize
Undo
Export
Delete
Light SM
Delete All

Drag & Drop

Option A
🟢
Option B
🟡
Option C
🔴
You'll probably want to hide and/or disable it in production. I'll add some HTML that you could use.
👈 How this works
Step 1

Duplicate the boxes to add more options. Be sure to keep the attributes and class names the same. MS Box and MS Boxes are required class names.

Step 2

Add the following code to the header of your page or site.

<style>
[draggable] {
 user-select: none;
}
[data-value] {
pointer-events: none;
}
</style>

Step 3

Next up, you can change the styling of boxes which are about to "replaced."

Style me
Step 4

If you want to use a hidden/disabled input then you can add the following code to an embed in Webflow. You can change NAME to be anything you like.

<input type="hidden" data-input="drag-order" maxlength="256" name="NAME" data-name="NAME" id="NAME" data-ms-member="FIELD_ID" required="">

The data-ms-member part is only required if you're using Memberstack.

Step 5

Last, and most importantly, you need to add the following code before the closing </body> tag.

<!--🟢 DRAG N DROP 🟢-->
<script>
document.addEventListener('DOMContentLoaded', (event) => {  var dragSrcEl = null;
 
 function handleDragStart(e) {
   this.style.opacity = '0.4';
   
   dragSrcEl = this;    e.dataTransfer.effectAllowed = 'move';
   e.dataTransfer.setData('text/html', this.innerHTML);
 }  function handleDragOver(e) {
   if (e.preventDefault) {
     e.preventDefault();
   }    e.dataTransfer.dropEffect = 'move';
   
   return false;
 }  function handleDragEnter(e) {
   this.classList.add('over');
 }  function handleDragLeave(e) {
   this.classList.remove('over');
 }  function handleDrop(e) {
   if (e.stopPropagation) {
     e.stopPropagation(); // stops the browser from redirecting.
   }
   
   if (dragSrcEl != this) {
     dragSrcEl.innerHTML = this.innerHTML;
     this.innerHTML = e.dataTransfer.getData('text/html');
   }
   
   let orderedBoxes = document.querySelectorAll('.ms-box div[data-value="true"]');    let orderList = Array.from(orderedBoxes).map(function(box) {
     return box.innerHTML;
   }).join(',');    let input = document.querySelector('input[data-input="drag-order"]');    input.value = orderList;    return false;
 }  function handleDragEnd(e) {
   this.style.opacity = '1';
   
   items.forEach(function (item) {
     item.classList.remove('over');
   });
 }
 
 let items = document.querySelectorAll('.ms-boxes .ms-box');
 items.forEach(function(item) {
   item.addEventListener('dragstart', handleDragStart, false);
   item.addEventListener('dragenter', handleDragEnter, false);
   item.addEventListener('dragover', handleDragOver, false);
   item.addEventListener('dragleave', handleDragLeave, false);
   item.addEventListener('drop', handleDrop, false);
   item.addEventListener('dragend', handleDragEnd, false);
 });  // Set initial value of the input field
 let orderedBoxes = document.querySelectorAll('.ms-box div[data-value="true"]');
 let orderList = Array.from(orderedBoxes).map(function(box) {
   return box.innerHTML;
 }).join(',');
 let input = document.querySelector('input[data-input="drag-order"]');
 input.value = orderList;
 
});
</script>

Credits

ChatGPT and this article on WebDev

This input type can work with Memberstack too.

You'll need to update the code, so I recommend you clone this other project and watch this video instead of following the instructions to the left.

Range Sliders

0
0
👈 How this works
Step 1

Be sure to keep all the classnames, or update them in your code. They are required for this input to function.

Step 2

Add the following CSS to your page or site settings. Place the on the page to preview changes

CUSTOM CSS
Step 3

Change the styling of these elements right in Webflow. To style the handle and hover states edit the custom CSS.

0
Step 4 - Option A

Last, and most importantly, you need to add the following code before the closing </body> tag.

<!--🟢 RANGE SLIDERS 🟢-->
<script>
function rangeSlider() {
 var sliders = document.querySelectorAll('.ms-range-slider');  sliders.forEach(function(slider) {
   var range = slider.querySelector('.ms-range-slider-bar'),
       value = slider.querySelector('.ms-range-slider-value');    value.innerHTML = range.value;    range.addEventListener('input', function() {
     value.innerHTML = this.value;
   });
 });
}rangeSlider();
</script>

Step 4 - Option B

If you want to use this feature with Memberstack you'll want to use this code instead. You only need one or the other.

<!--🟢 RANGE SLIDERS W/ MEMBERSTACK 🟢-->
<script>
function rangeSlider() {
 var sliders = document.querySelectorAll('.ms-range-slider');  sliders.forEach(function(slider) {
   var range = slider.querySelector('.ms-range-slider-bar'),
       value = slider.querySelector('.ms-range-slider-value');    value.innerHTML = range.value;    range.addEventListener('input', function() {
     value.innerHTML = this.value;
   });
 });
}// Check if Memberstack is available
if (typeof window.$memberstackDom !== 'undefined') {
 // Get the current Memberstack member
 window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
   if (member) {
     let id = member.id;
     // Memberstack member found, initialize range sliders
     rangeSlider();
   } else {
     // Memberstack member not found, initialize range sliders
     rangeSlider();
   }
 });
} else {
 // Memberstack not available, initialize range sliders
 rangeSlider();
}
</script>

Credits

The Simple Range Slider project by Adam Whitten

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

Text link

Bold text

Emphasis

Superscript

Subscript