Using the jscolor picker « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

aarondub84
Member

I would really appreciate any help with making this color picker work in a form: http://jscolor.com/
It is really simple when working in html. I know it isn't totally the same, but it seems like it would be the easiest to integrate. I did everything I thought I should do, but it doesn't seem to work. Any insight is greatly appreciated. Thanks in advance.

Posted 12 years ago on Sunday October 9, 2011 | Permalink
Chris Hajer
Key Master

Please post a link to your form where you have tried to implement this and explain how you are including it. Thank you.

Posted 12 years ago on Monday October 10, 2011 | Permalink
aarondub84
Member

I am trying to get the color picker to work at the bottom of the second page on the form at this link: http://www.imitationmedia.com/request
Here is how I tried to make it work. I tried the script in two places, in the header.php and in an html block in the form.
Since I couldn't change the input class in the form, I created the input field for the color picker, then I viewed the source of the page and copied that field code between the
< li > and < /li >
and pasted that into an html block in the form and changed the input class to "color". But the color picker is not showing up. That is where I am at now.
There are two color picker fields at the moment. One was created in the html block. Thanks for the help.

Posted 12 years ago on Monday October 10, 2011 | Permalink
Chris Hajer
Key Master
I see this in the header of your page:
```
[html]
<script type="text/javascript" src="js/jscolor/jscolor.js"></script>
```
But that file does not exist. You will need to correct the path to that file before going any further. The file actually exists here in the theme folder:

http://www.imitationmedia.com/wp-content/themes/qlassik/js/jscolor/jscolor.js

So, in your header.php, you could use that link, or a WordPress function to get the template directory. You might also want to enqueue it only on the pages where it's needed.

That's the first error. Get the path to the script correct first, so you can use it.
Posted 12 years ago on Tuesday October 11, 2011 | Permalink
aarondub84
Member

I overlooked that important issue. I revised the link and now it is working in the field that I created from the original fields html. But the html field answer doesn't show up in the email notification that is sent to me. Is there a way to change the input class of the original field to 'color' rather than the size? Thanks for the help so far.

Posted 12 years ago on Tuesday October 11, 2011 | Permalink
Chris Hajer
Key Master
I don't think you can do it the way you're trying, with an HTML field and copy and paste like that.

Basically, with a simple text input, you want to add a class of 'color' to the input so that your script is added? Is that accurate?
```
[html]
<input class="color">
```
But in the form editor, you can only add a class to the
< li >, correct?

I think you will have to use jQuery to add the class to the fields you need to target, or will need to modify the jscolor script to target "li.color input" rather than just "input.color". I will have Kevin take a look and see if he has a simple solution.
Posted 12 years ago on Tuesday October 11, 2011 | Permalink
Kevin Flahaut
Administrator
Okay, the easiest way to enable this is with a small jQuery snippet to add the class to the inputs. I copied your form page and tested it.. link is below.

test page: http://bit.ly/qUBN9F

You will want to add the jQuery snippet before the jscolor script gets loaded and of course after the jQuery library is loaded in your theme. I put this directly before the closing < /head > tag.
```
<script type="text/javascript">
jQuery(document).ready(function() {

	jQuery("li.jscolor input").addClass("color");

});
</script>

<script type="text/javascript" src="http://www.imitationmedia.com/wp-content/themes/qlassik/js/jscolor/jscolor.js"></script>
```
then, all you need to do is add the additional classname "jscolor" to your field in the form admin and you should be good to go. It works well in my tests as you can see below.

http://screencast.com/t/eoUgrkqL
Posted 12 years ago on Tuesday October 11, 2011 | Permalink
aarondub84
Member

It works. It is perfect. I really thank you guys for all of the help. It really is appreciated.

Posted 12 years ago on Wednesday October 12, 2011 | Permalink
Chris Hajer
Key Master

Thanks Aaron. No problem.

Posted 12 years ago on Wednesday October 12, 2011 | Permalink

This topic has been resolved and has been closed to new replies.