# Dynamic HTML Elements

> Dynamic HTML elements enable you to create HTML content that can be dynamically displayed or used in any part of the form while the form is open during runtime. For example, you can assign an image to appear dynamically after a drop down option has been selected, then prompt the user to type in the image item in a text field.

Dynamic HTML elements enable you to create HTML content that can be dynamically displayed or used in any part of the form while the form is open during runtime. For example, you can assign an image to appear dynamically after a drop down option has been selected, then prompt the user to type in the image item in a text field.

## Tutorial

To pass a dynamic HTML element:

1. From the **Create Form** activity > **Properties** panel, open the **FormFieldsCollection** window.
2. Add an **In** argument of type `String` and name it suggestively.
3. Open the Form Designer and drag an **HTML Element** component to your form.
4. In the **Display** tab > **HTML Tag** field, add `p` for a new HTML paragraph.
5. In the **Content** field, add the type of data that you want to pass dynamically by using the expression `{{data.variable}}`, and replace `variable` with the name of the argument created at Step 2.
6. Select the **Refresh on Change** checkbox.
   :::note
   To add an image in an **HTML Element** form field, the image has to be converted to Base64 format.
   :::

To pass an image as a dynamic HTML element :

1. Convert the image to a Base64 string.
2. Save the Base64 string as a workflow variable. For example, `image`.
3. From the **Create Form** activity > **Properties** panel, open the **FormFieldsCollection** window.
4. Add an **In** argument of type String and name it `sampleImage`.
5. Set the Base64 string from Step 2 as **Value**.
6. Click **OK** to close the **FormFieldsCollection** window.
7. In the Form Designer > **Advanced** tab > **HTML Element** component > **Content** field , enter the following expression:
    ```
    
    ```
    :::note
    The **Label/Header** basic components can also be used to pass elements dynamically. This enables you to set dynamic labels and headers for form fields.
    :::