Color Picker

  • Profile Image
    Asked 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
    Answered on February 10, 2012 at 10:23 PM

    Yes, I believe that may be possible. Copy the code you have to 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
    Answered 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
    Answered 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 and download the latest version of the color picker (currently that's

    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 on February 13, 2012 at 04:58 AM

    Hi! Abajan

    Very thanks for you reply!

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

    i want run this colorpicker:

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

    the page of my form is:

    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 on February 14, 2012 at 04:21 AM

    Thanks very thanks!

  • Profile Image
    Answered on December 06, 2012 at 05:46 AM

    It will be a upgrade with a dedicated tool?

  • Profile Image
    Answered 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 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 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:

    WordPress Page Template Version:



  • Profile Image
    Answered on June 15, 2013 at 10:05 PM



    I suggest creating a separate topic/thread for your question to Abajan here 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 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 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.