showing radio button value on top of the selected choice

Hi @salahcom

I hope you are doing good today.

Please take a look at Conditional Logic
https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#Forminator-Conditional-Logic
which should help in this case.

In short, you can create 2 HTML fields with custom values and show only 1 of them when one of the radio buttons is selected.

1st HTML field:
Visibility tab -> Radio | IS | OPTION 1

2nd HTML field:
Visibility tab -> Radio | IS | OPTION 2

Kind Regards,
Kris

Hey Kris

Thanks a lot for sharing this, that did the trick
I thought it might send the html content to google sheet but it did not, great

one more question kris, I have 2 radio fields on my form, and both contain background image, I tried to change the size of one of them, but they both change

can you please help me with that

Hello there
any solution to this problem guys !

any response will be highly appreciated @wpmudevsupport13

Hi @salahcom,

Please add a unique CSS class for the radio buttons under the Styling tab of the field and try to change the size based on this class using custom CSS.

Screenshot: https://ibb.co/4pffrLb

I hope that helps.

Kind Regards,
Nebu John

Hey there

I have tried that before and tried it again now but when I add unique class to the targeted radio and added the css needed, it does not target the background images size, it only changes the background color

I can give you the form export to check it

Hi @salahcom,

Please share an export of the form so we can look closer. You can share the export using the pastebin.com service or Google Drive.

Ref: https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export

Kind Regards,
Nebu John

Hey @wpmudevsupport14

sure, here it is

https://drive.google.com/file/d/1nJx21eQ7fZrShLtFBuqtDoIGDzKa_QD3/view?usp=sharing

Hi @salahcom

Thanks for sharing the form!

The custom class is applied correctly but it’s important to know that it applies to entire HTML “block” that includes field markup. So to target particular elements of it (like background in this case) you need to find out to which element that background is added.

In this case there’s a child element with .forminator-radio-image class and inside it is a “span” element that actually has the image added as background.

So the code to resize it would be like this:

.htdum-brad .forminator-radio-image span {
	width:150px!important;
	height:150px!important;
	
	
}

Note:
– the “!important” flag isn’t particularly “elegant” but necessary here
– I used 150px size but feel free to set it to whatever other size you need.

Best regards,
Adam

Thanks a lot Adam, that worked just great

I’m sorry if I am asking too much,
but I have a problem with aligning the images to the center

can you help me with that please

here is the screenshot for references

ON DESCTOP
https://drive.google.com/file/d/1MdEBf_H1jqn4bs7oodfmZzyky5qnpCUh/view?usp=sharing

ON PHONE
https://drive.google.com/file/d/1PzkT92NmBWYrSWQ_oOp7y57ydB8MHXYL/view?usp=sharing

Hi @salahcom

I’m glad I could help!

As for centering/positioning: could you possibly share a link to the page with the form in question?

This kind of CSS tweaks are often to some degree “depending” on the CSS (from theme and other plugins and/or custom rules) that is already on the site so it’s way better to work on such page directly via browser CSS editor – to come up with necessary CSS which we can later share with you here.

If you could post a link to the page with this form, it would be of great help!

Best regards,
Adam

Hello @salahcom ,

We haven’t heard from you for some time now, so it looks like you don’t have any more questions for us.

Feel free to re-open this ticket if needed.

Kind regards
Kasia