What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
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.
Radio Button ImagesAsked by slross on May 06, 2014 at 03:18 PM
I wanted to know if it's possible to insert 2 images into the options box of a radio field for each radio button used using HTML whereby only one of the 2 images will be displayed depending on whether the radion button has been selected for that option or not ?
Your help would be appreciated.
Yes it is possible to insert image HTML codes on the radio button options box. I think you already figured out how upon checking your form here http://www.jotform.com/41252932609353.
Though I'm not exactly sure how you want them to appear.
Is it like this? http://form.jotformpro.com/form/41246256594964?
If you only want to display 1 image, you can add a visibility:hidden or display:none property to hide the second image.
<img src="//www.yourpic.com/pic1.png"> <img src="//www.yourpic.com/pic2.png" style="display:none;">
Is this what you mean? If not, kindly elaborate your question so we can assist you further. Thanks!
Thanks for your reply.
What I want to do is say that a particular radio button is selected then image 1 will be displayed and if it is not selected then image 2 will be displayed in the same place, i.e. they will both never be displayed at the same time.
Hi, you can accomplish that using conditional logics. Follow this steps:
1) Add the Radio button to add the options, and an Image Field to upload the images on your form.
2) Click on Setup&Embed, then on Conditions.
3) Select the Show/Hide a form field option, and set the conditions this way:
4) Click on Add New Condition, and do the same as in step 3, just this time the condition will be "If Option field Is Equal To Option2 then show Image(the second one)":
Click on finish, save you work, and click on Preview. You may check my form example here. Let us know if you have more questions, we will be glad to assist you.
Just to add to the discussion, if you wish there to be two images per button, my colleague's solution would also work in such cases but the images would need to be absolutely positioned via the form's injected CSS.
Another route to achieve the desired functionality would be to get the form's full source and embed it into a web page. A script can then be added to the same page to either update the value of the source (src) attribute of each image or insert and remove the style attribute.
If you provide the image URLs and state which radio button each pair belongs to, along with which image should be shown when the buttons are selected, we should be able to give a tailor-made solution.
Thanks for your replies, I will send over the info for the tailor made solution you have kindly offered.
In the meantime my account has account been disabled as it suspect I may be Phising ? I'm not and have a different form which is currently connected to a live website which is now not working so would therefore appreciate it if my account - could be reinstated as soon as possible.
The account has now been reactivated so please ignore the last message.
Thanks Stuart for the update on the issue, please do feel free to let us know wherever you need our assistance.