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.
How can I show an image inside of a text area using CSS?Asked by jameshogan on November 07, 2014 at 05:21 PM
Also, if an image can be placed inside a text area, will the image show in the PDF Submission?
Really appreciate all the help!
How about using the image field? It can be found under Form Tools:
See this example: http://form.jotform.co/form/43107308046851
The images can be shown on you PDF submission, you just have to check the "Show headers and text" option when you are on the submission view:
Hope this helps you, let us know if you have more questions, we will be glad to assist you.
I need to only show specific images based on conditions... as per my initial tread http://www.jotform.com/answers/455532
That is why I want to place an image in a text area so this can happen...
I'm not sure if I understood it correctly.
But this is how I see it:
1. You have these HTML fields which has icons on them that represents a warning message on the choices you have in "Identified of Key Hazards"
2. When a checkbox is ticked, you want the HTML field to show
I've cloned your form and if what I mentioned is that one that you are looking for, you can actually display/show the free HTML field directly with the condition.
You can check the live form here: http://form.jotformpro.com/form/43107111452945?. Let me know if that is what you want to achieve. You can clone my form by following this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL
Quick screenshot demo of the cloned form:
1. I chose "Hotwork Operations" in the checkboxes.
2. It will then display the HTML field with the warning icon for "Hotwork Operations".
3. This is how my "Conditions" setting is set up.
I haven't tried doing a test submission, but I believe my colleague, BDAVID, has pointed out the "Show Headers & Text", this should show the HTML fields that are displayed by conditions only.
Let me know if I misunderstood the workflow process that you have in mind.
There are 2 items to clarify...
I have tried setting the conditions on the HTML Fields before, however when I set the "Show Headers & Text" all HTML Fields show regardless of the condition setting.
What I'm looking to do now is insert an image in the background of a Text Area - If an image can be placed in a Text Area it may show up in the PDF Submission based on Conditions.
I'm trying this as I need to show specific images in the pdf.
To confirm, you would like to change up your text area, to display an image, when certain conditions are met and in turn, have that displayed, in your submission data?
You stated that you are able to see the image in the form builder, however it does not display when previewing the form.
Can you tell us which form you are working on, so that we can take a look to better assist you?
Just to add my two cent's worth to the discussion, is it my understanding that you have been using conditions in concert with the Show Headers and Texts feature to toggle the visibility of an image? If so, that wouldn't work. The Show Headers and Text feature controls whether headers and text elements are displayed in emailed notifications. However, as Charlie has earlier stated, it is feasible to place an image in an HTML field and have it shown or hidden based on a condition or conditions.
As far as placing an image in a text area goes, my research indicates that this isn't feasible. Even if we were to get it working in one browser, it would likely fail in others.
On your first question - Yes! you are correct.
On your second - Yes! at the time I was only able to see the image in the editor mode.I have since figured out the CSS.
I'm working on form: 43074216409956
I have tried to set conditions on the HTML Fields and have it shown or hidden based on a condition or conditions. But regardless of the condition(s) all HTML Fields Show in the PDF. Maybe I have missed something on condition settings - please advise!
Conditions for the HTML Field is only attributable to the form when online, unfortunately it does not seem to be attributable on the PDF Report/Submission.
I was able to figure out the CSS to place an image in the background of a text area across all browsers (IE10, Chrome, FireFox, Safari). But CSS is again only attributableto the online form and not on the PDF Report/Submission.
I do apologize, unfortunately for the HTML fields, the conditions do not carry over to the submissions page. If you select to show the fields in your submissions, all of them will show regardless of the conditions in the forms.
As it relates to the CSS in the textarea, the background picture, would not show up on the submission data, as it only captures the data entered into the form and not the styling of the form itself.
I do apologize. Please inform us, if there is anything further that we can assist you with.