Form elements types misbehaving in my theme looks

It’s basically impossible for me to create a plugin that looks good on every theme, and so it’s normal to have to get in there with some CSS to get things looking right.

Are you using a custom template? Looks like the table isn’t laying out correctly. One thing you may try that could work better is use one of the other templates provided in the plugin…for instance the “bootstrap” template:

[pdb_signup template=bootstrap]

The CAPTCHA field should require an input when the form is submitted, the field should have a verification setting of “CAPTCHA”

I completely agree with you, it is not possible to have a plugin that would meet the demands of every theme out there.
Again you are once more correct about me running a child theme for the Colorlib: Sparkling (style.css). I believe the sparkling theme is a minimalist theme, it does little for formatting, hence I had to add some css code such as:

...
#page .dropdown th, td {
  padding: 5px;      /* Provides some space inside within the boxes */
  border: 1px solid #D3D3D3; /* Grey */
}
.dropdown:hover td { /* Provides highlight table rows on mouse over */
  background-color: #f5f5f5;
}
...

Why I brought up the subject is the inconsistency of the two classes that is leaving me perplex? I used as suggested the boostrap template, which bypasses my css modifications and again I see the same inconsistency with the classes now called class=”checkbox control-group ” and <div class=”radio control-group “>
These classes for some kind of reason are not behaving consistently such as the rest of the classes? if you wish to have a look I have updated the Example I took out the verification (CAPCHA) field for clarity and the two bottoms fields if you look carefully are not following the above field’s pattern?

B.T.W. I started working on WordPress and PHP about a month ago and I am so glad I found your Plugin for my initiation. I am learning so much from your top notch templates and code and I appreciate your help.

The best way to see what CSS rules are doing is to use the browser developer tools and inspect the elements in question. It will show you all the rules that are acting on the element. What’s probably happening is you have other rules that are acing on one of those elements and not the other, so they look different.

Those classes are standard for bootstrap, so if you’re using a bootstrap stylesheet, it should layout OK as a starting point.

Interesting thks