How to create a color picker input field

Looking for a way to collect color inputs? With the help of code injection you can create and design your own custom color picker in your Tally forms.
notion image
This requires a custom domain and code injection.

How it works

  • Create a form and add a Short text input block with the following placeholder text “Hex code”. You can drag a column next to adjust the width of the color input fields.
notion image
The "Hex code" placeholder is the part that instructs the code to turn those fields into color pickers.
<script> window.addEventListener('Tally.FormPageView', () => { document .querySelectorAll('input[placeholder="Hex code"]') .forEach((el) => (el.type = 'color')); }); </script> <style> input[type="color"] { box-shadow: none !important; padding: 0 !important; } </style>
  • Give it a try in the embedded form below.