How can I create a smiley face question

  • Profile Image
    mecwacare
    Asked on August 22, 2017 at 02:51 AM

    I just want to create a single question - "how satisfied are you with our services" and have the customer click on the corresponding smiley face like this -

    https://www.questionpro.com/features/smiley-face.html

     

  • Profile Image
    nurulmac11
    Answered on August 22, 2017 at 04:05 AM

    You can do it by using image Picker widget.

    1. Search the image picker widget from Form Element under widget tab.

    2. You need to add image URL to the widget setting.  You can use the images that I found if you want.

    So paste the code below to the Image picker settings -> General -> Images section.

    [Extremely Unsatisfied]https://cdn.shopify.com/s/files/1/1061/1924/products/Sad_Face_Emoji_large.png

    [Unstaisfied]https://cdn.shopify.com/s/files/1/1061/1924/products/Very_sad_emoji_icon_png_large.png

    [Neutral]https://cdn.shopify.com/s/files/1/1061/1924/products/Neutral_Face_Emoji_large.png?v=1480481054

    [Satisfied]http://cdn.shopify.com/s/files/1/1061/1924/products/Slightly_Smiling_Face_Emoji_87fdae9b-b2af-4619-a37f-e484c5e2e7a4_grande.png

    [Extremely Satisfied]https://cdn.shopify.com/s/files/1/1061/1924/products/Smiling_Emoji_with_Eyes_Opened_large.png

    3. Then, limit selection with 1. Just below the Images section.

    4. You need to click update widget buttn in order to save your changes. Then, close the widget settings and open widget properties.

    5. After that, change the label alignment "Top" from GENERAL tab.

    6.Finally write your question to question text from the ADVANCED tab.

     

    Here is my final result.

    I hope, this helps you. If you have more questions, please do not hesitate to contact.

  • Profile Image
    mecwacare
    Answered on August 22, 2017 at 06:29 PM

    Hi nurulmac11 - thanks very much!  Works a treat.

    Is there any way to submit the selection at the same time the choice is made i.e. single click, rather than click to select, then click to submit?

    mecwacare

     

     

  • Profile Image
    Kevin_G
    Answered on August 22, 2017 at 08:16 PM

    @mecwacare, 

    We will assist you with your last question on the following thread: https://www.jotform.com/answers/1230104 

     

  • Profile Image
    mecwacare
    Answered on August 23, 2017 at 02:38 AM

    Fantastic support!

    Is it possible to increase the font size in the Image Picker?

    mecwacare

  • Profile Image
    nurulmac11
    Answered on August 23, 2017 at 02:58 AM

    @mecwacare

    You can increase font size by adding this css to your widget css section. (You can learn how to inject custom css your widget by this link.)

    .imageLabel  { 

    font-size: 20px !important;

    }

  • Profile Image
    mecwacare
    Answered on August 23, 2017 at 07:03 PM

    How do I increase the space between the images in the Image Picker

  • Profile Image
    Kevin_G
    Answered on August 23, 2017 at 08:09 PM

    @mecwacare, 

    You could achieve it by injecting the following CSS code: 

    .imageContainer.blocks{

        margin-left: 8px;

    }

    Please follow the steps on the guide shared above in order to inject the code to your form.

    I hope this helps.