Dynamically Change the Field Styles Based on User Inputs on a Color Picker Widget

Hi,

i was wondering if it is possible to pass the output of one of the "Color Picker" Widgets to an iFrame to be able to Preview the selected color on text or other styleable elements?

Thanks, any help is greatly appreciated

Hi,

I'm not sure if I understood your concern correctly. Can you please provide us more details of what you want to accomplish, maybe a simple step by step process on how you want your form should act or work. If you could also share us the URL or the ID of the form you are working at, that would help us to better understand your concern.

Thank you.

Hi,

thanks for your reply - i will try to provide as much information as i can:

I have a form that offers my clients the possibility to choose their favourite color for title, text and background of a video that will be produced.

I want them to be able to see what the color looks like, so i created an iframe that has all these elements (title, text and background) - now when the client picks a color using the "Advanced Color Picker" Widget, i want the elements in the iframe to change dynamically, according to what color the client has chosen.

I have created a smaller version of my form with the Color Picker Widget and the iFrame:

http://form.jotformpro.com/form/50012075760949

There are 3 Color Pickers for selecting the title-, text- and background-color. The iFrame down below has the corresponding elements - i want to apply the selected colors to the iFrame elements now..

Does that make any sense?

Thanks in advance..

Hi,

Thank you for providing us more details. From what I understood, you would like to dynamically change the styling of the elements or fields depending on the user's inputs? In your case, you have the widgets color picker and you want the values to be implemented on the styling of the elements inside the iFrame you have set up.

Unfortunately, dynamically changing the styles of the fields is not possible in our form builder now. It is quite harder to do it if the value of the color will come from a widget and you will implement it on a section of your form which uses an iFrame.

However, what might be possible is to use default fields (not widgets) in your form and use Javascript codes to change dynamically the appearance of a particular section or part of the form. Please do take note that you will need to embed your form code using its full source code and hard code the Javascript functions there.

I will try to come up a sample form if this is possible and will get back to you when I'm able to make it work in my end.

Thank you.

Thanks for your kind help!

I had a feeling this is not going to be easy - what if i turn things around and create everything (including the color picker) inside an iframe and just put out the color values to the form? Will that make things easier?

Thanks again

As mentioned by Charlie on his answer, you need to use the full source code of your form and add a script that dynamically changes the color of the text based on the selected color of the picker.

Here you can find a tutorial on how to do this: http://www.ezineasp.net/post/Javascript-Code-to-Change-Text-Color-of-HTML-elements.aspx or you can use a library like this one: http://jscolor.com/try.php 

Please check them out and if you have further questions, let us know and we'll be happy to assist.
Best Regards.

Hello Raul,

thanks for your answer and the links - it was very helpful already.

Right now i can't find the right value to send to the html element. The color "value"  of the Advanced Color Picker Widget seems to be updated when you click "next" to go to the next form page. And i can not access the widget's parameters since it seems to be embedded in a "closed source" fashion..

Sorry if this is too much of a jquery question already - i'd appreciate any help though!

Thank you

Hi,

Unfortunately, I'm unable to work it on my end. The widgets like the Advanced Color Picker is embedded in the form using iFrame and with that we can't access it parameters, unless the iFrame source and where the form is embedded is on the same domain origin, which is not.

We could try using other jquery or javascript color picker but it would need a couple of technicalities to fetch and pass the value of it on your forms.

I'll escalate this to our developers as a feature request to see if they can apply this to the form builder, but please do take note that I can't guarantee its implementation.

Thank you for understanding.

Hi Charlie,

thanks for your effort - it would be awesome and very useful if there was some kind of API to access the values from Widgets. I will set the preview function aside for now and come up with something else..

Thanks again for your help - much appreciated!

On behalf of my colleague, you're welcome.

I see that he already submitted the request to our back end.
Once an update regarding this matter shows up, you'll be notified here.

Best Regards.

@Graphlex

Here's a web page containing a demo of the sort of functionality I believe you want to achieve. It uses the same color picker to which my colleague Raul referred.

Here's what I did:

1. Downloaded the JSColor file (jscolor-1.4.4.zip)

2. Unzipped the downloaded file and uploaded the resulting folder to a directory on my web site

3. Created the jotform and include three (3) textbox fields labelled Select background color, Select title color and Select text color respectively 

4. Copied its full source and pasted it into a web page in the same directory which contained the JSColor folder. (I actually just copied all of the code from the jotform's URL instead of following the steps in the guide)

5. Added the class name color to the aforementioned textboxes, as can be seen between lines 83 and 100 in the page source:  

6. Included the JSColor script in the web page by linking to it (line 138 in the screenshot of page source below)

7. Embedded a script to make the sample text respond to the selections made in the color pickers (lines 140 to 154 in the screenshot)

A Short Explanation of the Custom Script

If you were to inspect the demo with your browser's developer tools or just view its source you would see that the background color, title color and text color selectors (textboxes) have IDs of input_6, input_7 and input_8 respectively:

You would also notice that the parent div of the sample text has an ID of text_4:

However, from the screenshot above it can also be seen that neither the title (h1 element) nor the text (p element) has an ID.

Since the div containing the sample text has an ID it can be targeted using Prototype's dollar ($) utility. However, the h1 and p elements of the sample text need to be targeted via the dollar-dollar ($$) utility because they have no IDs.

Anyway, that's the procedure in a nutshell but if you need help implementing this solution on your end, we'd be glad to provide it.

Happy New Year