[Resolved] Contact form 7 Class

[Katharina]

Hi, I have a CSS Class to optimize my Contact form with contactform7. And it works fine on my other website but it dosen’t respond on this website. Do you know where the issue is?

div.wpcf7-response-output {margin: 30px 0 0 !important;padding: 0 !important;border: none !important; font-family:”Lato”,
Arial, sans-serif; }
.wpcf7-mail-sent-ok {display:none !important;}
span.wpcf7-not-valid-tip {font-size: 10px; font-family: “Lato”, Arial, sans-serif;}
div.wpcf7 img.ajax-loader {margin-left: 20px !important; max-width: 24px !important;}

That’s what it looks like on my other website
https://paste.pics/b11c2034983692d57ebf4daef287a5a6

Thanks
Kati

[Katharina]

I just noticed that the CSS has nothing to do with the style, I think so.

[David]

Hi there,

yes, that CSS has very little to do with the form style.
If you set-up your form then we can have a look at the CSS you need.

[Katharina]

This is my contact form https://missionfamily.de/kontakt/
I did try few CSS that I could find on google but nothing does it the way I would like to have it.

I would like to have the label above the text field and bit more uniform like on my other website https://katisiemens.com/de/kontakt/

Thanks David

[David]

Try:

.wpcf7 form label, .wpcf7 form label span {
    display: block;
    margin-bottom: 0.5em;
}

.wpcf7 input:not([type="submit"]), .wpcf7 textarea {
    border: none;
    background-color: #f3f3f3;
}

.wpcf7-acceptance span label {
    display: flex; 
    max-width: 90ex;
}
.wpcf7-acceptance span label input {
    flex: 5%;
}

[Katharina]

Thanks David, My website is coming together like I imagine it to be, thanks to you and the rest of the support. You all do a great job.

I’m very thankful that I choose Generatepress to build my new website.
Thanks Tom for bringing out such a great product with an amazing support.

[David]

That’s really nice to hear. Glad we can be of help

[Author]

Posts