This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Radio and Check box not working on Contact form

Open 8 replies bug-reportpluginplugin-widgets-bundle
chuich
6 years ago · Last reply by Andrew Misplon 6 years ago

I created a Contact Form over a year ago and everything was fine. Recently the radio box field type started not working.

1. There is no radio box selection icon to show the user where to click.
2. When selected it appears as a tiny dot which is barely visible.
3. When you then move the input focus onto the next field (e.g. a text field), the selection (dot) disappears. As I made this a mandatory field, an error message to say I haven’t selected the radio box appears when submitting the form using the Contact Us button.

I changed the radio box into a check box and the same thing happens. The only way round this is to use dropdown select which makes a naff form! Please help.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

8
  1. Andrew Misplon Staff 6 years, 7 months ago

    Hi Chuich

    Do you have a public URL where we can take a look at what’s going on?

    Thanks

  2. chuich 6 years, 7 months ago

    Hi Andrew

    Thanks for getting back. I've done a bit more research and have found that it is browser dependent. It is not working on Edge and Chrome. It is working on Internet Explorer and the radio boxes and check boxes are displayed, as well as what is selected.

    The link is https://aevacare.co.uk/onlineappformold/

    Look forward to your reply. Thanks.

    Chuich

    From: Andrew Misplon
    [mailto:forum+187569-u87820-d62a6858cd9555e26245598cc00168bcda77e9f2@siteori gin.com]

  3. chuich 6 years, 7 months ago

    Hi again Andrew. Doesn't work on my iPhone either.

  4. Andrew Misplon Staff 6 years, 7 months ago

    Hi, your theme is adding the following:

    button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    -webkit-appearance: none;
}

    The declaration -webkit-appearance: none; is causing the problem.

    You can try adding to CustomizeAdditional CSS:

    input[type="radio"] {
	margin-left: 2px;
	-webkit-appearance: radio;
}

    If that doesn’t help, please, reach out to theme support and let them know the problem the first rule I mentioned is causing.

    Thanks

  5. chuich 6 years, 7 months ago

    Hi Andrew

    Thanks for the CustomizeAdditional CSS. Added the CSS and It works now for
    Edge and Chrome. Just curious why it worked for IE before without the CSS.

    However the radio boxes work for the Iphone but the check boxes still doesn't.

    Regards

    Chuich

  6. Andrew Misplon Staff 6 years, 7 months ago

    Hi Chuich, it’ll need another CSS rule to work for checkboxes because the theme rule is removing WebKit styling for all inputs, radio, checkboxes, etc. Please, could you kindly raise this issue with theme support?

  7. chuich 6 years, 7 months ago

    Hi again

    Yes, I have added another Additional CSS for Check boxes and it's working fine on all browers now, i.e. Edge, Chrome and IE except the one for the
    Iphone (defaulted probably to Safari).

    Chuich

    From: Andrew Misplon
    [mailto:forum+187569-u87820-d62a6858cd9555e26245598cc00168bcda77e9f2@siteori gin.com]

  8. Andrew Misplon Staff 6 years, 7 months ago

    I’m not sure at this stage what is causing the checkbox issue. Please, try temporarily switching to a default theme, Twenty Nineteen and then re-check the form. Does the checkbox issue persist? You can then switch back to your theme. That’ll let you know if the problem is causing by your theme or something else. Thanks.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread