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

  • venesa_g
    Asked on October 17, 2018 at 6: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.

    Jotform Thread 1614548 Screenshot
  • Jed_C
    Replied on October 17, 2018 at 9: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.  

  • venesa_g
    Replied on October 18, 2018 at 1: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.  

  • Support_Management Jotform Support
    Replied on October 18, 2018 at 2: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)?

    How to show the image on the side when an option is selected? Image 1 Screenshot 20

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

    .imgwrap {

      float: left;

    }

  • venesa_g
    Replied on October 18, 2018 at 3:19 PM

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

  • Support_Management Jotform Support
    Replied on October 18, 2018 at 4:42 PM

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

    https://www.jotform.com/82684907884172

    How to show the image on the side when an option is selected? Image 1 Screenshot 20

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