- sweiseAsked on December 10, 2012 at 08:43 AM
My survey form contains three sections which each bundle together a certain number of questions on the same topic. At the end of each section, the questionnaire provides an open ended text-box in which respondents can comment on the reasoning for the choices they made in the respective bundle. Would it be possible to display a red-box around all the question items in the set if the respondent clicks on the final question? I have attached a sketch to better illustrate my intent. Thanks very much in advance!
- JotForm SupportabajanAnswered on December 10, 2012 at 09:31 AM
Yes, upon giving this some thought, I believe it's feasible but the solution would require placing a copy of the form's full source in a web page to which a script would be added to highlight the relevant sections as the comment box is clicked. Would that be suitable for you? (I'll see if I can create a demo to better illustrate the functionality.)
- sweiseAnswered on December 10, 2012 at 09:54 AM
Hi, that be great! I can embbed the form into a web page on my server, but what are the implications? I am not a technical expert.
- JotForm SupportabajanAnswered on December 10, 2012 at 10:07 AM
It should work just fine. I'll see what I can come up with and get back to you.
- JotForm SupportabajanAnswered on December 11, 2012 at 07:11 AM
Actually, no script is required for this at all. CSS can be used. I've come up with a partial solution which needs to be tweaked to work in all (or rather most) browsers.
Anyway, here's a demo containing a portion of your form. Once the mouse is placed over the first comment box a red speech bubble pops up.
- sweiseAnswered on December 11, 2012 at 10:03 AM
That's fully answering my question. Thanks very much! Could you tell me what I should do in order to customize this for all sections of my questionnaire? I suppose I would need to manipulate the CSS file?
- JotForm SupportjonathanAnswered on December 11, 2012 at 10:30 AM
Hi, you can inject custom CSS codes on the form to have this effect -- as what abajan did on his demo form.
You can also clone the demo form http://www.jotformpro.com/form/23444444601952 to have a better understanding of the CSS codes used.
Use this guide -How-to-Clone-a-Form-from-a-Web-Page
Please inform us if you have further inquiry about this.
- sweiseAnswered on December 11, 2012 at 10:54 AM
Alright, I should be able to do this myself. One (hopefully) final question: how I can find out the ID (e.g. "cid_145" etc) of the respective question to which I would like to apply the custom CSS? Thanks!
- JotForm SupportjonathanAnswered on December 11, 2012 at 02:02 PM
Hi, you can see this if you view the html source code of the form on the browser.
For example, using Chrome browser, if you mouse Right-click in the html page/form, there is context option to view source
You can then see the appropriate field with its field id# ... you can then use this in the CSS code.
Hope this help.
- JotForm SupportabajanAnswered on December 11, 2012 at 03:32 PM
I don't know your proficiency level with CSS but if you need further assistance with this, we'd be happy to help as best as we can. As you've probably already figured out, the size of each "speech bubble" will need to be unique because the content of each page of your form is different.
- JotForm SupportabajanAnswered on December 11, 2012 at 07:17 PM
Looks like you got the speech bubbles configured just fine. (I was thinking all along that green would look better than red too!)