How to show the image on the side when an option is selected?

  • Profile Image
    venesa_g
    Asked on October 17, 2018 at 06:39 PM

    I have choices on my form but I would like to know if there is a widget or css that can help with that.  I would like for a customer to make there choices (which they already do) but I would like for them to see there choices on the side of the form or some where  on the form while their choices are being made.  So they can see it in real time as they select it (like in a cart sort of).  I've attached an image of what I'm looking for. 

    Thank you for helping.

  • Profile Image
    Jed_C
    Answered on October 17, 2018 at 09:21 PM

    You can use the image picker widget and add the preview before submit so users can see the image selected before they submit the form.

    https://widgets.jotform.com/widget/image_picker 

    https://widgets.jotform.com/widget/preview_before_submit 

    I hope that helps. Let us know if you have any questions or if you need further assistance.  

  • Profile Image
    venesa_g
    Answered on October 18, 2018 at 01:00 PM

    ok, I tried it out and that's kind of what I want.  Is there a way to one - make the "preview before submit" answers look better like the image I attached earlier?  It looks so boring.      And  2 -  Is there a way to only preview the selection of the items being selected before the end of the end?  Here is the URL that I really like and wanted to see if I can achieve...  Or is this just too advanced?

    https://happilyeverlaughter.com/build-a-quote/?preset=2


    Thank you.  

  • Profile Image
    Jim_R
    Answered on October 18, 2018 at 02:30 PM

    I'm afraid that's the extent of the PREVIEW BEFORE SUBMIT widget. The goal of this widget is to give a quick preview of all the selections made by the respondent (so they can review it and go back if they need to make some changes).

    Does this kind of image arrangement (horizontally) something you would prefer over the default (vertically)?

    If that looks better, append these CSS codes at the end of the existing codes you have on this form:

    .imgwrap {

      float: left;

    }

  • Profile Image
    venesa_g
    Answered on October 18, 2018 at 03:19 PM

    Hi,thank you.  I put the CSS code above in but it didn't change anything.  What did I do wrong?

  • Profile Image
    Jim_R
    Answered on October 18, 2018 at 04:42 PM

    It's actually working - Here's how your form looked like from my perspective:

    https://www.jotform.com/82684907884172

    Are you not seeing the images aligned horizontally when you preview your answers?