Tech Tip: Adding Images to a Form with Custom HTML in Laserfiche Forms 9.1
By: Eric Cressey
Technical Writer
Strategically placed images can make forms easier to fill out and more attractive. In Laserfiche E-Forms, you can add images to a form using custom HTML blocks. Custom HTML blocks, like sections and collections, aren’t fields; instead, these special items let you enhance a form’s appearance and functionality.
If you’re reasonably confident that your form will be viewed in a modern browser, like Chrome, Firefox, or Internet Explorer 9+, use the custom HTML block’s rich-text editor to easily add images to a form. With the rich-text editor open, click the Insert picture button, select the image you want to add, and click Open.
If your users primarily fill out forms with older browsers (e.g., Internet Explorer 8 or earlier), you can still use custom HTML blocks to insert images. However, you’ll need to use a little HTML to do so.
To add images to a form with custom HTML (older browser support):
1. Host the image on the Forms Server at the following location: C:Program FilesLaserficheLaserfiche FormsFormsimg. Or, if the image is hosted elsewhere on the Internet, note the image’s URL.
2. In a text editor (e.g., Notepad), edit the following HTML to point to the image.
<img src=”http://v-dev-w7x64-26/forms/img/theme/imageName“></img>
- If the image is hosted on your Forms Server, replace imageName with the image’s name (including the file extension).
- If the image isn’t hosted on your Forms Server replace the src URL with the image’s URL.
3. Add a custom HTML block to your form. On the rich-text editor toolbar, click HTML. Paste the HTML from your text editor into the custom HTML block, and click Done.
4. The image will appear on your form. If the image does not appear, ensure the image’s URL is correct.
To adjust an image’s size and positioning, add a CSS class to the image and create CSS rules on the CSS and JavaScript page.
