What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.

  • Profile Image

    Color Picker

    Asked by Paolo on February 10, 2012 at 09:43 AM


    I want to create a form where put a color picker

    When a user selects a color in the color picker after clicking a submit button, the value is recorded and visible on the submission!

    I have a file with code html/javascript

    it is possible?


  • Profile Image
    JotForm Support

    Answered by abajan on February 10, 2012 at 10:23 PM

    Yes, I believe that may be possible. Copy the code you have to Pastebin.com or some other similar repository and paste the link here, so that we can have a look at it and see how best it can be integrated into the form. What I can state with certainty is that the form's source will have to be copied from the Embed Form Wizard, edited and then pasted into a web page because the color picker cannot be inserted using the form builder.

  • Profile Image
    JotForm Support

    Answered by abajan on February 10, 2012 at 10:57 PM

    Is there a particular web page from which the color picker was obtained? If so, just posting the link to that page should suffice. If there's more than one color picker on the page, just let us know which of them is the one you'd like to use.

    After giving this some more thought, it seems that getting the value picked recorded in the submission should actually be a pretty simple task.

    Looking forward to your reply.

  • Profile Image
    JotForm Support

    Answered by abajan on February 11, 2012 at 01:41 AM

    Actually, there's a very simple way to include a color picker in a form:

    1. Construct your form in the form builder and add a text box where you want the color picker to be displayed

    2. Label the box accordingly (ex: "Color Picker" or "Select a color")

    3. Copy the form's full source from the Embed Form Wizard

    4. Paste the code into the body of the web page in which the form is to appear

    5. Go to JSColor.com and download the latest version of the color picker (currently that's jscolor-1.3.13.zip)

    6. Unzip the archive and store the "jscolor" folder in the same directory as the page containing the form

    7. Search the source of the page for the input classed form-textbox to which the color picker is to be attached and add a class named color. In other words, class="form-textbox" becomes class="form-textbox color"

    8. At the bottom of the page, just before the closing body tag, insert this line and save your changes

    Here's a page containing a demo form. If you view the source of that page, you'll see the changes described above. Complete and submit the form and in the autoresponse you'll see the hex code of the color that was selected.

  • Profile Image

    Answered by anatema on February 13, 2012 at 04:58 AM

    Hi! Abajan

    Very thanks for you reply!

    I managed to run the colorpicker "jscolor.com", but is not what I want

    i want run this colorpicker:http://www.supersite.me/index.php?p=2_1

    is different because have a images, it invokes the operation and the look and feel is better!

    the page of my form is: http://www.promostampa.com/

    You can help me? it off?

    For run the file javascript i insert this code in my index php:

    $document = &JFactory::getDocument();
    $document->addScript( '/media/system/js/iColorPicker.js' );

    excuse my english!
    Thanks for all you're a GREAT!
  • Profile Image

    Answered by fxr on February 13, 2012 at 12:15 PM

    Load your iColorPicker.js after jQuery gets loaded. 

  • Profile Image

    Answered by anatema on February 14, 2012 at 04:21 AM

    Thanks very thanks!

  • Profile Image

    Answered by winvaria on December 06, 2012 at 05:46 AM

    It will be a upgrade with a dedicated tool?

  • Profile Image
    JotForm Support

    Answered by abajan on December 06, 2012 at 06:04 AM


    I'm not aware of any plans to implement this feature but I'll submit a ticket for you.

    Thanks for asking.

  • Profile Image

    Answered by akenyon on December 13, 2012 at 10:42 AM

    It would be great to have a color picker added to the form builder!!!

  • Profile Image

    Answered by helpfulnerd on June 15, 2013 at 06:50 PM

    @abajan I could use your help.

    I followed your instructions and made an HTML document and put the jscolor folder and html file in my wordpress theme folder - and it works great. I was simply going to link to the html page with the form.

    Then I decided I would make a Page Template for my wordpress theme and embed the source code there for my form. This also works fine. I have it working now.

    My problem: The CSS (appearnce) of the form in the HTML file version looks really nice compared to the form in my wordpress page template.

    Is it because the form is inheriting form CSS from my theme?

    I've only recently started digging into making my own WordPress themes.

    For now the form works great, and the color picker options works perfectly. I just wished the styling and layout of the form was the as how I built it in JotForm.

    Any help and indeas would be greatly appreciated.

    Oh and here are links so you can see the difference:

    HTML version:http://helpfulnerd.com/wp-content/themes/Helpfulnerd/form.html

    WordPress Page Template Version: http://helpfulnerd.com/success/



  • Profile Image
    JotForm Support

    Answered by jonathan on June 15, 2013 at 10:05 PM



    I suggest creating a separate topic/thread for your question to Abajan here

     http://www.jotform.com/contact and we will attend to it as soon as we can. Just copy/paste your message here on the new created post to speed up your post.


    As a hint, since you are using the form's source code embed on your WP page, the answer is YES. The form is inherithing the theme of the WP page.

    You can try embeding the form's page within an iframe code into your WP page. This way it will not use the WP stylesheets.



  • Profile Image

    Answered by oseojoy on August 12, 2013 at 07:07 PM

    I vote for this "feature" too.


    we have no way to use the full source code as our site is on wix. only iframe will work ok. it would be nice to have a way to plant this in an iframe, let me ask, is there a way to copy/paste the js color picker code into the html text box thingy or that wont work out?

  • Profile Image

    Answered by khrisell on August 12, 2013 at 08:38 PM

    Hello oseojoy,

    Kindly open a new thread so we can better track the issues, requests and solutions users are having.

    To assist you better and avoid confusion.
    Thank you and looking forward to assist you.