Home>Support>Radio and Check box not working on Contact form

Radio and Check box not working on Contact form

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 5 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Hi Chuich

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

    Thanks

  2. 5 years, 11 months ago chuich

    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. 5 years, 11 months ago chuich

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

  4. 5 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    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. 5 years, 11 months ago chuich

    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. 5 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    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. 5 years, 11 months ago chuich

    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. 5 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More