Contact Form 7 styling (Checkboxes etc.)

[ULinn]

Hello,
i copied a cf7-form from another site with another theme. At the other site, it uses the default contact-form 7 css and looks perfect.
Having it now on a PRO-Site, some formatting, mainly the checkboxes look odd. Absolutely no spacing.

I tried this:

Contact Form 7 not formating check boxes correctly

but without any effect.

What can I do to have a nice form styling, either the original styling done by contact form 7 or an even better (!) design done by the PRO theme

Best regards

Uli

[Alaa]

Hi Uli,

Which website of your many ones that has this particular issue? a link to the exact page showing this issue would be helpful.

Thanks.

[ULinn]

I send you details via secure note.

[Alaa]

Hi Uli,

Could you please link to that other website as well, just to get a better idea regarding how these boxes look like there.

Regarding the spacing issue, you can simply add this CSS code to (Theme Options > CSS):

.wpcf7-list-item {
    margin-right: 20px;
}

Thanks.

[ULinn]

Other site to compare: see secure note

I added your code - get’s better, but still not good

Uli

[jade]

Hi there,

Please try this good:

.wpcf7-list-item input {
    position: relative;
    top: 3px;
}

Hope this helps.

[ULinn]

… not at all. The checkboxes are moved 3 pixels down, what makes it even worse.

But changing

.wpcf7-list-item input {
    position: relative;
    top: 3px;
}

into

.wpcf7-list-item input {
    position: relative;
    right: 3px;
}

creates a space between the checkbox an the text. Much better. But now the checkbox isn’t aligned with the left border of the container.

Isn’t there a way just to have the original contact form 7 formatting? If CF7 is marked as “Approved Plugin” I would expect it working “out of the box” without trial and error css modifications.

Best regards

Uli

[mldarshana]

Hi Uli,

I understand your concern here and I was able to replicate the issue on my end as well. So I have reported this to our issue tracker to further review.

Thanks for understanding.

[ULinn]

Hi mldarshana, thanky for reporting this issue.

Till when will there be a solution for this?

Because it’s “just” css, it should be possible to solve it without any programming.

Best regards

Uli

[mldarshana]

Hi Uli,

Yes, it’s not a bug but our developers will check on the default CSS and consider if it is something that we can improve on our end.

Regretfully we cannot provide any ETA or guarantee any timeline. The current solution would be to use custom CSS to overcome this.

Thanks for understanding.