See Editing form template
What content do you have in the Form tab panel?
Hello Mr Miyoshi – I got following content:
[text* your-name id:custom-contact-form autocomplete:name placeholder “Ihr Name”]
[tel* tel-627 id:custom-contact-form placeholder “Ihre Telefonnummer”]
[email* your-email id:custom-contact-form autocomplete:email placeholder “Ihre Email”]
[text your-subject id:custom-contact-form placeholder "Betreff"]
[textarea your-message id:custom-contact-form placeholder “Ihre Nachricht”]
[submit id:custom-contact-form-send “Senden”]
Where do you have the “class: custom-contact-form” ?
Sorry Mr Miyoshi – what I meant was id:custom-contact-form
My css is:
#custom-contact-form {
border-radius: 15px;
}
Thank you very much for the prompt assistance.
I have now replaced “id” with “class.” – however, I need to set !important in the CSS to ensure that the code is applied, as the “class” does not override the general specifications of “input[type=text]”.
You can prove this in the inspection mode of the website.
Kind regards.
Hello, we have the exact same issue. Why was the ID usage changed to Class. And if Class is the way to do this why wasn’t this made clear years ago?
We also have made the change from ID to Class and only with the use of !important per line does this change work.
Please fix CF7!
Yeah, input[type=text] has a higher specificity than a simple class selector. You can work around this by adding the element selector before the class name, i. e.: input.custom-contact-form {…}. Alternatively you can use another selector in the DOM hierarchy to create higher specificity, like #content .custom-contact-form {…}.
That said: this is not a problem of Contact Form 7 but rather of the Flatsome theme that is used on the site; this is setting the styles for form controls.
