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

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

    Page URL:
    https://form.jotform.com/60683528545160

    preview preview widget upload preview Make
  • Profile Image
    JotForm Support

    Answered by david on March 09, 2016 at 03:48 PM

    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:

    #id_53 {
        border : solid 1px;
    }

    Here is what the form would look like with the border added:

    https://form.jotform.com/60685945646975

  • Profile Image

    Answered by cgrouge on March 10, 2016 at 10:02 AM

    So, I had to re make the form I originally asked about, here is an updated link:

    https://form.jotform.com/60686534457162

    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.

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 10, 2016 at 11:06 AM

    Hello,

    Could you try to use this ID of that field:

    #id_57{

        background-color: gray;

    }

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

    Best regards.

  • Profile Image

    Answered by cgrouge on March 10, 2016 at 11:32 AM

    I don't want to make edits to #id_57. After trying something new I got this:

    #customFieldFrame_57 {

        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.

  • Profile Image
    JotForm Support

    Answered by david on March 10, 2016 at 11:41 AM

    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.

  • Profile Image

    Answered by cgrouge on March 10, 2016 at 11:43 AM

    Is it possible to edit the preview portion of the widget in any way?

  • Profile Image
    JotForm Support

    Answered by david on March 10, 2016 at 11:47 AM

    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.

  • Profile Image

    Answered by cgrouge on March 10, 2016 at 11:53 AM

    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?

  • Profile Image
    JotForm Support

    Answered by david on March 10, 2016 at 01:07 PM

    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.

  • Profile Image

    Answered by cgrouge on March 10, 2016 at 02:21 PM

    That's completely understandable. Thank you for the assistance on this! I will make do with what I have here.

    Cheers!