Tansform select options to images

I assume that your drop down, although it displays icons, submits a string value when the form is submitted. There is no simple way then to save the icon file with the form submission.

In a shortcode that displays the data, you could replace that string value with with an image is you have the images files accessible and know the mapping of string to image file. In this case you could write a transform to do that. Or you could add Javascript in the page to do it.

Hi Michael,
Thanks for your reply.
Drop down list doesn’t consist images. Images are company’s icons and they are at wp media library.
I have to write a transform snippet which mapping of drop down list string to images.But I have not any idea whow I can do it.
Any idea or snippet are welcome ??
Best Regards

There are examples of creating an example transform: https://cfdbplugin.com/?page_id=1076

Transform something like this:

require_once(ABSPATH . 'wp-content/plugins/contact-form-7-to-database-extension/CFDBPermittedFunctions.php');
 
function image_tranform($text) {
  // Given $text (value from drop-down, return the URL for the image to display
  return 'https://some-site/some-image.jpg';
}
cfdb_register_function('image_tranform');

Shortcode something like:

[cfdb-html form="FORM_NAME" trans="drop-down-field=image_tranform(drop-down-field)" id="mytable"]
<img src="${drop-down-field}"/>
[/cfdb-html]

Hi Michael,
Many many thanks for your support.
Function and transform take related images, but cfdb shortcode put the image out of table ( below table) instead of table column.
This is only problem.
If it is solved, it works very well. If you advise, very appreciated.
At the other hand, I think this solution works at cfdb-datatable, also.
Best Regards

You want the image in the table? You will need to transform your drop-down-field (whatever it is named) to a URL but then add JQuery to change that to an IMG tag.

[cfdb-datatable form="FORM_NAME" trans="drop-down-field=image_tranform(drop-down-field)" id="mytable"]
{{AFTER}}
<script type="text/javascript" language="Javascript">
(function($) {
    $(document).ready(function() {
        $("#mytable td[title='drop-down-field'] > div").each(function() {
            var imgTag = '<img src="' + $(this).html() + '" />';
            $(this).parent().html(imgTag);
        })
    });
})(jQuery);
</script>
{{/AFTER}}
[/cfdb-datatable]

Related: https://cfdbplugin.com/?page_id=1420

Hi Michael,
Great ??
It works properly.
Many thanks for your cooperation.

Best Regards