Adding Images to a Form

This article will go over the steps to add an image to a form.

Updated over a week ago

Attention: Apricot is now Bonterra Case Management. Please bear with us as we update our screenshots to match our new name.

There may be times when you want to use an image, such as a logo, on a form. You can do this by adding a link to the image to a Label (HTML) field.

Adding a Label (HTML) Field

In order to add an image to your form, you will first need to pull a Label (HTML) onto your form. You can find this field type under the Special category in your Field Options palette, as shown below:

Head to this article if you are unfamiliar with the process of editing forms.

Hosting an Image in Shared Files

Many times, you may want to use an image that is currently not hosted online. You can use the Shared Files to get around this limitation. Additionally, you can use this method if you are afraid the URL to an image that you are using elsewhere might change (or the hosting service may change the image).

Note: For both Secure Web Forms and Intake Forms, images must be hosted outside of Apricot Shared Files or on a public web page.

  1. First, make sure the image you want to use is saved onto your computer. In our scenario we will use the Desktop.

  2. Optional: you may already have a Shared File Category that you want to use, if you do you may skip these next few steps.

  1. Head to the Administrator tab

  2. Click on Shared Files under Workflow Station

  3. Click on Create New Category

  4. Give the Category a name

  5. Click on Create

  1. Next, we will choose Upload

  2. Select a Category

  3. Click on 'Choose File' and locate the image

  4. Choose Upload

Next, we will need to copy the Image URL.

  1. Click on My Bonterra Case Management

  2. Choose My Shared Files under My Bonterra Case Management Tools

  3. Expand the Category which the image was placed in

  4. Hover over Actions

  5. Right click on Download

  6. Select "Copy link address"

Note: Depending on your operating system and/or browser the wording may be slightly different.

Next, we will head to the form that you are creating/editing and add the image to the Label (HTML) field.

Adding the Image to the Label (HTML) Field

  1. Click the green gear icon to the right of the field you added to open the Field Properties Menu.

Once the menu is open, click the image icon.

  1. Paste the URL that was copied into the "URL" box. It should start out with "https://apricot.socialsolutions.com/upload/download/". If it does not, it did not copy properly.

  2. Click the refresh icon to see a refreshed preview of the image. Note: The text below it will not show up on the form.

  3. You may adjust the Width and Height to re-size the image.

  4. Click OK.

Finally, remember to publish your form after making any changes.

Did this answer your question?