Checkboxes invisible unless clicked

So I was looking around in the settings for wpforms and I noticed under general there is a setting called “include form styling” I switched it from the current setting of “Base and form theme styling” to “Base styling only” and refreshed my form. The checkmark boxes are all there correctly like they should be. Problem now is the fields that I used where I inserted pictures changed. Rather being 4 photos in line with each other horizontally for a question. All my photos go down vertically on the page one by one.

Hey @nkline101020 – Thanks for contacting us!

When you have sometime, can you please share the URL of the page where the form is embedded so I can take a closer look?

Kindly,

Hey @nkline101020 – We haven’t heard back from you since my previous response, so I’m going to go ahead and close this thread for now. But if you’d like us to assist further, please feel welcome to continue the conversation.

Thanks!

Hello, Sorry I have a job and haven’t had time to get back on here to reply in the 6 hours since you answered. The website is not published as I just started working on it. Do you have any feedback or suggestions based on what I stated above. After noticing the “include form styling” and switching it from the current setting of “Base and form theme styling” to “Base styling only” fixed the box for the checkmark not showing but then messes up the layout of all the photos.

Hey @nkline101020 – Thanks for following on this ticket!

When you have sometime, can you please share a screenshot of the issue as that can help to take a closer look?

Kindly,

Hello,

I have attached a screenshot where I circle the missing checkmark boxes. I have also added a 2nd screenshot showing when I change the format from “Base and form theme styling” to “Base styling only”. The checkmark boxes appear now but it makes my photos list vertically instead of horizontally like I want.

Hey @nkline101020 – Thanks for sharing the screenshot!

Looking at the screenshot, it seems that there’s some styling conflict going on. Generally having access to the website helps in narrowing down the issue, however, since the website is not live, could you please try testing for a plugin or theme conflict as it looks like there might be a conflict between the forms and the site theme or another plugin. To troubleshoot this, please try the steps described in our detailed guide on how to test for plugin/theme conflicts.

Hope this helps!

I disabled the few plugins that it showed were active that someone else suggestion and that made no difference. I just installed Duplicator and backed up my site before trying another theme. Currently I am using TITH Wonder. I switched theme the other ones shown like Twenty-One, Twenty-two and Twenty-three and the check marks all show fine. I do know in a forum I saw someone else having a similar issue and they were given code to adjust to change the opacity of the squares. I am not sure where I see or access the code since everything I’m doing is drag and drop and such. I just published it so you could have a look, its mostly done just trying to figure out how to get the button to work and how to make the url always show my site not the bluehost url.

https://www.thefutureofpcs.com

@nkline101020

There is another stylesheet that is overriding wpforms CSS for your checkboxes.

This one: wp-content/themes/yith-wonder/assets/css/general-block-style.min.css?ver=1.0.0

In that, there is an input[type=checkbox] that’s doing it. You can see in Developer Tools, that I added an actual border color and the checkboxes look fine now.

So, you will either need to create a seperate stylesheet and override the styling in there, or reach out to the developers of that plugin… whatever yith-wonder is

• This reply was modified 1 year, 7 months ago by Kevin Pirnie.

guess my screenshot didn’t go through… Here it is, pointing everything out: https://prnt.sc/Uxhnp81rcZNl

Hey @nkline101020 – Thanks for sharing the URL. To fix the issue that you’re facing, please try adding following CSS, and let me know how it goes:

.wpforms-container input[type=radio] {
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
	appearance: radio !important;
}

.wpforms-container input[type=checkbox] {
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	appearance: checkbox !important;
}

.wpforms-container input[type=radio]:checked:before,
.wpforms-container input[type=radio]:before,
.wpforms-container input[type=checkbox]:checked:before,
.wpforms-container input[type=checkbox]:before,
.wpforms-container input[type=radio]:checked:after,
.wpforms-container input[type=radio]:after,
.wpforms-container input[type=checkbox]:checked:after,
.wpforms-container input[type=checkbox]:after {
	display: none !important;
}

And in case it helps, here’s a tutorial on how to add custom CSS like this to your site.

Hope this helps!

Thank you! Adding that CSS in using the tutorial was easy and as son as I published it and checked my site the checkmark boxes are now showing in both my forms. I appreciate your help as well as the tutorial that helped me understand what I was doing ha.

Hey @nkline101020 – Great to hear that, and if you have any questions, please feel free to reachout.

Kindly,