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

    How can I show an image inside of a text area using CSS?

    Asked by jameshogan on November 07, 2014 at 05:21 PM
    Hi Raul

     

    Can you advise why I cannot see my custom CSS to show image inside the Text Area?

     

    Please see both Text Box - TEST Field

    and

    Text Area - Lone Working

     

    Both show the image in the editor but not when I open the form link directly

  • Profile Image

    Answered by jameshogan on November 07, 2014 at 05:25 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!

     

    James

  • Profile Image
    JotForm Support

    Answered by BDAVID on November 07, 2014 at 05:39 PM

    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.

  • Profile Image

    Answered by jameshogan on November 07, 2014 at 06:18 PM

    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...

     

    Thanks,

     

    James

  • Profile Image
    JotForm Support

    Answered by Charlie on November 07, 2014 at 07:31 PM

    Hi James,

    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.

    Thank you.

     

  • Profile Image

    Answered by jameshogan on November 08, 2014 at 07:37 AM

    There are 2 items to clarify...

    1.

    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.

    2.

    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.

  • Profile Image

    Answered by Shadae on November 08, 2014 at 10:10 AM

    Hi James,

    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?

  • Profile Image
    JotForm Support

    Answered by abajan on November 08, 2014 at 10:49 AM

    Hello James,

    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.

    Thanks

  • Profile Image

    Answered by jameshogan on November 08, 2014 at 11:04 AM

    Hi Shadae,

    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

     

    Hi Abajan,

    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.

     

     

  • Profile Image

    Answered by Shadae on November 08, 2014 at 01:06 PM

    Hi James,

    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.