JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
I have tested this and it worked on my end, you need to add the image HTML tag as an option in the radio button:
You can check the live result on my sample form: https://form.jotform.com/62595042677969
Also, we have a widget that will help you to achieve the same and indeed has been developed for that, please take a look to the widget here: https://widgets.jotform.com/widget/image_checkboxes
Hope this helps.
yes, i teste the widget, but it seems not to be responsive as declared, thre is iframe inside which has the same fixed width as the form, and this width stays also by mobile devices.
If not this problem - would be greate solution.
This does indeed look to work at this time. I added the following code to my radio button:
<img alt="" src="https://www.jotform.com/uploads/david/form_files/download.jpg" style="width:50px;height:50px;">
Replace the highlighted portion with your image URL.
And the image was shown properly as the option:
Here is my test form with it working:
yes, this is indeed mobile, i mean that the WIDGET solution is not mobile, probably because of iframe...
Another question: how can i achieve that choosed option would get different css style? outlined or another background etc. ?
Yes, the Image Radio Buttons widget does not load responsively by default, it has a fixed width, but you may inject some CSS code to set the width to 100% it means that the widget will fit the screen where it is being viewed.
I you're not using another widget you may simply inject this CSS code, it will affect to all the widgets in your form:
width: 100% !;
But if you have other widgets you will need to specify the widget that the code will affect, to get the widget iFrame ID you need to open the console, please follow the steps below:
Then instead of using the code for general widgets you need to use the iFrame ID, so the code should look like this:
width: 100% !important;
I have applied the CSS code to the form and it loads responsively now, please take a look to the sample here: https://form.jotform.com/60525553364960
This guide will help you to inject the code to your form: How-to-Inject-Custom-CSS-Codes
Hope this helps.
I have moved your inquiry in another thread since it is already a different issue, so we can assist you better. Kindly wait for our reply to the given link for each issue.
Download xls file with submissions:
Not collecting data from radio/image options - just empty fields: