Jump to content
  • 0

Adding a Color Code Box to a Submission form


Jmichael1425
 Share

Question

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. 

Screen Shot 2022-08-26 at 7.29.36 AM.png

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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.

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...