Checkbox image, but text output

Hello @svd89

If you want to display the image on the public website but not in the notification emails or the summary, you can tick the option “Choice value” in the “Value to submit” attribute in the field’s settings.

If you want to hide the checkbox control and use the image as the checkbox you can follow the steps described below:

• Assign a custom class name to the checkbox field. E.g. custom-checkbox-field

The class names are assigned to the fields through their “Add CSS Layout Keywords”.

• Enter the style definition below (or similar), through the “Customize Form Design” attribute in the “Form Settings > Advanced Settings” tab:

#fbuilder .cff-checkbox-field.custom-checkbox-field input{display: none !important;}
#fbuilder .cff-checkbox-field.custom-checkbox-field .dfield label span{border-radius:100px !important;box-sizing:border-box;padding:5px !important;border:2px solid white;}
#fbuilder .cff-checkbox-field.custom-checkbox-field input:checked+span{border:2px solid #0051ba !important;}

Best regards.

Hello,

Thank you so much for your answer. That is not quite what I mean. I need the value field for another equation. My wish is to have it similar to this. The text below the image has to be returned to the summary or e-mail. Hope you know what I mean ??

Hello @svd89

If you want to send the text via email and remove the image, you should untick the “Accept submitting HTML as field value” checkbox in the field’s settings.

If you want to hide the image from the “Summary” field, you must do it via CSS. You can enter the style definition below through the “Customize Form Design” attribute in the “Form Settings > Advanced Settings” tab:

.cff-summary-value img {display:none;}

Best regards.

Yes, but this will return the value and that is exactly what I don’t want. The value is a number which I use for another equation.
I want to return the ‘name’ of the image. Is this possible trough an alt text, written in the <img> code?

Hello @svd89

No, I’m sorry. If you want your form to extract the “alt” attribute from the img tags and use them with the summary fields and the form submission it will be required to customize the form behavior.

If you need a custom coding service, please contact us directly through the plugin website. Contact us.

Best regards.

Ok, I get it. I will try to find another solution. Thank you so much for your help.
Have a great day!

Hello,

Here I am again! I have been thinking about it a lot and I came with the following ideas:
Would it be possible to render a checkbox choice through a calculated field? For example if I choose ‘A’ (which is an image), it will return the name of that image to the (e-mail) summary.
Or maybe vice versa.. to create an image through html with an ‘on-click’ function, which will trigger my ‘invisible’ checkbox-choice ‘A?’
Hope to hear from you again. Many thanks in advance and all the best!

Hello @svd89

Please note you are describing a custom behavior. You have many options. You can get the selected choice and parse the img tag with regular expressions to extract the “alt” attribute, get the image and obtain its “alt” attribute with jQuery, or do the same process with vanilla JavaScript. But, as I said above, all of these alternatives are custom behaviors specific to your project. If you need us to implement this part of your project, do not hesitate to contact us through the plugin website. Contact us.

Best regards.

Thanks again for your answer and I understand. I will consider this.

All the best!