JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
Can you make the Image Upload Preview widget display the preview window by default?Asked by cgrouge on March 09, 2016 at 01:58 PM
The image preview is great but is there a way to make the preview image area display by default? Or some way to include a border around the preview area with a set width and height so there isn't a big white space on the form when an image hasn't been uploaded yet?
Ideally I want the preview area to be gray with the text Image Preview visible. Something like this but with the text "Image Preview":
Then when someone uploads an image, the image will be previewed there.
Is this possible?
Thank you in advance!!
The image preview widget should not have that large amount of space below it, whether or not the preview is being shown. I checked the fields CSS and there is a large amount of padding added to the bottom:
You can either remove the padding and the field will have much less space or you can add your border to the field itself:
border : solid 1px;
Here is what the form would look like with the border added:
So, I had to re make the form I originally asked about, here is an updated link:
The height of the Image Preview widget is fine, what I need is a way to show the preview window by default. Right now it only appears when an image is uploaded. Or is there a way to add css styling to the widget? When I click on the button container (not the parent container) it doesn't show an id or class to add styling to. Here is what I'm talking about:
I've tried adding style to .form-input-wide jf-required div but nothing happens.
Could you try to use this ID of that field:
#id_57 is ID of image preview field.
For example I added only background color for testing purposes:
Now, I'm not sure if you just wanted to show that window like that or if you wanted to add something else to it.
Anyhow, please let me know if that could work for you, or you have something else in mind.
I don't want to make edits to #id_57. After trying something new I got this:
background-color : #555555;
I thought this was it but after testing it, it doesn't work the way I need it to. With this custom field css, you can add an image but it pushes this custom field down rather than the preview winow laying over top of the background color:
On my form: https://form.jotform.com/60686534457162 I want the Image Preview Widget to look and function like #id_5 and #input_5, but when an image is uploaded I'd want a preview of the image to display over top of the background image.
Since the preview section is not shown until an image is uploaded and will be hidden until an image is previed. It is not possible to have a placeholder image that is always shown. Increasing the area of your field does not compensate for the area that will be added when the preview is shown. If you add 100px of padding to the bottom of the field, when the preview is shown, it will also have 100px of padding at the bottom, in addition to the area that is added by the preview window. The preview portion of the widget is its own section.
Is it possible to edit the preview portion of the widget in any way?
It is possible to edit the preview portion as much as you would like. The sizing, frame, everything can be changed. However, the preview portion of the widget is not shown until a file is added to the preview. Any changes made would not be visible unless there was a file previewed. You could make the preview frame huge, but the widget would not show the increased area until a file was selected.
Ok, that makes sense. Now is it possible to edit the widget or create a new widget exactly like this one but shows the preview portion by default?
Unfortunately, creating and adding new widgets is a bit more complex. Changing a widget widget will cause any form currently using it to have different behavior than it did previously and creating a new widget with slightly different functionality would likely be too time consuming. It would likely be much quicker to adjust the layout of the form to compensate for the current functionality of the widget. We will be more than happy to help with whatever that would require.
That's completely understandable. Thank you for the assistance on this! I will make do with what I have here.