Customizing the Contact Form 7 Acceptance Checkbox

[Brabant]

Hi Guys!

1. In order to harmonize the colours of a website, I would like to change the Contact Form 7 Acceptance Checkbox (see enclosed screenshot) from blue to grey.

2. Could you please “remind” me how to neatly inject the following HTML code in the CSS global area of X Pro (see source: Checkbox Four):

<section>
<!-- Checbox Four -->
<h3>Checkbox Four</h3>
<div class="checkboxFour">
<input type="checkbox" value="1" id="checkboxFourInput" name="" />
<label for="checkboxFourInput"></label>
</div>
</section>

With thanks in advance,

B.

[ruenel]

Hello Victor,

1.) Blue is the default color of the checkboxes and radio buttons. That is how browsers display those elements. If you want to change it, you will have to modify it. Please check out this links:

• https://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/
• https://codepen.io/Lennuj420/pen/brMgZg
• https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

2.) You cannot inject or add any html code into the css area. You will need to modify your contact form and add those html code.

Hope this helps. Please let us know how it goes.

[Brabant]

@RueNel

First of all, many thanks for the answers, and sorry for my unintentional amateurishness!

That said, could you please tell me what is the following “mixed” HTML/CSS code, as being parts of my CSS Global that made me think it was possible to inject some HTML in this area:

html > .post-template-default > #x-root > #x-site > div:nth-child(2) > div > #post-7495 > div:nth-child(2) > div > #wtr-content > #cs-content > div > div:nth-child(4) > div > div:nth-child(1) > div > div:nth-child(1) > div > div > p:nth-child(3) {
margin-top: 0px;
line-height: 0.02em;
}

…

html > body > #x-root > #x-site > header > div:nth-child(7) > div > div:nth-child(2) > div:nth-child(2) > div > div > h2 {
min-height: 3em !important;
}

Best regards,

B.

[thai]

Hi Victor,

The custom CSS you provided can be put under

• Theme Options > CSS
• style.css file locates in your child theme
• Customize > Additional CSS

Hope it helps

[Brabant]

@thai

Sorry for the misunderstanding, but what I meant was:

Is the following code strictly CSS or a mix of HTML/CSS?

html > .post-template-default > #x-root > #x-site > div:nth-child(2) > div > #post-7495 > div:nth-child(2) > div > #wtr-content > #cs-content > div > div:nth-child(4) > div > div:nth-child(1) > div > div:nth-child(1) > div > div > p:nth-child(3) {
margin-top: 0px;
line-height: 0.02em;
}

…

html > body > #x-root > #x-site > header > div:nth-child(7) > div > div:nth-child(2) > div:nth-child(2) > div > div > h2 {
min-height: 3em !important;
}

With thanks in advance,

B.

[ruenel]

Hello Victor,

That code is purely css with class selector specificity.

• https://www.w3schools.com/cssref/css_selectors.asp
• https://www.w3schools.com/css/css_specificity.asp
• https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Hope this helps.

[Brabant]

@RueNel

Once again, many thanks for your goodwill and patience!

Best regards,

B.

[ruenel]

You’re welcome!
We’re just glad we were able to help you out.

[nabeel]

Hi Victor,

It looks like you’ve withdrawn your post, let us know if you need any help.

Cheers!

[Brabant]

Hi Guys!

After vain searches and many unsuccessful tests, it appears that some fundamental information still escape me…

The fact is I would like to integrate the following HTML element (detailed at the “Checkbox Four” paragraph of this site) to the Contact Form 7’s [acceptance] form-tag:

<section>
<!-- Checbox Four -->
<h3>Checkbox Four</h3>
<div class="checkboxFour">
<input type="checkbox" value="1" id="checkboxFourInput" name="" />
<label for="checkboxFourInput"></label>
</div>
</section>

…

[acceptance acceptance-861]By ticking this checkbox... <a href="http://127.0.0.1:8080/wordpress/gdpr/“><strong>GDPR & Privacy Policy</strong></a>[/acceptance]

Except that, when I merge the code according to my humble knowledge (see the next example), the text ceases to be horizontally aligned with the checkbox, but is vertically pushed down below:

<div class="checkboxFour"><input type="checkbox" value="1" id="checkboxFourInput" name="" /><label for="checkboxFourInput">[acceptance acceptance-861]By ticking this checkbox... <a href="http://127.0.0.1:8080/wordpress/gdpr/“><strong>GDPR & Privacy Policy</strong></a>[/acceptance]</label></div>

As I am sure that the solution is under my eyes, could you just clarify this imbroglio for me?

With thanks in advance,

B.

[friech]

Hi There,

It’s quite possible but there is an issue with it. This last block of CSS given on the tutorial will not work with Contact Form 7. Because in contact form 7 the label is a parent of the input[type=checkbox], not a sibling. Meaning the circle will not turn to green when check.

/**
 * Create the checked state
 */
.checkboxFour input[type=checkbox]:checked + label {
    background: #26ca28;
}

To see what I mean, please update your HTML code to this:

<div class="checkboxFour">
[acceptance acceptance-861]By ticking this checkbox... <a href="#"><strong>GDPR & Privacy Policy</strong></a>[/acceptance]
</div>

And then add this CSS with the other custom CSS, this is to hide the actual checkbox.

.checkboxFour input[type=checkbox] {
  opacity:0;
}

Regretfully, further customization from here is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself.

Thank you for your understanding.

[Brabant]

Hi @friech, and thank you for your rational explanations.

The fact is I am less puzzled by the button that will not turn to green when checked than by the text that ceases to be horizontally aligned with it, but is vertically pushed down below (like the following examples #1 and #2):

By ticking this checkbox…

• • •

By
ticking
this
checkbox
…

Any suggestion to resolve this particular issue would be greatly appreciated.

With thanks in advance,

B.

[friech]

Hi Victor,

Please add this to Theme Option > CSS

.checkboxFour .wpcf7-list-item-label {
    min-width: 450px;
    position: absolute;
    left: 50px;
}

Please be reminded that further customization from here would fall outside of the scope of support that we can offer.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Thanks,

[Brabant]

Hi @friech, and thank you anyway.

[nabeel]

Glad we could help.

Cheers!