---
title: "XHTML Output (Image, JobInfo, and Hyperlink) - Lasernet Form Editor 9 "
slug: "xhtml-output-image-jobinfo-and-hyperlink"
description: "In this exercise, you are proposed to continue designing your HTML output by adding an image, JobInfos, and a hyperlink. Read for more information."
tags: ["Form Editor", "Hyperlink", "Images", "JobInfos", "Lasernet 9 ", "XHTML"]
updated: 2026-03-06T07:39:53Z
published: 2026-03-06T07:39:53Z
canonical: "kb.lasernetgroup.com/xhtml-output-image-jobinfo-and-hyperlink"
---
> ## Documentation Index
> Fetch the complete documentation index at: https://kb.lasernetgroup.com/llms.txt
> Use this file to discover all available pages before exploring further.
# XHTML Output (Image, JobInfo, and Hyperlink)
**Applies to:** Lasernet 9
In this exercise, you are proposed to continue designing your HTML output by adding an image, JobInfos, and a hyperlink.
> [!NOTE]
> Note
>
> This article describes a software version that is no longer supported. Although the software will no longer receive updates or technical support, existing documentation, such as this article, will be retained for reference purposes but will no longer be updated. If you have any questions, contact [Lasernet Support](https://support.lasernetgroup.com/new-ticket).
## Exercise
Download and import the attached configuration called **02. XHTML Output (Image, JobInfo, and Hyperlink)** **in Lasernet Developer 9**. Afterward, navigate to the **Forms** section and open the **Sample** form.
Start by adding an image from the external file to the output. To this end, follow these steps:
1. In the output, switch to the **Template** tab.
2. Place the cursor where you want to paste an image.
3. On the Developer toolbar, click **Image**, then click **Local and Remote**, and then click **File...**
1. In the **Choose an image** **file** dialog displayed, select a file, and then click **Open**.
1. Once the image is inserted, drag one of the control points on the sides or corners of the selection box to resize it.
Continue designing your HTML output by adding JobInfos. To this end, follow the steps listed below.
1. Switch to the **XHTML** tab to make adding JobInfos to the input possible.
2. On the Developer toolbar, click **JobInfo**.
3. When a pointer becomes a cross, click the **** element.
Once you are done, repeat steps 7-8 to JobInfo to the **** element.
1. In the output, switch to the **Template** tab.
2. Place the cursor in the first line before a comma and type the following text: **#ContactPersonName#**.
3. Place the cursor at the end of the third line and type the following text: **#SalesID#**.
> [!NOTE]
> Note
>
> When a JobInfo is added to the XML input, it takes automatically a name which is equal to a name of the node to which it is added. To correctly execute the JobInfo in the output, the JobInfo name enclosed in the hash signs (#) shall be indicated. While generating the document, a JobInfo name is substituted with the node value, so you can see the value in the final document.
You are now proposed to add a hyperlink. To this end, follow these steps:
1. In the fourth line, delete the **us** text and place the cursor instead.
2. On the toolbar, click the button that allows you to create a link to a web page.
1. In the **Insert Hyperlink** dialog displayed, type **Our Support Team** in the **Text to display** text box and [**http://www.formpipe.com/Support/**](http://www.formpipe.com/Support/) in the **Address** text box. Once you are done, click **OK**.
1. On the toolbar, click the **Preview** button to view the final result in a browser window.
.png)
## Attachments
- [02.-XHTML-Output-Image-JobInfo-and-Hyperlink.lnconfigx](https://cdn.document360.io/c831ef63-c6b3-48ee-b443-3e33644e4e2e/Images/Documentation/02.-XHTML-Output-Image-JobInfo-and-Hyperlink.lnconfigx)