https://legacy.forums.gravityhelp.com/topic/using-the-jscolor-picker Gravity Support Forums Topic: Using the jscolor picker en-US Sat, 04 Apr 2026 19:19:04 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/using-the-jscolor-picker#post-37659 Tue, 11 Oct 2011 21:36:01 +0000 Chris Hajer 37659@https://legacy.forums.gravityhelp.com/ <p>Thanks Aaron. No problem. </p> https://legacy.forums.gravityhelp.com/topic/using-the-jscolor-picker#post-37650 Tue, 11 Oct 2011 20:23:43 +0000 aarondub84 37650@https://legacy.forums.gravityhelp.com/ <p>It works. It is perfect. I really thank you guys for all of the help. It really is appreciated. </p> https://legacy.forums.gravityhelp.com/topic/using-the-jscolor-picker#post-37559 Tue, 11 Oct 2011 12:15:33 +0000 Kevin Flahaut 37559@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>test page: <a href="http://bit.ly/qUBN9F" rel="nofollow">http://bit.ly/qUBN9F</a></p> <p>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 &lt; /head &gt; tag.</p> <pre><code>&lt;script type=&quot;text/javascript&quot;&gt; jQuery(document).ready(function() { jQuery(&quot;li.jscolor input&quot;).addClass(&quot;color&quot;); }); &lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;http://www.imitationmedia.com/wp-content/themes/qlassik/js/jscolor/jscolor.js&quot;&gt;&lt;/script&gt;</code></pre> <p>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.</p> <p><a href="http://screencast.com/t/eoUgrkqL" rel="nofollow">http://screencast.com/t/eoUgrkqL</a> </p> https://legacy.forums.gravityhelp.com/topic/using-the-jscolor-picker#post-37548 Tue, 11 Oct 2011 11:41:39 +0000 Chris Hajer 37548@https://legacy.forums.gravityhelp.com/ <p>I don't think you can do it the way you're trying, with an HTML field and copy and paste like that.</p> <p>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?</p> <pre><code>[html] &lt;input class=&quot;color&quot;&gt;</code></pre> <p>But in the form editor, you can only add a class to the<br /> &lt; li &gt;, correct?</p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/using-the-jscolor-picker#post-37537 Tue, 11 Oct 2011 07:55:45 +0000 aarondub84 37537@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/using-the-jscolor-picker#post-37517 Tue, 11 Oct 2011 00:57:30 +0000 Chris Hajer 37517@https://legacy.forums.gravityhelp.com/ <p>I see this in the header of your page:</p> <pre><code>[html] &lt;script type=&quot;text/javascript&quot; src=&quot;js/jscolor/jscolor.js&quot;&gt;&lt;/script&gt;</code></pre> <p>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:</p> <p><a href="http://www.imitationmedia.com/wp-content/themes/qlassik/js/jscolor/jscolor.js" rel="nofollow">http://www.imitationmedia.com/wp-content/themes/qlassik/js/jscolor/jscolor.js</a></p> <p>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.</p> <p>That's the first error. Get the path to the script correct first, so you can use it. </p> https://legacy.forums.gravityhelp.com/topic/using-the-jscolor-picker#post-37442 Mon, 10 Oct 2011 08:54:50 +0000 aarondub84 37442@https://legacy.forums.gravityhelp.com/ <p>I am trying to get the color picker to work at the bottom of the second page on the form at this link: <a href="http://www.imitationmedia.com/request" rel="nofollow">http://www.imitationmedia.com/request</a><br /> 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.<br /> 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<br /> &lt; li &gt; and &lt; /li &gt;<br /> 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.<br /> There are two color picker fields at the moment. One was created in the html block. Thanks for the help. </p> https://legacy.forums.gravityhelp.com/topic/using-the-jscolor-picker#post-37429 Mon, 10 Oct 2011 03:07:33 +0000 Chris Hajer 37429@https://legacy.forums.gravityhelp.com/ <p>Please post a link to your form where you have tried to implement this and explain how you are including it. Thank you. </p> https://legacy.forums.gravityhelp.com/topic/using-the-jscolor-picker#post-37408 Sun, 09 Oct 2011 15:11:58 +0000 aarondub84 37408@https://legacy.forums.gravityhelp.com/ <p>I would really appreciate any help with making this color picker work in a form: <a href="http://jscolor.com/" rel="nofollow">http://jscolor.com/</a><br /> 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. </p>