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.
This requires a custom domain and code injection.
How it works
- Create a form and add a
Short textinput block with the following placeholder text “Hex code”. You can drag a column next to adjust the width of the color input fields.
The "Hex code" placeholder is the part that instructs the code to turn those fields into color pickers.
- Connect your form to a custom domain and inject the following code in the code injection block.
<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.