Add color picker to a form

Permalink
I need to let people choose some colors and send them in a form, I can make it work by itself, but have no idea how to add it to a concrete5 form.

I found this color picker
www.www.http://jscolor.com/download.php...

What's the easiest way to do that?

Thanks

View Replies:
jordanlev replied on at Permalink Reply
jordanlev
It's going to require some coding and trial and error on your part, but if you're somewhat comfortable with HTML/CSS, it should be doable.

I think the basic idea is you create a form and add a normal textbox field to it.

Then you add that color picker javascript to your theme's <head>, and below that add the script that activates the colorpicker (as described on the link you provided).

The tricky part is going to be that you need to find out the id of the textbox that was added to the form block -- you will need to use Firebug (a free firefox addon) or the Web Inspector in Safari or Chrome, or just "view source" and find it. You need to do this after you have created the form and added it to a page, because it will be a different id for every form block, so you don't know what the id will be until after it's added.

Also note that you will need to do this for every form that's added (not a problem if you only have one of these forms on your site, but if you want people to be able to create new forms with this a lot in the future, this will not be a very practical method).

Best of luck.

-Jordan
mikkelwh replied on at Permalink Reply
@Jordan

<input class="color"> Will be placed in the html, where I find my form in firebug right?

When I find the spot in firebug to my form, how do I find that codes in concrete5?

Thanks
jordanlev replied on at Permalink Reply
jordanlev
Are you talking about the built-in form block here, or you are creating your own form in code?
Also, please let me know how familiar you are with the following things:
* HTML/CSS
* Concrete5 Themes
* Javascript/JQuery
* PHP

If I know those things I can give you a better answer
mikkelwh replied on at Permalink Reply
I am talking about the built-in form block.

HTML/CSS (good)

Concrete5 Themes (I have made my own, but don't know to much about it)

Javascript/JQuery (I use it, but don't know to much about it)

PHP (I use it, but don't know to much about it)

Thanks
jordanlev replied on at Permalink Reply
jordanlev
Okay, so the challenge with using the built-in form block for this is that you have no control over the classes and such that it puts into the form fields. If you were creating your own form in html you could very easily use <input class="color">, but unfortunately there's no easy way to do that with the c5 form block.

So instead of bending the form block to do what we want, we need to bend our own approach around how the form block already works.

The easiest way to do this (and something I've done in projects before) is to add the block to a page, make sure you include a textbox field that will eventually become the color picker (but for now it's just a textbox, nothing special), and then after it's been added to the page (and you exit edit mode), view the source of the page (or firebug/inspect it) and find out what "name" has been assigned to it (the form block assigns unique names to every field that it outputs) -- for example, "Question22".

Now that you know the name of that field, you can properly identify it with the jquery colorpicker code. You do this in your theme's <head>. For most themes, this is in a file called "header.php" which is inside an "elements" directory (within your theme's main directory). But it's possible that it's somewhere else -- perhaps it exists in each and every page type template file (e.g. default.php, left_sidebar.php, etc.). Anyway, once you find it, we're going to add some javascript code just above the closing </head> tag.

Now, we have a problem here because unlike most jquery plugins that let you specify the dom elements to apply the effect to, this one you are using seems to have hardcoded the 'class="color"' thing (which, again, we can't rely on existing because c5's form block doesn't let use change how the fields out outputted). So unfortunately it's going to be complicated to use the color picker you've chosen. It's possible but the instructions will take me way too long to write out here. So what I suggest is you google for "jquery color picker" and find one that looks decent (I'm sure there are tons to choose from).

One you have that picked out and downloaded, the code you'd add above </head> is something like this:
<script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/jquery.some-imaginary-color-picker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('input[name="Question22"]').imaginaryColorPicker();
});
</script>


Note that I'm assuming the textbox field's name is "Question22", but obviously you need to change this to match what YOUR form's textbox name is.

Also note that you will need to put the color picker javascript file into your theme's directory.

Good luck!

-Jordan
mikkelwh replied on at Permalink Reply
@Jordan

Thank you for all your help, I understand all you have been written except of these codes here:

<script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/jquery.some-imaginary-color-picker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('input[name="Question22"]').imaginaryColorPicker();
});
</script>


I guess I have to replace /jquery.some-imaginary-color-picker.js ?
And does this .imaginaryColorPicker have anything to do with above?

I have found many different color pickers, but can't quite see how to combine the codes from them with yours.

Thanks
jordanlev replied on at Permalink Reply
jordanlev
Choose one of the color pickers you found and post the link here. The code I wrote is meant to be an example -- every plugin works slightly differently so I can't provide exact details unless I know which one you want to use.

-Jordan