Shack Forms Documentation

How to Add an Image Above a Field in Shack Forms

In some use cases, you may want to add an image above (or below) a field in your Shack Form.

You can achieve this by using the "Text separator" field.

In my demonstration, I added a header image above the top "Contact with" field of the static form embedded in a Joomla article:

end result

I also can display this image below the field:

image below the field

Such a task is a two-step process:

  1. Get your required image URL
  2. Create a "Text separator" field with the image HTML tag.

Let's take a look at this process in more detail.

Step #1. Get your required image URL

  • In your Joomla administrator panel, go to "Content" > "Media":

go to content media

  • You will be taken to the "Media" screen. Select your require image:

select your required image

  • Point your mouse to the image text link and right-click it. In the drop-down context menu, click "Copy link address":

copy the image link address

Paste the link in a text editor. Delete what you see before the images bit.

The link I copied in my "Media" screen is as follows: 

https://localhost/shackforms/images/headers/walden-pond.jpg.

Once I deleted the bits of this link that I don't need, the link becomes as follows:

images/headers/walden-pond.jpg.

Excellent! You are now ready to place this image above or below of a required field in your Shack Form.

Step #2. Create a "Text separator" field with the image HTML tag

  • Open up your Shack Forms module to edit its settings.
  • Under the "Module" tab, click "Text":

click text

  • You will see the "Text separator" filed text box appeared. Enter in this box the HTML code of the img tag of your image. In my example, I entered <img src="/images/headers/walden-pond.jpg" alt="Walden Pond" />:

my image tag html code entered

  • Point your mouse pointer to the "Text separator" label. Once the pointer changed to a hand, drag and drop the "Text seaprator" field above or below the required field:

drag and drop the text separator field

  • Click "Save" or "Save & Close".

When you check your form now, you should see the image above (or below) the field, as you intended.

Feel free to use html code to position the image or to ad margin to it. For example:

<br /><img style="margin-bottom: 1px; margin-top: 1px; float: center;" src="/images/---your path to image--" alt="some SEO text about image"><br />