Multiple Choice: How to hide some of the checkbox with CSS?

Just wanted to reach out to see if anything can be done with a part of my form. The part in question is the "Add-Ons and Extras" section. Just wondering if there is any other way of formatting the look somehow.

I have tried dropdowns but I need users of the form to be able to make multiple choices and could not figure out how to easily do tha That is one of the reasons I chose to use the basic multiple choices for that section.

I want it to look a little more streamlined and not so busy. Because I used the basic multiple choices for that section, there are "checkboxes" that are blank and separating each section (see screenshot). I didn't know how else to format that. I would use a widget but was told that I can't integrate widgets with my Google calendar so that the items that are checked by the user end up on my calendar.

Any ideas, tips or tricks so that I can set this up differently would be appreciated.

Hi markalanfoto,

Thanks for reaching out to Jotform Support. You can hide the highlighted checkbox by injecting a CSS code. Doing that is easy, let me show you how:

1. In Form Builder, click on the Form Designer button, on the top right side of the screen.
2. Next, click on the Style tab.
3. Scroll down to Inject Custom CSS and paste the code provided below:

/* Code to hide Checkbox on Multiple choice element - 17638951 */

#label_input_60_1:before, #label_input_60_3:before, #label_input_60_6:before, #label_input_60_8:before, #label_input_60_10:before, #label_input_60_13:before, #label_input_60_15:before, #label_input_60_19:before {

    visibility: hidden;

}

/* Code Ends Here*/

Result:

Here you can test this demo form or clone it to better understand how it was configured. 

Give it a try and reach out again if you have any other questions.

Hi again markalanfoto,

Please consider injecting the following code instead of the one provided above. With this one you will be able to hide the Checkbox and also the checkmark:

/* Code to hide Checkbox on Multiple choice element - */

#label_input_60_1:before, #label_input_60_3:before, #label_input_60_6:before, #label_input_60_8:before, #label_input_60_10:before, #label_input_60_13:before, #label_input_60_15:before, #label_input_60_19:before {

    display: none !important;

}

#label_input_60_1:after, #label_input_60_3:after, #label_input_60_6:after, #label_input_60_8:after, #label_input_60_10:after, #label_input_60_13:after, #label_input_60_15:after, #label_input_60_19:after {

    display: none !important;

}

/* Code Ends Here*/

Give it a try and reach out again if you have any other questions.

Thank you so much for that! Regarding my original question, Also wondering if there is any other way of formatting the look somehow? Maybe using a widget? Although I was told widgets cannot have any integration with Google calendar?

I don't need it to look like the way that section is setup now. Was hoping for any other suggestions.

Dropdown would be nice but couldn't figure out how to make it work well. Thanks again.

Hi Markalanfoto,

In this case using widgets like the Multiple Selection widget, Gift Registry widget, or others can be a great option. You can add the data collected from these widgets to your Google Calendar integration without any issue.

To improve the current design, you can use custom CSS code to modify the layout and appearance of the options. This will allow you to remove the blank checkboxes and separators, making the section look more streamlined.

Let us know if there’s anything else we can help you with. 

I was told that widgets cannot be integrated. I had widgets for some of the sections in the form but the responses were not showing up on my calendar.

Also, would it be possible to add color to any part of the form.? Especially different colors for different sections? I don't want to change the background at all just specific sections. Thanks again.

I forgot to add an example of what I want to do. I did this in Photoshop

Hi Markalanfoto,

Unfortunately, it is not possible to add background color to the specific option in the Multiple-Choice Field. What you can do is add a background color to the Multiple-Choice field or customize the color of the checkboxes.

Let us know if you have any other questions.

You mentioned that using widgets like the Multiple Selection widget, Gift Registry widget, or others can be a great option but...........,

you forgot to answer the other question. Here it is:

"I was told that widgets cannot be integrated. I had widgets for some of the sections in the form but the responses were not showing up on my calendar."

Thank you

Hi Markalanfoto,

I would like to inform you that the widget information can be passed to Google Calendar by adding the widget Unique Name to the Description section of the integration. Doing that is easy, let me show you how:

1. In Form Builder, click on your widgets.
2. Then click on the field Gear icon to open the properties panel on the right side of the screen.
3. Next, click on the Advanced tab, scroll down to Field Details and click on it to open the hidden section.
4. Finally, check the Unique Name of the field.
5. Repeat this action for all the widget that you want to add to the description section of your Google Calendar integration.
6. Now, in the orange navigation bar at the top of the page, click on Settings.
7. In the column on the right, click on the Integration tab, then select the Google Calendar integration.
8. Edit the integration and add the Unique fields of the widget in the Description section.
9. Finally, click on Save, Complete Integration and on Finalize.

Result:

Give it a try and reach out again if you have any other questions.

I also created an API key (see screenshot)

I have also entered it in into the widget area (see screenshot)

When I try and add an address, this is what I get (see screenshot)

Any help will be appreciated. Thanks

Hi markalanfoto,

I moved your question here to avoid any confusion. You can check out the answer to your question there.

Let us know if you have any other questions.