Feature request: dynamic text overlays widget

Hello:

We have created a form for customers / alumni to order a commemorative personalized brick.  In the form we have a text field and ask "Please type below EXACTLY how you would like Your Brick to Appear"

Was wondering if there is a Widget that once they type in their information, would allow or provide a preview of what their typed text would look like on the brick?

An example of what I am referring to above is on Vista Print web-site.  When ordering a business card, I type in the text and they have a preview button that shows me what the business card will look like based on text that I typed in.  I have included a screen shot of this example.

Thanks,

Robert S

Hi Robert!

Even though we do not have a widget that would allow to add text to an image dynamically, I have created a sample form using three Short Text Entry fields (one for each line on the brick), a Text field containing the image of the brick and 3 additional Text fields that will dynamically capture data from the Short Text Entry fields. I have used CSS code to move the Text fields to their respective positions on top of the brick. Please clone the form to inspect the setup and decide if this might fit your requirements. After cloning the form, you can select any of the Text elements and click on Edit Text to change the font size, font family, color, etc.

Form: https://form.jotform.com/92176264137964

Guide: How-to-Clone-an-Existing-Form-from-a-URL

Guide: Pass-an-Input-Field-to-a-Text-Field

I have escalated this thread as a feature request, so that we might possibly see this widget in the future. You will be notified via this thread if there are any updates.

Please let us know if you have any questions.

Thank you very much. I was successful at cloning your form. Was hoping
you could assist me in making a few slight adjustments to where the text
appears on the image.
1. Is it possible to move all 3 text lines up slightly on the image?
2. Is it possible to have all 3 text lines centered on the image?
I'm guessing this will require additional CSS code?
Thanks,
Robert S
https://form.jotform.com/92176559300155
...

I would suggest a more dynamic option of populating the text field so you can adjust the margin/padding automatically. Please do the following:

1. Remove all current text fields in the form.

2. Insert a new Text field.

3. In the text field, add a table with one cell only.

3. Insert the fields and align them properly:

4. Go the table properties > Advanced tab > insert the following inline CSS styles:

height: 361px; background: url('https://www.jotform.com/uploads/denis_calin/form_files/istockphoto-131402851-612x612.5d49d08677af24.17081739.jpg') center center / cover; margin-left: auto; margin-right: auto;

Adjust the values when necessary such as the height.

You can see the output here https://form.jotform.com/92177230822959.