New to the community? Start here

Forminator Help.

I’ve added a custom CSS code to display images instead of numbers on radio buttons, they are working but I would like to have the image clickable, if possible.

Thu, 21 May 2020 3:30:00
More Forminator Pro discussions
Forminator Pro
  • Predrag Dubajic
    • Support

    Hi Benji,

    I have tried couple of approaches on your setup but I’m afraid I wasn’t able to get it working so that the images are clickable.
    I will forward this to our devs to have a look at it and see if there’s something we could do here.
    Please note that developer response might be slower than usual staff response, so we appreciate your patience on this.

    If you’re in a hurry to add this functionality you can hire a developer to assist you further with this, we have discount code for Codeable on our Partners page if you choose to do so.

    Best regards,
    Predrag

  • Maciej Palmowski
    • Recruit

    Hi Benji

    There are two ways to solve this.

    I saw that the images that are used look just like emojis – so maybe let’s use them – go to https://getemoji.com/ and just copy and past what you need. If you would like to change the size of them just add :

    
#radio-1 .forminator-radio-inline span {
    font-size: 48px;
}

    in appearance > custom CSS.

    There is also another that would use shortcodes.

    
add_shortcode(
	'img',
	function( $atts ) {
		return '<img src="' . $atts['src'] . '" alt="" class="radio-img" />';
	}
);

add_action(
	'init',
	function() {
		add_filter(
			'forminator_render_fields_markup',
			function( $html ) {
				$html = do_shortcode( $html );
				return $html;
			}
		);
	}
);

    With this you would be able to add shortcodes as labels and use:

    
[img src=URL_TO_MY_IMG]

    I think that first method is a bit better if emojis would be enough. If you would need custom images than I’ll prepare the full mu-plugin and instruction for the second one.