Problem with rendering styled checkbox ([acceptance]) in Contact Form 7

Hello,

I’m trying to use the styled checkbox from the theme in a Contact Form 7 form.

[acceptance* zgoda-polityka class:wd-form-checkbox]
I agree to the processing of my personal data…
[/acceptance]
Unfortunately, on the frontend the [acceptance] tag doesn’t render at all — it only shows up as plain text.

I’ve tried different variations, with and without the class, but the result is always the same.
Is there any known conflict with this tag? Or another way to make this checkbox work with WoodMart styles?

Thank you in advance for your help.

Hello,

I’ve checked your site, and I can now see that the acceptance checkbox is displaying correctly on the form.

See screenshot for clarification: https://postimg.cc/vxgZBKZp

Check back your site and check the issue, if you have any questions feel free to contact us.

Best Regards,

What I meant is that the checkbox in the Contact Form 7 form doesn’t use the theme’s styling, like it does on the checkout page. Right now it shows as a default system checkbox, but I’d like it to look like the styled one from the theme (with the custom SVG checkmark, etc.).

Is there a way to make the [acceptance] field match that style?

Hello,

To change the appearance of the checkbox in contact form, Try to add the following custom css code in Theme Settings > Custom CSS, change the code value as per your requirement to setup it.

.wpcf7-acceptance input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: 1px solid rgba(25, 23, 17, 0.48);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    height: 1.5em;
    margin: 0 1em 0 0;
    min-height: 1.5em;
    min-width: 1.5em;
    overflow: hidden;
    vertical-align: middle;
    width: 1.5em;
    position: relative;
    cursor: pointer;
}

/* Custom checkmark when checked */
.wpcf7-acceptance input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 7px;
    width: 5px;
    height: 10px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.wpcf7-acceptance input[type="checkbox"]:focus {
    outline: 1.5px solid rgba(0, 0, 0, 0.8);
    outline-offset: 1.5px;
}

Best Regards,

It’s work, thanks 🙂

Hello,

You’re very welcome! If you need anything else, feel free to reach out!

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards,

[Author]

Posts