123FormBuilder

Can I add images as options in a Single choice field?

Yes, you can use images as Single or Multiple choices to make your form look more dynamic. This feature is available starting from the Gold plan.

All you have to do is add a Single choice field and under the Edit choices section, for each choice you can find the option of uploading an image to be displayed as a choice.

Add images to choices

Clicking the image icon will open a modal from where you can upload images from your device. To add an image for another choice, select the image icon next to the option and then click Browse to upload your image. Only .png, .jpeg, .gif, .bmp, .svg, or .webp formats are accepted, up to 1 MB per image.

Once you have uploaded all the files, do not forget to Save your changes. You can always come back to Edit your image, Replace it, or Delete it.

Upload images

When you have added images as choices, the Layout type of your field will switch to the Card type. In the Layout section, you can also choose to remove the radio buttons from your choices by turning off the Show selector toggle.

Show selector toggle

Related articles

SIGN UP FOR FREE

11 comments

  1. I have an image of a Seat Map. I am using Multiple choice to allows Users to select seats, Seat 1, Seat 2, Seat 3. If User selects Seat 2 and submits the form, how can I remove the selected seat, Seat 2, from the multiple choice options for the next User?

    Reply

  2. I’m trying to build a simple ecard that will be sent after a donation is made. I have the ecard designs as radio button options, but it won’t display the image in the notification email (the ecard email), only the link to the image. How do I get the selected image to display?

    Reply

    1. Hi Julie! When you use images as choices, the selected images cannot be forwarded via email. However, a solution would be to create custom emails where you can attach each image. Then, you can create rules to send the emails based on the choice/image selected. Here you can find more details about this feature https://www.123formbuilder.com/docs/what-are-custom-recipients-and-how-to-use-them/. Please feel free to contact us at customercare@123formbuilder.com and we will gladly help you set up your form!

      Reply

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

    Reply

  4. 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?

    Reply

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

      Reply

  5. 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?

    Reply

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

      Reply

  6. 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?

    Reply

    1. 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!

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Frequently Asked Questions

Here is a list of the most frequently asked questions. For more FAQs, please browse through the  FAQs page.

Is this service free?
Yes, we offer a free form builder service. Just sign up to the Basic plan and you are all set. This plan is forever free, but you are limited with a few features only, such as 5 forms per account, 100 submissions per month and you have to keep the backlink to 123FormBuilder on your forms. Check out our features matrix for more information.
How many forms can I create?
It depends on the service plan you are on. Higher service plans enable more features, including more web forms for your account. If you need more forms, go to the My Account section of your account and click the upgrade button. To create an unlimited number of forms, either upgrade to the Platinum service plan or higher. Consult our features matrix for more information.
How can I publish my forms?
You can publish your forms in many ways, by using their direct URL or HTML link, embedding them with a JavaScript code, Inline HTML or iFrame, using the Facebook app or the WordPress plugin, using popups, the Blogger code snippet and many more. Once you have created and customized your form, go to the Publish section to complete your work. Read more in our documentation.
How do I change my form design?
You can change the design of your form for more information. in the Themes section, which is located in your form settings. We offer a set of more than 30 predefined form themes for your forms, but you can also create your own from scratch. You can customize the submit button, the logo and more. To apply your own stylesheets, all forms come with a custom CSS editor.

Can't find what you're looking for?

Contact our support team