What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

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.


  • Profile Image

    any workaround to use "color picker" with iframe embed format as opposed to full source code upload?

    Asked by oseojoy on August 12, 2013 at 07:11 PM

    THAT WOULD BE SICK!

     

    our website runs on wix and we cannot upload anything to any directory to the extent required in the other suggested workaround thread i found. is there any possible or potential way you may know to achieve the similar field with iframe only option?

     

    Thank you

    Page URL:
    http://jotform.co/form/32176991481866

    source iframe embed format workaround
  • Profile Image
    JotForm Support

    Answered by jonathan on August 12, 2013 at 08:50 PM

    Hi,

    From what I know, you can also embed a form into a Wix page when the source code of the form was used. This can be done with the form's page within the iframe.

    For example, you can embed within an iframe this form https://shots.jotform.com/jonathan/webtest/Iframe_Embed_Source_Code_to_Wix.html

    Hope this help. Please tell us your feedback about this.

    Thanks.

  • Profile Image

    Answered by oseojoy on August 12, 2013 at 11:52 PM

    hmmm, what do you mean exactly by "you can embed within an iframe this form "

     

    wix has a html widget which basically creates a wix page for whatever code you give it and simply iframes it on your page where the widget is. in our experience with jotform and wix in the past, only the code provided by "iframe" option from jotforms embed options worked ok with regards to proper function and display on wix.

     

    am i to correctly understand you guys now endorse using the full source code as well on wix sites?

  • Profile Image
    JotForm Support

    Answered by jonathan on August 13, 2013 at 02:50 AM

    Hi,

    I have embedded the form while using its source code and put it within an iframe on this Wix website

    http://jon2jotform.wix.com/myjotformwixsite#!services/c1pna

     

    This is the iframe code I used

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://shots.jotform.com/jonathan/webtest/Iframe_Embed_Source_Code_to_Wix.html" frameborder="0" style="width:100%; height:19568px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    If you check the iframe code, I have wrapped a page that uses the form's source code (this page), and I use it as the src in the iframe code.

    Can something like this work for you?

    If you can share to us your web page/form that have this color picker, I will try to embed it in my Wix test site so we can check further.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on August 13, 2013 at 02:54 AM

    Hi,

    Sorry, I missed to answer you on this.

     

    am i to correctly understand you guys now endorse using the full source code as well on wix sites?

    The answer is No.

    We still recommed using iframe embed to avoid script conflict with Wix pages.

    Thanks.

  • Profile Image

    Answered by oseojoy on August 13, 2013 at 09:14 AM

    ok. that clears it up a bit.

     

    the color picker as described here by other team memebrs requires me to upload some files apparently to my directory. however, at this point I am trying to find a way to host it somewhere else and just get a working script out of it that can be placed into what you just described without the need for any direct (and currently impossible) file upload to my wix site directory.

     

    since you have been so helpful, let me ask you this: do you know of any way i can make the zip file and all its required content for color picker into a single piece of code that can be used in such a manner, i have looked at google code and a few other websites, but i still dont think i have found what i need to find here. I need to host it somewhere other than wix and then make it run from there, and iframe or somehow otherwise inject into the jotform embed as you described above. but am stuck.

  • Profile Image

    Answered by oseojoy on August 13, 2013 at 09:23 AM

    ok, i may have had other success at that as of now:

    http://pastebin.com/j4GkvECr

    this is a widget i found that should do the job without requiring any files. now can i pretty much add this after my jotform iframe code in my wix html element and expect to see it show up nicely?

     

    another issue, do you think this would cause a very lon obviously visible scroll bar? because the iframe version takes care of that while other methods do not (other non-iframe codes offered by jotform) I need to add this color picker towards the bottom of my form and inherently replace a few fields with a single piece, but not sure how i can tell it where to show the color picker. maybe i can put it on a next page.

     

    any advice?

     

    also, how do i go about capturing what users set as their colors? can jotform somehow read the values or let me see them in any visual or alphabetical way?

     

    also, how do i go about capturing multiple colors, as in how do i condition a widget like this to begin with so i can have mutliple ones that kick in per different conditions? is that even possible?

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on August 13, 2013 at 01:16 PM

    Hi,

    However, at this point I am trying to find a way to host it somewhere else and just get a working script out of it that can be placed into what you just described without the need for any direct

    -You can use Free Javascript Hosting Sites such as: http://yourjavascript.com/. Just download the Color Picker from the provided website: http://jscolor.com/download.php. Extract the Zip File > Upload the JS File.

     

    do you know of any way i can make the zip file and all its required content for color picker into a single piece of code that can be used in such a manner

    -You can host the modified form source codes to your Dropbox Account, Google Drive or Box account. From there, you have to get the direct URL of the file.

     

    how can i pretty much add this after my jotform iframe code in my wix html element and expect to see it show up nicely?

    -As instructed, you can save the modified source codes as HTML file > Save/upload it to your Dropbox Account, Google Drive or Box > Get the full file path and place it as the "src" value of the iframe codes as example below:

    <iframe id="JotFormIFrame" allowtransparency="true" src="https://www.dropbox.com/s/yxf6s8jfsphhjfb/colorpicker.html" frameborder="0" style="width:100%; height:19568px; border:none;" scrolling="no"></iframe>

     

    another issue, do you think this would cause a very lon obviously visible scroll bar? 

    -I think so. Specially, if you have a long form.

     

    also, how do i go about capturing what users set as their colors? can jotform somehow read the values or let me see them in any visual or alphabetical way?

    -Unfortunately, you will have to know the colors they choosed using the HEX codes. You can use http://www.colorhexa.com to search for the color information.

     

    also, how do i go about capturing multiple colors, as in how do i condition a widget like this to begin with so i can have mutliple ones that kick in per different conditions? is that even possible?

    -The Multiple Color is possible but you will have to add another text box field to your form and do the same process from the first color picker.

    -The conditional logic is possible. But since we have use HEX Codes, that would require you a bunch of conditional logic. I consider this too complicated to have. You may consider switching on using dropdown field and define the color.

    ----------------------

    What I could suggest is to finish your form and be sure to add the "Text Box" field so we can add the color picker "Class" value. Without the finish form, we won't see the actual output of the form - we can't proceed on giving you the workaround.

    Or, you can always see this example output: http://formdemos.awardspace.biz/formTemplate76.html from the thread answered by colleague Abajan.

     

    Thanks

  • Profile Image

    Answered by oseojoy on August 13, 2013 at 02:54 PM

     

    PLEASE NOTE EDITS BELOW

    Hi welvin

     

     

    i had to update my form via multiple duplicates for safety and backup reasons. the final version of the form i would like to add this feature to is http://form.jotform.us/form/32245250202135

     

    UPDATE: 

    i guess my main concern right now is should i add into the text file before i save it as html or afterwards once i get my embed code from my hosting source, add this line to wix iframe widget? and exactly after which or before which tag. i did not see a body tag do i need to create a body tag and put it immediately before the close body tag?

     

    also how do i do this for three interdepenet/conditioned choices for color. i have made the fields and set the conditions. then downloaded my source code and changed the class type on all three of them. then added the code line provided like this after everything. 

     

     

     

    saved as .html. ran with firefox and did not see any effect once i clicked onto the first color field. unlike your demo form that is activated with a click

     

     

    what have i done wrong? thanks

     

    my js is now here http://yourjavascript.com/1071685413/jscolor.js

    i tried adding it instead of the js file in src section also to no avail, do i need to use href command?

    i also used it inside of the /form tag right befor it and it still didnt work. gonna try adding it to iframe on wix instead and see what occurs there. the instructions by abajan just said before/body and am lost as you can see.

  • Profile Image
    JotForm Support

    Answered by Welvin on August 13, 2013 at 04:58 PM

    Hi,

    The Process will be:

    1. Get your Form Source via this URL (copy/paste to your browser: view-source:http://form.jotform.us/form/32245250202135. Copy the codes in the browser window and paste it to any text editors you have. From the source codes, you'll see the closing body tag at the bottom.

    2. You should host the jscolor.js to the provided website. You can use this output: http://yourjavascript.com/4113151883/jscolor.js

    3. Add the jscolor.js file before the closing </body> tag. This line: 

    <script type="text/javascript" src="http://yourjavascript.com/4113151883/jscolor.js"></script>


    4. Find the Text Box class element (class=" form-textbox color")from the give source codes and add the word "color" to it: See this image:

    From (class=" form-textbox") to (class=" form-textbox color color" )

    or

    From (class=" form-textbox validate[required]") to (class=" form-textbox validate[required] color")

    5. Save the File as HTML. 

    6. Upload the HTML file to your server or to any free file hosting sites and get the full HTML path and use it as the "src" value of the iframe codes. Below example:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//pastehtml.com/view/dccto0hvo.html" frameborder="0" style="width:100%; height:19627px; border:none;" scrolling="no"></iframe>

     

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    7. Paste this iFrame Codes to your Wix Widget Editor.

    8. Your done.

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on August 13, 2013 at 05:05 PM

    It's working for me. Screenshot per browsers: 

    1. FireFox: https://shots.jotform.com/welvin/screen/5rkrk927pa.png

    2. IE9: https://shots.jotform.com/welvin/screen/sz0o2o0jjs.png

    3. Chrome: https://shots.jotform.com/welvin/screen/npbzbtcct6.png

    Thanks

  • Profile Image

    Answered by oseojoy on August 13, 2013 at 05:12 PM

    THANK YOU. THAT CLEARED IT UP. i just have to wait til i get to my other computer tonight because some of the images are wrong nad i have to reupload them before i get the source code.

     

    i also have 2 tiny bity issues, one my "other" option in the last survey field is misaligned, needs to be under facebook. 

    and back buttons are messed up, i originally wanted no back buttons, how can i get them to look normal again, which part of injected css do i need to remove. i do want a back button next to my submit button as well, but the one i used from the css provided before did not work when i clicked on it on the last page of the form.

     

    once i get the above 2 issues resolved and reupload my required images. i will do as you just explained so very clearly. thanks again for all the help

     

  • Profile Image
    JotForm Support

    Answered by Welvin on August 13, 2013 at 06:01 PM

    Hi,

    Please check your new thread: http://www.jotform.com/answers/255895. We have responded you there about the Radio Button and the Back Buttons.

    Thanks

  • Profile Image

    Answered by oseojoy on August 14, 2013 at 12:25 AM

    have seen it and will be attempting the fixes. i tried what your colleague had cloned in his post from yours, 2nd page was all wrong, but ignoring that, it still did not look right. so im hoping to play around with values and get it right as i know how to identify fields and ids now thanks to you guys.

     

    will report back there if i had any issues remaining and then once i attempt a clean download of my source and try this, i will report back the results. here.

     

    i just feel jotform always has a surprise in good ways for me, and although my boss was not impressed at all by the color picker thing and preferred people to say "words" like silver, gold, or whatever instead, i feel like it is such a better option for so many other applications. you'll see i will probably attempt to use it (or possibly a similar widget) for another client of ours tomorrow on a bunch of cell phone customization forms ;) but i will be back and report. just the fact you can mix and match a 3rd party js code into jotform's premade code is uber amazing to me!

  • Profile Image

    Answered by khrisell on August 14, 2013 at 02:28 AM

    Hello oseojoy,

    In behalf of my colleagues, You are most welcome.

    We are glad to be any help with your JotForm Needs.

    Feel free to contact us anytime if you have further questions or inquiry.

    Thank you for using JotForm.