User Guide

 

How to Display Images on Secure Forms

How to Display Images on Secure Forms

If you have a form containing various images (backgrounds, banners, icons, photos) and those images are displayed okay when the form is viewed at its non-secure (http://) URL but not at the secure (https://secure) one, or your browser gives a warning about the page containing non-secure elements, the images need to be stored at secure locations (URLs).

If you do not have a secure location at which to store images, clone this form (see Cloning a Form from a Web Page), go to its URL and upload your images there. After uploading the images, do the following:

1. Access the form "Submissions" page



2. Find the image file that was uploaded to the form. Copy the direct image URL. Right click the link, click "Copy link address":




3. Click the My Forms link at the top of the page, find the form containing the images that need to be made secure and click its "Edit" button to load it into the form builder:



4. Click the image whose source URL is to be replaced with what is on the clipboard, click the Image Source button, paste [Ctrl+V] the URL into the box and click OK:
Even though the URL shown above is not a secure one, it will be automatically converted to its secure equivalent whenever the secure version of the form is displayed. However, the same does not obtain for background images (see step 6)

5. Do the same for each subsequent image which needs securing

6. For background images, replace the URL in the injected CSS with the secure (https://secure...) version of the URL that would have been obtained from the submission records of the image upload form.

In other words, the full non-secure URL where the Desert.jpg image (shown above) is located is:

http://www.jotform.com/uploads/Welvin/41814447212954/270031383422945773/Desert.jpg

If you wanted to use that image in the form's background, the URL would have to be changed to:

https://secure.jotform.com/uploads/Welvin/41814447212954/270031383422945773/Desert.jpg



7. After updating all of the image URLs, save the form.


Questions? Please let us know below!

Send Comment

4 Comments...

  • CscProvidence

    Thus far, I use a dummy form to which I have an image element in which I upload the image needed in the true form. This puts the image in the list of "uploaded" images. The URL for all those images, stored in Jotform, seem to work just fine for me.

    The only issue I seem to have is figuring out the URL. I usually display the temporary form as a user would then do a 'inspect' with browser or right click and "open image in new tab". A valse I wish I could avoid, but seems simpler to compare with what you suggest (less steps ?)

    A problem is managing those images. Can we delete any of those images ? (I forget) What happens if a form still is using a deleted image ? (I suspect it gets the 'no image found' thingy.) It doesn't seem to warn about duplicates - it just takes the new upload and tweaks the name (?)

    It would be nice to be able to have 'folders' to organise the images. When the list of images gets long, the selector's behaviour can get affected (becomes slow as it does mini thumb views, ...) Actually, to have a file manager of some sort somewhere in JotForm's user interface. One could mass upload/update images and such (ex: school logos) ...


    I love Jotform. There seems to always have at least one or more ways around any issue ...

  • posnaforms

    How do I insert an image into a form, i.e., a logo picture, that is filed on my computer.

  • beme2014

    I uploaded image through "this form" URL and...the image is gone and nothing happens. Submission is empty for each of my forms. When the image go then?

  • odofertas

    as I can I can add a background image?, eg a png file on a phone and on this image, a text field