Using HTML fields to Insert Images, Videos, Tables and Callouts to your Form Design

---

One of the fields you can add to a Form Design is an HTML field. You can use this field to insert images and videos, or to add a callout box with customised colours and fonts.

These HTML fields are often built and customised during the implementation process. However, using our HTML editor tool you can customise these fields with little or no experience of HTML, formatting the area to display as required. In addition to the HTML editor, it's also possible to view the code that this creates and if necessary, the Customer Success Team will be able to assist you in creating the form design you envisage.

---

This article covers:

• How to use the HTML Editor
• How to insert images in Form Designs
• How to insert videos in Form Designs
• How to insert tables in Form Designs
• How to insert callout boxes in Form Designs

---

To use HTML content fields to insert images, videos and callouts into your Form Designs

1. Navigate Engagement >> Form Designs.

2. Select Add Field in your chosen form design.

3. Select HTML Content in the drop down list of field types.

4.  The HTML editor will appear as below.

• By hovering over each icon a description of what their function will also appear.

---

To Insert Images using the HTML Editor Tool

To insert an image into a form design the image must be stored on your intelliHR platform in Settings >> Organisation Documents.

1. Navigate Settings >> Organisation Documents.

2. Upload the relevant image file; make public if you wish the image to be viewed by employees viewing the form while not on the platform e.g. from their email.

3. Right click on the document name and select Copy Link Address

4. Navigate to Engagement >> Form Designs >> Edit next to the relevant Form Design

5. Select HTML Content in the drop down list of field types.

6. Select the Image icon (Photo).

Note: There will also be a folder option labelled browse at this point; however, this option is currently not active and cannot be used.

7. Paste the link into the box that appears.

8. Save.

Tip: Once a video or image has been inserted into the HTML content this will be aligned on the left by default. If you wish to align the image/video in the centre or on the right select the align icon on the top line of the editor tool and select the alignment you require.

---

To Insert Videos using the HTML Editor Tool

To insert a video into a form design you must first obtain the URL where the video is hosted or the embed code of that video. The video must be hosted online, eg. Youtube, Vimeo. Videos hosted on a Intranet will not pull through. If you are unsure where to find this please let the Customer Success Team know and they will be happy to help you.  Once you have the URL or embed code:

1. Navigate to Engagement >> Form Designs >> Edit next to the relevant Form Design.

2. Select HTML Content in the drop down list of field types.

3. Select the Video icon (Camera).

4. Either paste the URL where the video can be found, or select the icon with the chevrons facing in opposite directions and paste in the embed code of the video.

5. Save.

Tip: If you don’t want to show an image or video within a form design, embedding the file’s URL on a word within the form design is also an option. Simply highlight the chosen word, click on the Insert Link button and paste the link address. Tick the open in new tab option before clicking insert to make sure that the video or image opens in a new tab and the viewer does not lose any half-completed forms.

---

To Insert a Table using the HTML Editor Tool

You can create a table to tabulate the representation of your information within a form design. The table feature comes with essential editing features such as table header, split, merge, background colour, table style and cell style options.

1. Navigate to Engagement >> Form Designs >> Edit next to the relevant Form Design.

2. Select HTML Content in the drop down list of field types

3. Select the Table icon 

4. Choose the number of columns and rows you wish to create and click on the table picker.

5. After creating your table, you can fully customise the borders and cells.

---

To Insert Callout Boxes using the HTML Editor Tool

Callout boxes are used to present information about the form, such as instructions or details about who the form will be visible to once complete, and often contains important information that must stand out from the rest of the form. 

1. Select the Callout icon (Megaphone)

2. Select the colour of your callout box.  There is a list of pre-set colours or you can select background and enter the HEX colour to match your company branding.

3. Select the border colour of your callout box in the same way as above.

4. Enter the text you wish to display in the callout.

5. Amend the font type and size using the editor tools in the bar above.

6. Save.

Note: If you require any further assistance using the HTML editor in Form Design, please contact your Customer Success Team for help with changes.