JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
Color PickerAsked 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!
it is possible?
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.
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.
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")
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.
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?
$document = &JFactory::getDocument();
$document->addScript( '/media/system/js/iColorPicker.js' );
excuse my english!
Thanks for all you're a GREAT!
Load your iColorPicker.js after jQuery gets loaded.
Thanks very thanks!
It will be a upgrade with a dedicated tool?
I'm not aware of any plans to implement this feature but I'll submit a ticket for you.
Thanks for asking.
It would be great to have a color picker added to the form builder!!!
@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:
WordPress Page Template Version: http://helpfulnerd.com/success/
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.
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?
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.