How to Add Images to Your Forms

Woorise offers several flexible options to include images in your forms, allowing you to create visually engaging and user-friendly experiences. You can insert images directly into choice fields such as radio buttons or checkboxes, making it easier for users to select between visual options. Additionally, images can be added within the field description area, either just after the field label or below the input field, helping to provide context, instructions, or visual cues related to the form question.

Another common method is placing standalone images between form fields using HTML blocks, which is ideal for adding banners, logos, or visual separators. These image placements can improve the flow and design of your form, highlight important sections, or support branding efforts. Whether you’re creating a quiz, survey, or product order form, adding images can significantly enhance both usability and visual appeal.

Add images in choice-based fields

Woorise allows you to display images as selectable options in choice-based fields such as Multiple Choice, Radio Buttons, Checkboxes, and Quiz fields. There are two ways to achieve this. The recommended method is to enable the Use Image Choices option within the field settings, which gives you more control and flexibility over how images are displayed alongside each choice. Alternatively, for simpler use cases, you can use the dedicated Image Choice field, which offers a quicker setup when you only need basic image selection functionality.

Use Image Choices option

1. Select a choice-based field where you want to display images, such as Multiple Choice, Checkboxes, or a Quiz field.
2. In the General tab of the field settings, enable the Use Image Choices option.
3. Once enabled, click Edit Choices to customize each option. You’ll see an Upload Image icon next to each choice—click it to upload or select an image from your media library.

4. Enabling Use Image Choices will also reveal a new Image Choices tab, where you can further customize the layout, alignment, and size of your images for better visual presentation.

Image Choice field

1. From the Standard Fields section drag and drop or click the Image Choice field.
2. Click Edit Choices to customize each option. You’ll see an Upload Image icon next to each choice—click it to upload or select an image from your media library.
3. In the Appearance tab you can customize the Choice Label Visibility or se the Choices Columns.

4. When an Image Choice field is added to your form, a new Image Choice Styles tab becomes available in the Form block settings on the Create page. This tab allows you to customize the appearance of the images, including their style, layout, and size.

Add images using the HTML field

The HTML field allows you to insert custom content, including images, between form fields. This method is especially useful if you want full control over the image placement and the ability to apply conditional logic.

To add an image using the HTML field:

1. Go to the Sites from the main menu and open the Media section from the three-dot menu.
2. Upload your image, then click Copy URL to clipboard to copy the image link.
3. Add an HTML field to your form and paste the following code into it, replacing the # with your copied image URL.

<img src="#" alt="" style="max-width: 100%; height: auto;">

Add an image inside any field

You can display an image within any field by adding it to the field’s Description. This allows you to place the image either below the field label or underneath the input area. It’s a great way to provide visual context or instructions directly within a field.

To add an image in the field description:

1. Navigate to Sites from the main menu and open the Media section using the three-dot menu.
2. Upload your image and click Copy URL to clipboard to get the image link.
3. Click on the field where you want the image to appear, and in the Description settings, paste the following code—replacing # with your image URL.
4. In the Appearance tab of the field settings, and under Description Placement you can choose whether you want to show the description Below Inputs (default) or Above Inputs. This controls where the image will appear in relation to the input field.

<img src="#" alt="" style="max-width: 100%; height: auto;">