-
mecwacareAsked on August 22, 2017 at 2: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
-
nurulmac11Replied on August 22, 2017 at 4: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.
-
mecwacareReplied on August 22, 2017 at 6:29 PM
-
Kevin Support Team LeadReplied on August 22, 2017 at 8:16 PM
@mecwacare,
We will assist you with your last question on the following thread: https://www.jotform.com/answers/1230104
-
mecwacareReplied on August 23, 2017 at 2:38 AM
Fantastic support!
Is it possible to increase the font size in the Image Picker?
mecwacare
-
nurulmac11Replied on August 23, 2017 at 2: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;
}
-
mecwacareReplied on August 23, 2017 at 7:03 PM
How do I increase the space between the images in the Image Picker
-
Kevin Support Team LeadReplied on August 23, 2017 at 8: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.