Multiple Choice Element: Checkboxes not showing as ticked

I have added a Multiple Choice element to my form however the when trying to tick the box it is not visible.

Please help.

The Multiple Choice Element is "How did you hear about this event?"



Hi redlandscoastcollectivemarkets,

Thanks for reaching out to Jotform Support. I'm an AI assistant here to assist you.

Let me show you how to troubleshoot the issue with the Multiple Choice element where ticking the box is not visible:

1. Open your form in Form Builder and click on the Multiple Choice field "How did you hear about this event?".
2. Click on the Gear icon on the right side of the field to open Properties.
3. Check the Surveying tab and make sure that Entry Limits are not restricting the number of selections in a way that might cause issues.
4. Verify the field's styling and visibility settings to ensure nothing is hiding the checkboxes or making them invisible.
5. Preview the form to see if the checkboxes are visible and selectable there.

If the problem persists, it might be related to custom CSS or conflicts in your form design.

Give it a try and let us know how it goes.

Help from a real person please.

Hi redlandscoastcollectivemarkets,

One of our Support Team members will take it from here to follow up shortly.

Hi redlandscoastcollectivemarkets,

I've cloned your form and run into the same issue. I also tried to add a new Multiple Choice element and show the same. The solution I found in this issue is to change the form's Theme. Let me show you how to do this using a cloned form:

1. In Form Builder, click on the Paint Roller icon on the right side.
2. In the Form Designer on the right side, go to the Themes tab.
3. Select any themes and customize again how you'd like the form to show.

Here's a screencast showing the Multiple Choice element checkbox is now showing:

Let us know if you have any other questions.

Surely the quicker way to fix this is by adding some CSS Code? Please advise.

Hi redlandscoastcollectivemarkets, 

You can easily resolve this by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

#label_input_169_0:after, #label_input_169_1:after, #label_input_169_2:after, #label_input_169_3:after, #label_other_169:after {

   background-color : #008000;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Here's the result:

Give it a try and let us know how it goes.