How to add class to form fields?

Hi phoenixobia,

All fields that are output by BD have specific classes already attached to them. If you use a tool like Firebug, you’ll see things like this for each field container:

div class=”field-value wpbdp-field-website wpbdp-field-meta”

I picked that up from our demo here on the “Website field”: https://businessdirectoryplugin.com/business-directory/621/untitled-listing/

Once you have that container div, you can them use selectors to pick out the label and data elements with additional CSS selectors in there. It’s just a simple hierarchy of elements, which the selector should easily be able to get.

Also, be sure to use a custom CSS file. Here is an article about how to use custom CSS with Business Directory in a way that doesn’t get overwritten on upgrade of BD: https://businessdirectoryplugin.com/support-forum/faq/how-to-use-custom-styles-with-bd-2-1/

Hi.

I am aware of the hierarchy of CSS elements and I am using firebug.

I have a few checkboxes on my form but here’s what I get for all of them when I inspect them with firebug:

<div class=”wpbdp-form-field checkbox “>
There is no “field-value”
So whatever style I add to my CSS will change all of my checkboxes.
I even tried :nth-child
but still not working.

Am I missing something?
I have the latest version of BD and WordPress too.

Thanks

It may help to actually see what you’re seeing here. Can you post a link to your site?

Also, what are you specifically trying to change about the checkboxes? If I understood the goal, perhaps I can suggest alternatives as well.

I was able to target it using the following:

.wpbdp-listing-form legend + div {
display:none !important;
}
Which is fine but only works if that div is the first one after.

Basically I was trying to hide a Checkbox field on the submission form and only have it visible on the back end of the site so that the field is seen only by admins and can be checked.

There is no options for the fields that lets you choose if you want that field on the form on the front end.

And no option to add custom class to each field and the field value is not added as a class so the CSS affects all the checkboxes.

Thanks

OK–I see what you’re doing here. Yeah, that’s something we can consider adding for a future release to help with (custom classes per item in the field) so that you can do more specific targeting.

We’ll also consider “private” fields as well. Thanks for the suggestions!

Yeah, it would be great if we could add another check box for the next update under “Field Display Options” that reads “Hide this field on the form” or something like that.
And another field under “Field Description” for class.

Thanks so much