How can I add text to a picture from customer input text field.

  • crusadersignsshawca
    Asked on January 24, 2018 at 10:14 PM

    I see this form for custom imprinting

    and when a customer types their name it appears in the photo

    How can I do this using jotform

    thanks

    Ken

    Jotform Thread 1361374 Screenshot
    Page URL: https://www.gettingpersonal.co.uk/gifts/personalised-wooden-wine-bottle-coaster-just-add-wine.htm
  • BJoanna
    Replied on January 25, 2018 at 4:28 AM

    As far as I know, the only way this could be achieved with Jotform is to place the Text field over the image with the CSS code and to pass the value from some other field to the Text field. 

    1516872285demo Screenshot 10

    Here is a demo form that I created: https://form.jotform.com/80241752040949 

    Feel free to test it and clone it. 

    We also have Draw on Image widget that you can check.

  • crusadersignsshawca
    Replied on January 25, 2018 at 8:43 AM
    PHAgZGlyPSJsdHIiPlRoYW5rIHlvdS4uLlBlcmZlY3QhPC9wPgo8ZGl2IGNsYXNzPSJxdW90ZSI+
    T24gSmFuIDI1LCAyMDE4IDE6MjggQU0sIEpvdEZvcm0gJmx0O25vcmVwbHlAam90Zm9ybS5jb20m
    Z3Q7IHdyb3RlOjxiciB0eXBlPSdhdHRyaWJ1dGlvbic+PGJsb2NrcXVvdGUgY2xhc3M9InF1b3Rl
    IiBzdHlsZT0ibWFyZ2luOjAgMCAwIC44ZXg7Ym9yZGVyLWxlZnQ6MXB4ICNjY2Mgc29saWQ7cGFk
    ZGluZy1sZWZ0OjFleCI+IA0KDQogICAgDQogICAgICAgIA0KICAgICAgICANCiAgICANCiAgICA8
    ZGl2Pg0KICAgICAgICA8ZGl2IHN0eWxlPSJoZWlnaHQ6MTAwJTt3aWR0aDoxMDAlO2JhY2tncm91
    bmQ6I2VlZWVlZTttaW4taGVpZ2h0OjMwMHB4O2Rpc3BsYXk6aW5saW5lLWJsb2NrO2ZvbnQtZmFt
    aWx5OiYjMzk7bHVjaWRhIGdyYW5kZSYjMzk7ICwgJiMzOTthcmlhbCYjMzk7Ij4NCiAgICAgICAg
    ICAgIDxkaXYgc3R5bGU9Im1hcmdpbjo1MHB4IGF1dG87Ym9yZGVyOjFweCBzb2xpZCAjZGRkZGRk
    O2JhY2tncm91bmQ6I2ZmZjt3aWR0aDo1MCU7bWluLXdpZHRoOjUwMHB4Ij4NCiAgICAgICAgICAg
    ICAgICA8ZGl2IHN0eWxlPSJiYWNrZ3JvdW5kOm5vbmUgcmVwZWF0IHNjcm9sbCAwIDAgIzQ1NDU0
    NTtmb250LXNpemU6MTRweDtjb2xvcjojZmZmZmZmO2hlaWdodDozNHB4O3BhZGRpbmc6OHB4IDEy
    cHgiPg0KICAgICAgICAgICAgICAgICAgICA8ZGl2IHN0eWxlPSJwYWRkaW5nOjhweDtmbG9hdDps
    ZWZ0Ij4NCiAgICAgICAgICAgICAgICAgICAgICAgIEEgbmV3IHJlc3BvbnNlIGhhcyBiZWVuIHJl
    Y2VpdmVkOg0KICAgICAgICAgICAgICAgICAgICA8L2Rpdj4NCiAgICAgICAgICAgICAgICAgICAg
    PGEgaHJlZj0iLy93d3cuam90Zm9ybS5jb20iPjxpbWcgc3JjPSJodHRwczovL3d3dy5qb3Rmb3Jt
    LmNvbS9pbWFnZXMvbG9nbzIucG5nPzIiIGFsdD0iSk9URk9STSIgaGVpZ2h0PSIzNiIgYWxpZ249
    InJpZ2h0IiBib3JkZXI9IjAiIC8+PC9hPg0KICAgICAgICAgICAgICAgIDwvZGl2Pg0KICAgICAg
    ICAgICAgICAgIDxkaXYgc3R5bGU9InBhZGRpbmc6MjBweCI+DQogICAgICAgICAgICAgICAgICAg
    IDxkaXYgc3R5bGU9ImRpc3BsYXk6aW5saW5lLWJsb2NrO3dpZHRoOjEwMCU7bWluLWhlaWdodDoz
    MDBweCI+DQogICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IHN0eWxlPSJjb2xvcjpncmF5O2Zv
    bnQtc2l6ZToxMnB4O21hcmdpbi1ib3R0b206MTBweCI+DQogICAgICAgICAgICAgICAgICAgICAg
    ICAgICAgQW5zd2VyZWQgYnkNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8c3Ryb25nPg0K
    ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBCSm9hbm5hICAgICAgICAgICAgICAgICAg
    ICAgICAgICAgIDwvc3Ryb25nPg0KICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+DQogICAg
    ICAgICAgICAgICAgICAgICAgICA8cCBzdHlsZT0ibWFyZ2luOjEwcHg7d2lkdGg6MTAwJTttYXgt
    d2lkdGg6MTAwJSI+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9wPjxwPkFzIGZhciBh
    cyBJIGtub3csIHRoZSBvbmx5IHdhecKgdGhpc8KgY291bGQgYmUNCmFjaGlldmVkIHdpdGggSm90
    Zm9ybSBpcyB0byBwbGFjZSB0aGUgVGV4dCBmaWVsZCBvdmVyIHRoZSBpbWFnZSB3aXRoIHRoZSBD
    U1MNCmNvZGUgYW5kIHRvIHBhc3MgdGhlIHZhbHVlIGZyb20gc29tZSBvdGhlciBmaWVsZCB0byB0
    aGUgVGV4dCBmaWVsZC7CoDwvcD4NCjxwPjxpbWcgc3JjPSJodHRwOi8vd3d3LmpvdGZvcm0uY29t
    L3VwbG9hZHMvZm9ydW0vQkpvYW5uYS8xNTE2ODcyMjg1ZGVtby5KUEciIGFsdD0iMTUxNjg3MjI4
    NWRlbW8uSlBHIiAvPjwvcD4NCjxwPkhlcmUgaXMgYSBkZW1vIGZvcm0gdGhhdCBJIGNyZWF0ZWQ6
    wqA8YSBocmVmPSJodHRwczovL2Zvcm0uam90Zm9ybS5jb20vODAyNDE3NTIwNDA5NDkiPmh0dHBz
    Oi8vZm9ybS5qb3Rmb3JtLmNvbS84MDI0MTc1MjA0MDk0OTwvYT7CoDwvcD4NCjxwPkZlZWwgZnJl
    ZSB0byB0ZXN0IGl0IGFuZCA8YSBocmVmPSJodHRwczovL3d3dy5qb3Rmb3JtLmNvbS9oZWxwLzQy
    LUhvdy10by1DbG9uZS1hbi1FeGlzdGluZy1Gb3JtLWZyb20tYS1VUkwiPmNsb25lDQppdDwvYT4u
    wqA8L3A+DQo8cD5XZSBhbHNvIGhhdmUgPGEgaHJlZj0iaHR0cHM6Ly93aWRnZXRzLmpvdGZvcm0u
    Y29tL3dpZGdldC9kcmF3X29uX2ltYWdlIj5EcmF3DQpvbiBJbWFnZTwvYT4gd2lkZ2V0IHRoYXQg
    eW91IGNhbiBjaGVjay48L3A+ICAgICAgICAgICAgICAgICAgICAgICAgDQogICAgICAgICAgICAg
    ICAgICAgIDwvZGl2Pg0KICAgICAgICAgICAgICAgIDwvZGl2Pg0KICAgICAgICAgICAgICAgIDxk
    aXYgc3R5bGU9ImJhY2tncm91bmQ6IzQ1NDU0NTtmb250LXNpemU6MTJweDtwYWRkaW5nOjZweCAx
    MHB4O2hlaWdodDoyMHB4O2xpbmUtaGVpZ2h0OjE4cHgiPg0KICAgICAgICAgICAgICAgICAgICA8
    YSBocmVmPSJodHRwOi8vd3d3LmpvdGZvcm0uY29tL2Fuc3dlcnMvMTM2MTM3NC1Ib3ctY2FuLUkt
    YWRkLXRleHQtdG8tYS1waWN0dXJlLWZyb20tY3VzdG9tZXItaW5wdXQtdGV4dC1maWVsZC0iIHN0
    eWxlPSJjb2xvcjojZmZmZmZmO2Zsb2F0OnJpZ2h0Ij5WaWV3IHRoaXMgdGhyZWFkIG9uIGJyb3dz
    ZXIgwrs8L2E+DQogICAgICAgICAgICAgICAgICAgIDxhIGhyZWY9Imh0dHA6Ly93d3cuam90Zm9y
    bS5jb20vYW5zd2Vycy8xMzYxMzc0LUhvdy1jYW4tSS1hZGQtdGV4dC10by1hLXBpY3R1cmUtZnJv
    bS1jdXN0b21lci1pbnB1dC10ZXh0LWZpZWxkLT9rJiM2MTtkYjEwNGEwYmJkYzFiYjBhOWM4YTg3
    OTNlODNjYmEzOCZhbXA7dW5zdWJzY3JpYmUmIzYxOyIgc3R5bGU9ImNvbG9yOiNjY2NjY2M7Zmxv
    YXQ6bGVmdCI+VW5zdWJzY3JpYmUgVGhyZWFkPC9hPg0KICAgICAgICAgICAgICAgIDwvZGl2Pg0K
    ICAgICAgICAgICAgPC9kaXY+DQogICAgICAgICAgICA8bGFiZWwgc3R5bGU9ImNvbG9yOiNlZWVl
    ZWUiPjE1MTY4NzI0OTg8L2xhYmVsPg0KICAgICAgICA8L2Rpdj4NCiAgICA8L2Rpdj4NCg0KDQo8
    L2Jsb2NrcXVvdGU+PC9kaXY+
    ...
  • Marvih
    Replied on January 25, 2018 at 10:15 AM

    I don't seem to understand the last reply you made. 

    If you wish to attach an image in your reply. Kindly follow this guide https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum

    Thank you,