Input Fields Over An Image

This guide will explain how to place an input field on top of an image, so users can type directly over a specific part of the image.

We will create input fields on an image using the “Image Input Field” feature, and will capture those values into Hidden fields. These Hidden fields can then be easily mapped to corresponding Salesforce fields.

In this example, we will create input fields on the image below.

image
  1. Initial Setup:
  • Drag and drop an “Image Input Field” onto your form.
  • Rename the field as needed.
image
  • Drag and drop “Hidden” fields onto your form to capture values.
  • Label each Hidden field as needed.
image
  1. Configuring The “Image Input Field” Field:
  • Click the pencil icon of the “Image Input Field” field.
  • Enter the public URL of the image users will interact with in the “Image Link URL” field.

image
  • Fill in the Image Input Field Placement Configurations.
image
Column
What it Means
Destination Field ID
The field ID of the form field you want to map into the image. This must match one of your form’s component IDs.
Input Type
The kind of input to render—e.g. “text”, “number” or “Checkbox”.
Default Value
An optional value to pre‑populate the input when the image loads.
X Coordinate
How many pixels from the left edge of the image the left side of this input should start.
Y Coordinate
How many pixels from the top of the image the top of this input should start.
Width
The rendered width of the input in pixels.
Height
The rendered height of the input in pixels.
  • When you configure the Image Input Field, set the attributes for each Hidden field as shown in the image.
  • Here, cbd1-2ac8-ba30 is the field ID of the Hidden field labelled “Ceiling Light Position”.

    • b29b-1d1b-1abb is the field ID of the Hidden field labelled “Equipment Distance”.

    5c22-7bb0-84e3 is the field ID of the Hidden field labelled "Room Width”.

  • Make sure each field is mapped with:
    • Correct X and Y coordinates (to position it properly on the image).
    • Width and height for the input box sizing.
    • The field ID should match the corresponding Hidden Field you created.
  • Save the changes.
  1. Test Your Form:
  • Try your form.
  • The input fields appear at the correct locations on the image.
image
  • Data entered is properly stored in the corresponding Hidden fields.
image
  1. Optional: You can map the Hidden fields to Salesforce fields using the Salesforce connection.
Example.json4.1KB

For any questions, please contact us - [email protected] or the Formyoula in-app chat. 🙂