Form format for custom product

  • Dave Walters
    Asked on July 25, 2016 at 5: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: http://www.polarengraving.com/virtual-brick-tool.php  . Please let us know if you have any templates that can do this for us. Thanks! Dave. 

  • Kevin Support Team Lead
    Replied on July 25, 2016 at 9: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: https://www.jotform.com/form-templates/category/order-form

    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.  

  • Dave Walters
    Replied on July 25, 2016 at 9: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.
    thanks,
    Dave.
    ...

  • Kevin Support Team Lead
    Replied 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: 

    Form format for custom product Image 1 Screenshot 90

    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: 

    Form format for custom product Image 2 Screenshot 101

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

    Form format for custom product Image 3 Screenshot 112

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

    Form format for custom product Image 4 Screenshot 123

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

    Form format for custom product Image 5 Screenshot 134

    You will get the unique field name, copy that: 

    Form format for custom product Image 6 Screenshot 145

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

    Form format for custom product Image 7 Screenshot 156

    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}": 

    Form format for custom product Image 8 Screenshot 167

    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: https://form.jotform.com/62069203923958 

    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.