Can I use images as options in a radio buttons list?
Yes, you can use images as single or multiple choices to make your form look more dynamic. Create a regular single choice or multiple choice list. Now, instead of typing text in the Available Choices box, paste the images URLs, one on every line. The images will show up in your main view.
Have a look at how we’ve built this form below with images as radio buttons, using our 123FormBuilder logo. Make sure to have the hosted link of the image SSL secured (https).
7 comments
Leave a Reply
Similar Articles
Frequently Asked Questions
Here is a list of the most frequently asked questions. For more FAQs, please browse through the FAQs page.
I am afraid that the radio button can only be moved if you apply a custom CSS to change its position. In our themes section you are able to apply your CSS codes.
Do you have an example of the suggested workaround using Heading fields?
How would I group the mix of Headings and Choices to ensure the user can only select one of the options?
Since there is no text associated to the image, how do I get a value out that can be submitted with the order?
I am afraid that you can not combine them, since there are two separate field types. What you can do is to resize the heading fields on top of each choice image.
To get the value, or to identify the image selected, what you can do is to rename your image before uploading it. For example: apple.jpg and use a hosting image service like https://postimages.org/ which will keep the file’s name in the URL.
Is there any way to enter the name of a radio button image under it? For instance if I have a radio button image of fried chicken, baked salmon, and vegetarian lasagna; is there a way that I can have each of those image names typed under them?
Hello Lenora,
If you choose to upload an image for a single/multiple choice field, in order for the URL to show the image you are not allowed to insert any other information in that field. By doing so, instead on the image, it will show the URL link itself.
As a workaround, you can insert Heading fields above or under each choice so the customers know what each image represents. If you have more questions do not hesitate to contact our Support Team at support@123formbuilder.com.
Does it matter where the image URL is hosted, ion regards to using images as options for radio buttons? I have tried copying the link from Google but the image is not appearing?
Hello Sara!
Here’s an example of an image URL from Google: http://dflzqrzibliy5.cloudfront.net/images3/new2/create-web-forms.jpg.
Right-click on the image on Google when opened and use the option that copies the URL or image address. For Google Chrome, for example, the option is named Copy image URL. Afterwards, go to the form editor and paste the URL within the available choices box in the edit field panel of the Radio buttons field.
For further assistance, don’t hesitate to contact our Support Team at support@123formbuilder.com or via our contact form.
Thanks!