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](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F181195ac-38ba-4da0-8dcd-c2213c7c0af6%2FUntitled.png?table=block&id=64afd0f3-800d-449f-8004-efe5a5142bf2&cache=v2)
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](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa283e6aa-8a73-41b4-b2f4-914bcc88b805%2FUntitled.png?table=block&id=75b773fa-cb7c-4a6f-b814-85dc5b0bcd6d&cache=v2)
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.