Form format for custom product

  • Profile Image
    Dave Walters 
    Asked on July 25, 2016 at 05:08 PM

    Hello - we need to create an interactive form for out client's website, where the end-user types in what they want to be etched on a product (showing text field over the image of a product, w/ the info/image getting sent to a specific address... along w/ being able to submit a payment for the donation. This is a non-profit who is selling customized tiles to raise money for their new building. The following link is a sample they gave me of a similar functionality - typing the name over a brick:  . Please let us know if you have any templates that can do this for us. Thanks! Dave. 

  • Profile Image
    Answered on July 25, 2016 at 09:17 PM

    I have checked the form on the link you shared us and I can see the product image changes dynamically; however, this does not seem to be possible at the moment. 

    You will need to set up the predefined images and then show them based on the user's answer, here is a guide that will help you with that: How-to-Show-or-Hide-Fields-Base-on-User-s-Answer

    However, you may find one of our templates that fits your need, take a look here:

    This guide will help you to apply a template to your form: How-to-use-the-form-templates

    However, if you have questions, you may let us know and we will be glad to help you.  

  • Profile Image
    Dave Walters 
    Answered on July 25, 2016 at 09:45 PM

    Hi -
    the will be only ONE ‘product’, not dynamic; just one style/size of tile; the only thing that would change is the text they type over it, which would be ordered and etched into the tile.
    Let me know if your form software can do this.

  • Profile Image
    Answered on July 25, 2016 at 11:31 PM

    I have made a sample form that works as you need, changing the text dynamically as shown on the form you shared us, here is how it works: 

    Basically what you need to do is, first set up your form, add the product, the options and all that is needed. 

    Then once you have all set up, add a "Text" field to your form: 

    Now, add a "Text Box" which will help us to capture the text and show it on the image: 

    You will need to get the field's name, to get it simply, click on the properties icon and edit properties: 

    Then click on the Advanced tab and click on "Field Details":

    You will get the unique field name, copy that: 

    Then click on the "Text" field and then click on the option "Edit HTML":

    Once there, as the image will be static, you should add it by clicking on the "Add/Edit Image" icon and then pasting the link, then paste the field's name like this "{FieldName}": 

    The next step will be adding a custom CSS code that will help to display the text over the image, this may change depending on the image that you will add, this is a sample CSS code: 

    .replaceTag {

        position : absolute;

        top : 98px;

        left : 113px;

        font-size : 30px;

        font-weight : bold;


    ".replaceTag" is the identifier for the HTML field where the custom text is added, do note that this may change depending on your image or another reasons; however, you may let us know if you need help on this step and we will be glad to provide you with the needed CSS code to achieve it. 

    This guide will help you to inject the CSS code to your form: How-to-Inject-Custom-CSS-Codes

    Here is the link to my sample form if you want to take a look and test it: 

    Feel free to clone it

    This is the only method we currently have to achieve what you need, please give it a try and if you have questions, feel free to let us know, we will be glad to help you.