Adding a Color Code Box to a Submission form

[Jmichael1425]

I'm creating an order form inside of Caspio and one of those fields is entering the HEX for a specific color that the person filling out the form is wanting us to use. Is it possible to have pop up like in the photo that they could select the color and fill in the HEX into the field? If not any recommendations? Most people just knows regular colors like red. But then we find them disappointed when it wasn't the "Right" red they wanted. 

[futurist]

hi @Jmichael1425,

 

you'd simply have to duplicate these two lines:

var field = document.querySelector("#InsertRecordColor");
        field.type = "color";

 

and specify the field names you need. in your case, since it's going to be four, it would look something like:

 

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
 var field1 = document.querySelector("#InsertRecordColor1");
 var field2 = document.querySelector("#InsertRecordColor2");
 var field3 = document.querySelector("#InsertRecordColor3");
 var field4 = document.querySelector("#InsertRecordColor4");
        field1.type = "color";
        field2.type = "color";
        field3.type = "color";
        field4.type = "color";
});
</script>

 

The only thing you need to replace are the ColorX in each document.querySelector("#InsertRecordColorX") to your actual field names.

[futurist]

Hi @Jmichael1425,

What you can do is, on your submission form, add an HTML block, disable the HTML editor (by going to the Advanced tab and unchecking the checkbox) then paste the following:
<input type="color" id="colorpicker"
           value="#e66465">

the value corresponds to the default value. you can change this as necessary

[futurist]

Hi @Jmichael1425,

Just to add to my last response, you can even go ahead and turn your actual field in the Submission Form that is storing those colors as a color picker, and whichever color is selected, the hexadecimal color code gets stored directly! You can do this using JavaScript:

 

1. Edit your Submission Form and go to Configure Fields.
2. Add a Header and Footer, and paste the following on the Footer (make sure you disabled the HTML editor first):

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
 var field = document.querySelector("#InsertRecordColor");
        field.type = "color";
});
</script>

 

Wherein the Color in the document.querySelector("#InsertRecordColor") refers to the name of the field you want to turn into a color input. Make sure to change this accordingly.

Sample DP: https://c1hch576.caspio.com/dp/db26a000675d5f8394b24ea1a4f6

[Jmichael1425]

@futurist- This worked perfectly! Thanks! 

In my case, I need to collect 4 different colors on the same form. How would I modify this to support that? 

once again Thank you! I appreciate your help!

[Jmichael1425]

@futuristThank you! I appreciate it! Thats a Huge Help!