How can I create a smiley face question

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

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.

Hi nurulmac11 - thanks very much!  Works a treat.

mecwacare

@mecwacare, 

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

Fantastic support!

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

mecwacare

@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;

}

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

@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.