Checkboxes not aligned

See https://contactform7.com/custom-layout-for-checkboxes-and-radio-buttons/
?
Also see Styling Contact Form for a general explanation of styling CF7 forms using CSS.

I’m using the code, like I mention in my post ‘…added the code to my custom css’. Just follwed the steps explained by CF7 on th epages mentioned by you.

In there example, checkboxes are aligned correctly, with same css code.
On my site, they are not. So, it’s not working like it should.

Please include all your input in the Form of the CF7 interface.

<p>
Voornaam        [text* Voornaam]
Achternaam       [text* Achternaam]
Telefoonnummer          [tel* Telefoon]
E-mail                [email* Email]
Geboortedatum      [text* Gb-datum]
Bondsnummer [text* Bondsnummer]
</p>

<h2>Geef hieronder je voorkeur aan:</h2>

<strong>Donderdagochtend (District) </strong><br />
[checkbox Do_Ochtend "Dames 35+ (2DE, 3DD)"]

<strong>Donderdagavond (District) </strong><br />
[checkbox Do_Avond "Dames 17+ (4DD)" "Gemengd 17+ DD, HD, 2GD)"]

<strong>Vrijdagavond (District) </strong><br />
[checkbox Vr_Avond "Dames 35+ 4DD" "Heren 35+ 4HD" "Gemengd 35+ (DD, HD, 3GD)"]

<strong>Zaterdag (District) </strong><br />
[checkbox Zaterdag "Dames 17+ (2DE, 3DD)" "Dames 35+ (4DD)" "Heren 17+ (4HE, 2HD)" "Heren 35+ (4HE, 2HD)" "Heren 35+ (2HE, 3HD)""Heren 35+ (4HD)" "Gemengd 17+ (DE, HE, DD, HD, GD)" "Gemengd 35+ (DE, HE, DD, HD, GD)""Gemengd 35+ (DD, HD, 2GD)"]

<strong>Zondag (District)</strong><br />
[checkbox Zondag_District "Heren 17+ (4HE, 2HD)" "Gemengd 17+ (DE, HE, DD, HD, GD)"]

<strong>Zondag (Landelijk)</strong><br />
[checkbox Zondag_Landelijk "Dames (4DE, 2DD)" "Heren (4HE, 2HD)" "Heren 35+ (4HE, 2HD)" "Gemengd (2DE, 2HE, DD, HD, 2GD)" "Gemengd 35+ (DE, HE, DD, HD, GD)"]

<strong>Wil graag in één team spelen met:</strong>
(Namen en bondsnummers opgeven)<br />
[textarea In_team_spelen_met]

<p><strong>Opmerkingen / Voorkeuren aanvang spelen ochtend of middag</strong> [textarea your-message] </p>
<p>Vink deze even aan als je een mens bent en lid van TC Breda</p>
[recaptcha]

<p>[submit "Verzenden naar Technische Commissie"]</p>

I have inspected you form at the link provided. It seems the code below is causing the problem

? span.wpcf7-list-item {
margin-left: 0.5em;
}

suggest you comment out that line of CSS. Line 58 of styles.css??

Thanks! That did the trick.

As is is in the CF7 standard CSS, every time the plugin is updates, my changes wil be lost. So, is is possible for the CF7 developers to change this?

Kindly provide me with the link to the current location of the form so that I would be able to answer your follow up question.

The form will be online untill december 1st:

Link

As is is in the CF7 standard CSS, every time the plugin is updates, my changes wil be lost.

Right on, you could have also done something like the code below and added your CSS via a child theme or a custom CSS plugin to override what’s in your WP theme style sheet.

.wpcf7 .wpcf7-list-item {
margin-left: none;
}

So, is is possible for the CF7 developers to change this?

Probably not considering millions of people use CF7 and have not had this problem. CF7 CSS styling is minimal and that make a blend with most themes out there.

Your issue appears to be due to following the CSS styling applied to the standard HTML form elements in your WP theme style sheet:

.first {
margin-left: 0 !important;
padding-left: 0 !important;
}

.last { margin-right: 0 !important;
padding-right: 0 !important;
}